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');
Related
I have in React a tooltip component that is wrapping a button component.
How can I position the tooltip relative to the button position?
<div class="tooltip">
<div class="button"></div>
</div>
Here is a codesandbox you can play with.
You cannot do that with the way your markup is structured. I would suggest you making a div that wraps both the elements.
<div class="wrapper">
<div class="button"></div>
<div class="tooltip"></div>
</div>
You would then apply position relative to the wrapper element. Then you can use position absolute on the tooltip to position it however you want it according to the wrapping div.
I am trying to render single react component with different properties at different div id
index.html:
<div class="container" id="root1"></div>
<div class="container" id="root2"></div>
There are two hyperlinks and onClick will catch the id of the hyperlink, I have bound root1 and root2 to both the hyperlinks and calls the function(prop, containerID)
file.js:
function(prop, containerID){
ReactDOM.render(<component prop={prop}/>, document.getElemntById(containerID));
}
after this statements i can see only 'prop2' at both the divisions 'root1' and 'root2' and if i change the order of ReactDOM.render by 'root2' and then 'root1', then only 'prop1' is visible at both 'root1' and 'root2'.
But I need 'prop1' at 'root1' and 'prop2' at 'root2'.
Is there anything I need to add more to the above code or any other alternative way to implement this view?
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 have components created with ng-repeat and I want them to be flex children:
<div style="display:flex; flex-wrap: wrap">
<div ng-repeat="item in data" style="flex-basis: 30%">
<my-component item="item"></my-component>
</div>
<div>
Where my component's template is:
<div class="c">
...
</div>
It is kind of working, but the my-component items are not all in the same height as they would have been if they were simply divs.
I can workaround this by setting .c{height: 100%} but it messes up with the wrapping.
Can I acheive this behaviour with AngularJS 1.5 at all?
Attached codepen for repro: http://codepen.io/anon/pen/ENqvvO
Thanks!
The problem is that when using the component you have a new element wraping the div.c element, so that the flex behaviour doesn't bound the two elements of your css. Your example (from plunkr) without the component works because it doesn't have the my-component in between.
div.flex-container
my-component // <- this guy is breaking off the flex connection
div.c
In order to fix it you can style the tag my-component instead of .c so that the flex can be applied directly between div.flex-container and my-component.
Actually I recommend you to create a container component and an item component so that things are kept clear and solid.
For example:
<list>
<list-item>Item 1</list-item>
<list-item>Item 2</list-item>
<list-item>Item 3</list-item>
<list-item ng-repeat="item in items"> {{ item }} </list-item>
</list>
And also:
<gallery>
<gallery-item ng-repeat="photo in photos">
<photo img="photo "></photo>
</gallery-item>
</galery>
Beautiful, isn't it? :{D
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.