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
Related
Is there a way to show the react-bootstrap modal inside a specific div and not the entire screen?
The code looks like this:
<div>
<textarea />
<Modal>....</Modal>
</div>
I want to show the modal on top of textarea. Any help?
PS Got the solution. Had to create a wrapper for modal and adjust styling.
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'm building a website with ReactJS. On my page, I have a content section as well as a sidebar.
When I click on a button the sidebar should be toggled. At this moment, I'm changing the class of the content from col-md-9 to col-md-12 from bootstrap and set the attribute hidden to the sidebar.
But now, I want to add some transitions like fade in and fade out the sidebar and increase the size of the content. I have no idea how I can add these transitions because I'm changing the classes.
Can you tell me what I have to do?
You can use CSS. Take a look at animate.css
https://daneden.github.io/animate.css/
You can use css transition by changing classes. Here is example of two clsses that will do fade animation:
.fade-in {
opacity: 0;
transition: opacity 400ms;
}
.fade-out {
opacity: 1;
transition: opacity 400ms;
}
However it wouldn't work along with hidden Bootstrap class name, because it sets display attribute to none value. TO make it work you can use fade-in class name instead of hidden and fade-out, when side nav should become visible
I am new to react and could not grasp the concept between bsClass and className.
I try to implement a modified button style, like:
<Button bsClass="btn-custom" >Custom button</Button>
where it does not work when I substitute bsClass with className.
But in other part, using the same custom.css source, I implement:
<img src={logo} alt="logo" className="app-logo" /> and it works.
JSX attribute className is equivalent of HTML class. So the below JSX
<span className="app-logo">Logo</span>
will be equivalent to the below in HTML
<span class="app-logo">Logo</span>
As per bsClass is considered in
<Button bsClass="btn-custom" >Custom button</Button>
it is prop that is being passed on to the Button component in reactJS and that is what it will be using to set the className inside the component something like
<button className={this.props.bsClass}>{this.props.children}</button>
So it an attribute that is defined as a property by the react-bootstrap docs.
React's className is exactly equivalent to regular classes in CSS.
HTML/CSS:
<div class='red-text'>
Foo
</div>
React/JSX:
<div className='red-text'>
Foo
</div>
The above snippets of code do the exact same thing. The only reason we're stuck with using className in React (instead of class) is because "class" was already taken as a reserved keyword in JavaScript.
As the others have said, bsClass is a pre-defined class within the react-bootstrap package. Just like how the CSS-version of Bootstrap comes with its own styling, so, too, does react-bootstrap.
A practical difference. I you set bsClass to something other than what REACT-Bootstrap has as a default, you have to do your own css themeing of the button.
By adding a className="xx" you still get the default theme, but you can now add css styles for color, padding, etc, using your own .css
.xx {
magin-bottom: 2px
}
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.