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;}
Related
I have a bootstrap modal popup on my page. The popup is a bit long so html adds the vertical scroll bar which doesn't look so good with the animation effect.
So, I want to remove this scroll bar but still be able to scroll.
Any help?
It may help you. Fixing the overflow hidden will remove the scrollbar, To get full content within the page use overflow auto to modal body
CSS:
.modal{
overflow:hidden;
}
.modal-body{
overflow:auto;
}
If you are using bootstrap version 4. You can use this css code.
.modal-scrollbar-measure {
overflow: hidden !Important; }
.modal class has overflow-y: scroll rule which results in scrollbar always visible.
https://stackoverflow.com/a/18715220/9143855
that because you use overflow : scroll ;
the scroll value of overflow property add scroll ball line to both sides vertically and horizontally you should use instead overflow auto which will just add one side scroll for which it needed the most
You can also use the modal events for this:
$("#modalID").on('shown.bs.modal', function(){
/* Hide the body scrollbar. */
document.body.style.overflow = "hidden";
});
$("#modalID").on('hidden.bs.modal', function(){
/* Show the body scrollbar. */
document.body.style.overflow = "auto";
});
the events can be seen here: https://mdbootstrap.com/docs/jquery/modals/events/
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;
}
So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (https://trello.com). Where you can add cards, delete cards, etc.
I have this background problem where the background does not cover the whole page when I scrolled horizontally,
Here is the problem I have:
As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.
Here, the background is white when I scrolled horizontally. It does not cover the whole page.
Here is my Html code:
<div class="container" id="amethystBackground2">
<!-- contents here -->
</div>
Here is my Css code:
#amethystBackground2
{
position: relative;
background-color:#9B59B6;
//This is needed to remove white space on top of page
margin: 30px 0 0 0;
//This is needed to for the background cover the whole page when scrolled verticallly
//(when you have too much cards, you need to scroll down)
min-height: 100vh;
min-width: 100vw;
//This is needed give space on top of page
margin: 50px 0 0 0;
}
I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.
I also tried width:100% and 'height:100%', But it does not work.
Please help me, Thank you in advance.
The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.
First solution
Set your background-color to your body instead of your container div.
Just move background-color:#9B59B6 to
body {
background-color:#9B59B6;
}
Second solution
The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.
<div class="container-fluid" id="amethystBackground2">
<!-- contents here -->
</div>
More about container-fluid here.
You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:
<div id="amethystBackground2">
<div class="container">
</div>
</div>
Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.
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 am using bootstrap 3 in my project. I have a modal lightbox in my page there is some content in it. I just put height: 300px and overflow-y: scroll in it. But it is showing scrollbar background all the time even when the content height is below 300px. How can i fix this???
You need to use overflow-y: auto; instead of overflow-y:scroll;
(when auto is use it showing the scrollbar only when it need and not all the time)