I am trying make modal window in reactjs with bootstrap 4. When I use bootstrap 4 I have problem with css formatting with close button. When I use bootstrap 3 css are ok.
There is my code . Thank you for advice.
Add this style
.modal-header {
display: block;
}
The display : flex on the model-header is causing this issue. So override this style.
Updated Code
Related
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
I have being trying to resolve this issue for more than 9 hours but have no idea how to solve it even in angular js material demo site this problem is occuring.
My problem is with body scrollbar getting hidden when the md-select dropbox is open. Does anyone know how can i get both scrollbar working at the same time. I am using angular js material 1.1.0
Here is a demo with the issue.
Codepen Demo
When you click on a select, the rule :
position: fixed;
Is applied to the body so the scroll-bar is removed, so you need to override this rule by this one :
body {
position: static !important;
}
Here is your codepen with the scroll-bar.
I'm trying to open a modal page generated from a click in my popup but the modal page stays backward the popup. Any idea how to handle that?
I tried to play with :
.popup-open .backdrop {
z-index: 11;
}
without success
In fact, just modify $z-index-modal to 13 in SCSS variables.
I have setup my project to use angular strap with bootstrap and while a button with the bs-modal attribute opens a modal without issues the data-placement and data-animation attributes are not doing anything. i tried passing the animation and placement as defaults via the directive config but that does not help either.
I have:
angular (with angular-animate.js), angular-strap (including angular-strap.tpl.js), bootstrap js files loaded
i have the angular-motion.css file loaded too
the modal opens at the top, without animation whatever i set for animation or placement
Am i missing more css or js requirements not in the docs?
Ok figured this out after some tinkering. The animation did not work because obviously you have to inject the animate js into the directive too if you want to use it:
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);
This is actually mentioned on the github page but not in the docs so i missed that.
The placement not working seems to be an issue with the base bootstrap css not actually supporting the center class for modals. Maybe a bit unfortunately the docs use this as an example but this will only work if you add the css for this yourself. So to actually use:
data-placement="center"
.. you will either have to load the css from the docs here: http://mgcrea.github.io/angular-strap/styles/libraries.min.css
or just copy the part for centering modals:
.modal.center .modal-dialog {
position:fixed;
top:40%;
left:50%;
min-width:320px;
max-width:630px;
width:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%)
}
I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (Add class to accordion heading using angualr ui bootstrap?) and it's Jsfiddle (http://jsfiddle.net/Zmhx5/3/) represent my problem perfectly, but does not explain the solution.
I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.
.panel-heading {
background-color: red;
}
This website has a tutorial on accordions and its css simply overwrote it (http://patternry.com/p=accordion/). I tried doing the same but it did not work, please help :/
The reason why your override doesn't work is because of CSS Specificity. Since the Bootstrap style is more specific than yours, it is the one that's being applied. You'll need to override as follows
.panel-default >.panel-heading {
background-color: red;
}
Here is the JSFiddle for reference.
You should use scss in this case.
<div class="custom">
<accordion>
...
</accordion>
</div>
In css you will need to define.
.custom {
.panel-heading: {
background-color: red !important;
}
}
Since I couldn't add a comment to #AdityaSethi in #BartJedrocha's answer I will put an answer here since I think that it is useful.
.panel-default >.panel-heading {
background-color: red;
}
worked for me where
.custom {
.panel-heading: {
background-color: red !important;
}
}
Did not. Perhaps it is the use of SCSS? I read somewhere that SCSS uses the extension .scss. I didn't have the patience to change my stylesheet extension or create a new one. Sooo I tried the 2nd answer.
My comment however is more toward the #AdityaSethi comment that noted the issue of that solution affecting the entire app since panel classes are widely used. Understandable. I figure though the easy solution to that is:
div.custom .panel-default>.panel-heading {
background-color: red;
}
And that did the trick for me..as far as still changing the styles. The rest of my bootstrap page must not have had other panels in use because nothing else was change before I added div.custom to the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.custom should be affected. :)