For a bootstrap modal. Is there a way to achieve both:
Avoid the background content behind the modal from being scrollable
When opening the modal, the background content should not shift to the right because of removed scrollbars
The best solution I have so far is:
.modal-open {
overflow-y: scroll !important;
}
But it has the problem that the background content is still scrollable when the modal is showing.
body.modal-open {
overflow: hidden;
}
This works for me without any shift.
How to show a modal without shifting the content to the left?
That bug is fixed in the upcoming Bootstrap v3.2.0 thanks to
https://github.com/twbs/bootstrap/pull/13103
Related
http://jsfiddle.net/6dhm0s8v/3/
The image does not fit inside the modal, no matter what size I make it. I've tried these for modal image
width: 500px;
max-width: 500px;
Neither of these work and the image goes right outside of the modal.
How can I fix this?
You need to use img.modalImg in your CSS instead of just .modalImage FIDDLE
Also you might need to reset your left, top and transform.
I'm doing some web development and for some reason on some of the pages the scrollbar on the right side of the window is transparent or white when using Chrome. I've looked through my css and I don't see any scrollbar styling set. The scrollbars look normal in firefox.
If it's because the page is so short that no scroll bar is required, but you still want it to show up, you can set the overflow-y CSS property to scroll on the html element of the page. For example:
html {
overflow: auto;
overflow-y: scroll;
}
I am creating a site that has three major components - the navigation bar on the left, the central content (which is broken into a Title + Data), and a footer. The footer is fixed to the bottom of the page. I have JSFiddle example here: http://jsfiddle.net/6Ur89/1/
The issue I am running into is that, I want to the #data div to scroll vertically when it is too big for the div. The problem that I am seeing is that, when this happens, the div just gets pushed underneath the footer (instead of stopping at the footer) until infinity and scrolling never happens.
Within my CSS, I do have this:
html, body {
overflow: hidden;
}
which I put in to prevent horizontal and vertical scroll bars appearing (presumably due to the footer). However, when I remove this style, the entire content div scrolls which is almost what I want (I would prefer that the title doesn't scroll...but that isn't the end of the world).
Can anybody provide any suggestions where I am going wrong? Again - want #data div to scroll and to stop at the footer. I want a fixed footer at the bottom of the site and I don't want the footer to create the scroll bars. Please let me know if you need clarifications.
Update: Yay for Stackoverflow - after typing up this question, one answer popped up immediately. I put a clearfix on the wrapper, so scrollbars don't appear due to the fixed footer. Updated my jsfiddle to reflect. So, essentially, I'm looking to understand how to just have the #data div scroll.
http://jsfiddle.net/Xsu3Q/
added a padder inside the content div:
<div id="content">
<div class='padder'>
<div id="title">title</div>
<div id="data">Lots of data...
.padder {padding-top: 100px;}
moved the content 100px up outside the frame:
#content {
position: relative;
top: -100px;
margin-left: 350px;
height: 100%;}
This way you can use the height:100% property to match the height of the body
AND subtract the 100px for your footer.
for a cleaner example look at a similar answer
I'm attempting to hide the vertical scrollbar of an image, while providing a horizontal one when necessary. The CSS I'm using is
style="overflow-x:auto; overflow-y:hidden;"
This is fine but I am running into an issue where the bottom part of the image is blocked by the horizontal scrollbar. Is there a way to add the bar 'beneath' the image?
Thanks
You can move your horizontal scrollbar with padding
#img_parent {
overflow-x:auto;
overflow-y:hidden;
padding-bottom: 10px;
}
I came across an issue with one of our web sites:
In IE9 the page had a vertical scrollbar, but you couldn't use the mousewheel, arrow keys, pgup/pgdwn to scroll. The only way to scroll was to actually click/hold and move the scrollbar.
I removed the following from the css:
{
overflow-x: hidden;
}
Then scrolling worked as usual. Has anyone else come across this? It seems odd as overflow-x should hide the horizontal scroll bar? Why would it effect the vertical?
I have tried this on a test page and it acts as expected. So it must be a combination of things.
Try using the following code snippet. This should solve your issue.
body, html {
overflow-x: hidden;
overflow-y: auto;
}
overflow-x: hidden;
would hide any thing on the x-axis that goes outside of the element, so there would be no need for the horizontal scrollbar and it get removed.
overflow-y: hidden;
would hide any thing on the y-axis that goes outside of the element, so there would be no need for the vertical scrollbar and it get removed.
overflow: hidden;
would remove both scrollbars
I use iFrame to insert the content from another page and CSS mentioned above is NOT working as expected. I have to use the parameter scrolling="no" even if I use HTML 5 Doctype