On my bootstrap 3.3.7 website, the entire body gets a 'style="15px"' when the modal is opened. This is moving my top navigation (fixed nav) 15px right when I open my modal. I cannot use CSS to remove the padding since it is an element.
I have tried to use 'left: 15px' on the body for modal-open class (and various other CSS options) to no avail. I did not add this to my HTML so it's a bootstrap thing. The link to the modal is within the top navigation, but when the link is clicked the modal popup HTML shows up below the nav div when I inspect element.
Here's the page, click on 'Log In' button in top right.I expect the navigation to stay put when I click the modal. I don't want it to move. Please help
Bootstrap also add class on body .modal-open u can play with this class
.modal-open .navbar-fixed-top {
right: 15px;
}
Related
I'm trying to make a CSS only sticky menu. This menu is inside another div under the header of the website. But as the user scrolls it should remain visible on the page. Googling and looking for answers here I found a good example of what I want to achieve: http://jsfiddle.net/g7x102s4/ (the red div)
My problem is that I'm doing this inside a React app where I can't install any other plugin, so It has to be done in pure CSS. I made a codesandbox where I'm trying to get it working. The menu class can float inside the menu container, but always visible to the user. It's the same effect from the first link above, just without JavaScript.
Is it possible? If so, how can I achieve it?
Add properties position:sticky and top:0 to your menu.
.menuContainer .menu {
background: red;
height: 300px;
position: sticky;
top: 0;
}
The chosen dropdown list always goes underneath the next available card element on the model.
I have tried
.class-of-dropdown {
position: relative;
z-index: 5000;
}
.modal-body {
overflow-y:visible;
}
Here is the jsfiddle example.
I have tried several fixes and none of them seems working.
Chosen dropdown within Bootstrap modal is hidden behind modal footer
How to Solve Option Select appeared behind modal using bootstrap?
Bootstrap dropdownlist z-index displaying under modal window footer
how to make chosen select go over parent div
There is a CSS that is causing this problem. After the modal opens, there is a div called "Another Heading" which has a class called card. This card class has a default scss which is causing the problem;
.accordion > .card{
overflow: hidden;
}
The solution is just to write the CSS given below to override this CSS;
.accordion > .card{
overflow: inherit;
}
So I've got this problem that my jumbotron goes under the navbar and I want to put it just below with some padding between them.
Here is my code: https://codepaste.net/ditsxf
This is how it looks like
Try adding this to your .css file:
body {
padding-top: 50px;
}
Or whatever the height of the nav bar is.
The classes from a bootstrap added a position: fixed; to your navbar. It means, that your navbar is always visible at the top of your screen all the time, even when you are scrolling down.
There are 2 ways to fix this:
Remove .navbar-fixed-top class from your nav component, but then you won't see your navbar at the top when you scroll down.
Add some margin-top to your container element.
I using twitter bootstrap modals on a one pager website. When I click on the button to open the modal, the background jumps to the top of the page and opens the modal. The same thing happens when you click the close buttons inside the modal.
I tried adding the code below to my CSS file. This stop the background from jumping to the top, however, I can now scroll through the background with the modal opened which I don't want as well. And also when my modal have overflows, I can see both the scroll bars for the modal and background.
body.modal-open {
overflow: visible;
}
Is there another way to solve this jumping problem without enabling the user to scroll through the background while the modal is opened?
If you have the height of either body or html is set to 100% as in my case, add the following to your CSS file:
html, body {
overflow: scroll;
}
The background now should keep its original position.
In case this helps anyone for this exact scenario, the following CSS solved the issue:
body.modal-open {
position: inherit;
overflow: visible;
}
body.modal-open .modal {
overflow: hidden;
}
The first block allows the page scrollbar to show and prevents the jump to the top when opening the modal. The second block stops the modal overflow adding its own second scrollbar.
Add following class in css:
.modal-opned {
overflow-y:hidden;
}
add it to body tag when modal is opened and remove it when modal is closed.
As I also struggled for days with this problem, my solution was simple - I played with the HTML and I found that when the modal was closing .modal-backdrop was causing the issue. So I simply commented out this from my CSS and everything is fine now. Use your Browser inspector for problems like this!
//.modal-backdrop + #app-wrapper {
//overflow: hidden;
//}
.modal-open{position: inherit}
This is because modal-open is a class added to body, when modal is opened. Make sure it's position is not fixed , If it's fixed make it inherit, that will help you to stay in the same place when popup is opened
You can use the following code and it should work fine:
<div class="modal" id="modelId" role="dialog" aria-hidden="true" data-backdrop="true">
<!--Model code -->
</div>
Assign the above id to any button or link and your model should load up just fine without any issues.
I had the same issue and removing href="#" solved it.
I have created a bootstrap modal,when it pops up the vertical scrollbar of the background page gets disable and contents of the background page move to their right side in the same amount of scrollbars width.So i want to avoid that move of the contents of page, and make background scrollable while modal is open? (note that i am using bootstrap 3.0.0 modal)
So,Please give me some hint to do that.Thank you in advance . . .
Change the CSS like this..
#myModal .modal-content
{
height:200px;
overflow:auto;
}
If you don't want the scroll bar on the entire modal, use modal-body instead:
#myModal .modal-body
{
height:200px;
overflow:auto;
}
Demo: http://bootply.com/88983
Here i come to know that when modal is opened bootstrap adds the 'modal-open' class to the body ,and then we can apply our css to this class.I have found solution for this by changing my css:
.modal-open{overflow:auto !important;}