I'm creating a layout generator for flexbox and I'm using AngularJS 1.5.7 components. Basically, my issue is that "replace" does not exist for component but I'd like to be able to dynamically style the root element of my component.
Say that I have a main "div" with its display set on "flex". When I click on a button, it adds a component in this "div" which will be the items of the flexbox layout. The HTML generated is:
<div style="display:flex;">
<item>
<div style="flex-grow:1;..."></div>
</item>
</div>
My issue is that the styles are applied to the "div" inside the "item" element, but "flexbox" does not work as expected as the "item" element does not have any flexbox-related styling. Note that the idea is that I also have some dropdown and textbox used to modify the CSS properties of the "item" component. The template of this one looks like:
<div class="zone" data-ng-style="$ctrl.model.getStyle()">
...
</div>
And I'm inserting this component like this:
<item model="$ctrl.item"></item>
Then, my question is: "What's the alternative to 'replace' property of directives?" or "How to dynamically style the root element of the component?".
Thanks
I was hesitant about using some Angular-only classes such as .ng-isolate-scope (due to .component() always using isolate scopes), but you could be able to provide styles for your own component:
item {
flex-grow: 1;
}
If you would like to dynamically apply classes specific to your element, you could follow the same pattern.
item.selected {
font-weight: bold;
}
Nevertheless, I'm not sure about how compliant it could be with older IE versions, though.
Related
I have a React component that dynamically applies a CSS style class using the onClick listener. This works and when I view the generated html in the browser inspector I can see my desired output.
<div class="RecipeSection_recipe-section__Asce8 active">
<h2>Ingredients</h2>
</div>
However the styling I have defined in my React CSS Module is not applied
.recipe-section.active h2 {
text-align: center;
color: red;
}
When I remove the .active class I can see the red styling applied.
I guess because the React CSS Module adds a hash to the name it is impacting the class concatenation, but I am not sure if there is a way to resolve this within the React CSS module?
The reason the style wasn't being applied is because I had supplied the css 'active' class as a string value rather than as a reference from the imported CSS module:
import classes from "./RecipeSection.module.css";
Then I could supply the reference:
${classes.active}
The real clue was that in the initial generated html, my active class had not been allocated a hash as the recipe-section class had
<div class="RecipeSection_recipe-section__Asce8 active">
I have popup form component which has form header body footer. How can I update CSS of those HTML elements with the help of form container componentID.
I have tried these:
getComponent('stakeholderAddUserWindow').update({height: 1900});
getComponent('stakeholderAddUserWindow').addClass('newclass');
getComponent('stakeholderAddUserWindow').style: 'background-color: #5E99CC';
getComponent('stakeholderAddUserWindow').update({style: 'background-color: #5E99CC;'});
I have other doubt how to traverse from the container to inner child elements, here I have 3 child elements with classes x-header, x-body, x-footer. I want to apply CSS to the body.
<div class="x-window flex-window deploymentPlanWindow x-layer x-
window-default x-border-box" id="stakeholderAddUserWindow-1502"
componentid="stakeholderAddUserWindow-1502">
<div class="x-window-header x-header"id="stakeholderAddUserWindow-
1502_header">header</div>
<div class="x-window-body x-body"id="stakeholderAddUserWindow-
1502_body">body</div>
<div class="x-window-footer x-footer"id="stakeholderAddUserWindow-
1502_footer">footer</div>
</div>
Ext.get(Ext.query('.x-window > .x-window-header')).setStyle('background', 'blue');
Above one not working
For editing styles use 'setStyle' function on components or elements
And for adding and removing classes use addCls and removeCls functions
getComponent('stakeholderAddUserWindow').setStyle('height', '437px');
I want to add style my modal so it has (making the modal the full width of the screen and pushing it down the screen):
width: "100%,
top: "25px
to the
<div class="modal-dialog" role="document">
as it appears on the regular bootstrap modal (http://getbootstrap.com/javascript/#modals), or when react-bootstrap is used, the div is
<div class="custom-modal modal-lg modal-dialog">
but looking at the react-bootstrap site, (https://react-bootstrap.github.io/components.html#modals) we only have access too
<Modal/>
<Modal.Header/>
<Modal.Body/>
and applying those CSS settings to those won't give me the styling im looking for
If you look to the Props section for modals, it explains what possible customisations can be set on each of those (Modal, Modal.Header, Modal.Body).
For example, to add a custom-modal class to the modal-dialog element, the property dialogClassName can be set:
<Modal dialogClassName="custom-modal">
//Modal content goes here
</Modal>
Property documentation
Example with custom css class
I'm creating a reusable item picker component using Angular 1.5. The picker has a search field and a list of items to choose from. An example use case for the picker is a popup where the user selects some items and then has a "Continue" button to proceed.
Conceptually, the search field and the list of items belong to the component and the "Continue" button belongs to the surrounding dialog. However, I want to position the button next to the search field. In some cases there are no extra buttons, sometimes one extra button, sometimes two.
Something like this:
What is the best way to create such a component?
Options I've thought of:
Create a component / directive for the item picker, put the button before or after the directive in the HTML, and use CSS to position the button.
Here the positioning of the button is ugly and fragile, as it's not in the proper position within the HTML. It would probably need a wrapper div and absolute positioning on top of the picker component:
<div style="position: relative">
<item-picker></item-picker>
<button name="Continue" ng-click="submit()" style="position:absolute; top:5px; right: 5px"></button>
</div>
Somehow pass the buttons and callbacks as parameters to the item picker component. Here the ugliness is in the hard-coding of the buttons and styles and amount of buttons:
<item-picker btn1-text="Continue" btn1-style="primary" btn1-callback="submit()" btn2-text="Cancel" btn2-style="secondary" btn2-callback="cancel()"></item-picker>
I'm unsure whether the button configuration and callbacks could be passed as a single configuration object. I'm mainly concerned about the callback functions, whether they will work properly if passed through a configuration object instead of proper '&' callback binding.
Stop trying to make the picker into a component / directive and just use <ng-include> to include the picker code which reads the button configuration from the scope. Ugliness is in lack of scoping and not using components.
Is there some best practise for such cases?
One possible solution is to use ng-transclude, so your code could look something like:
Markup
<item-picker>
<button ng-click="parentScopeFn()">Btn 1</button>
...
</item-picker>
Directive
angular.module('myApp', [])
.directive('itemPicker', function() {
return {
restrict: 'E',
transclude: true,
scope: {
...
},
templateUrl: 'item-picker.html'
};
});
itemPicker template markup
<div class="item-picker">
<div class="item-picker-controls">
<div class="item-picker-search"><input type="search" ng-model="..."></div>
<div class="btn-group" ng-transclude></div>
</div>
<ul class="item-picker-list">
<li ng-repeat="item in items" ng-bind="item"></li>
</ul>
</div><!-- end item-picker template -->
Of course the above code is just an example and is making a lot of assumptions about your itemPicker component. Also, you'll still need to use CSS to position your buttons, but it might be easier to reason with b/c it'll be in the context of your component.
Note
You could also make use of "multi slot transclusion". This is probably useful in cases where the number and type of buttons you'll have is predictable and you want them arranged in a consistent way no matter how they are placed in the markup.
Hope this helps.
I'm attempting to learn AngularJS (background in BackboneJS). I have a div with some content inside, and I hope to render this div as a modal upon clicking inside of it:
<div class="stickynote"> Content here </div>
My thinking is to add a modal class that I can style in CSS. However, I'm not too sure how to add the modal class upon clicking (and conversely, removing the modal class upon clicking after the modal is rendered). Would I have to use ng-click and somehow set the class property from the JavaScript (myApp.js) file?
If you want to use your own modal styling and if you simply want to achieve adding an extra item to class attribute of your element, you can use a combination of ng-class and ng-click:
<div class="stickynote"
ng-class="{yourModalCSSClass: isModalOpen}"
ng-click="isModalOpen = true">
And somewhere else, you need another ng-click to turn it off:
<button ng-click="isModalOpen = false">Close modal</button>
Beware that both div and button must be in the same scope hierarchy to be able to use the same isModalOpen value. And by the way, I haven't tried this code but this should give you an idea. If you have a controller/directive, you can set isModalOpen from there by introducing functions in the scope:
// controller
$scope.toggleModal = function () {
$scope.isModalOpen = !$scope.isModalOpen;
}
<div ...
ng-click="toggleModal()">
<button ng-click="toggleModal()">...
If you're open to using a third-party solution, ng-dialog is an outstanding solution for modals+Angular.
https://github.com/likeastore/ngDialog