Bootstrap modal lightbox showing scrollbar background - html

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)

Related

Sticky and scrollable Sidebar sidebar - CSS and HTML

I am working on a Shopify Store but I would like to make a this sidebar sticky and scrollable. The reaso to be scrollable is that when using the position: sticky; css callout the sidebar appears to be very big so it is not visible until the end of the page, then at that moment I would love to make it scrollable so we can filter without having to go to the bottom of the page. I have found something like overflow-y: scroll; but does not work together with the sticky thing. I am sharing some example pics: IMAGE HERE 1 IMAGE HERE 2
You might need to add max-height property to the sticky element
like so
.side-nav{
position: sticky;
overflow-y: scroll;
max-height: 100vh;
}
now your sidenav has a max-height of the height of your screen, so it can apply the scroll behavior if the content is larger than the container

CSS background does not fill all page properly when scrolled horizontally

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.

Increase scrollbar height automatically

I make the scrollbar on a page always visible with:
html {
overflow-y: scroll;
}
On the other hand, I also want the scrollbar height increase automatically when opening a modal dialog that is longer than the page. However, the scrollbar height does not increase automatically. If I set overflow-y: auto; this makes the scrollbar hidden for the initial state that I do not like. Any idea to fix it?
Bootstrap's modal does an excellent job of this by hiding body overflow and using a fixed overlay.
body.modal-open{overflow:hidden}
/* this is the overlay */
.modal{position:fixed;top:0;bottom:0;left:0;right:0;}
.modal .modal-dialog{/* taller than window */}

Need to scroll Bootstrap modal with large height with the background

I have a bootstrap modal which has height more than the browser screen height. The requirement is that there should not be any vertical scroll bar for the modal exclusively. There can be one for the page. Another one is that the modal should move along with the background.
Now to achieve this and going through lot of similar questions I made the below changes to the modal class:
.modal{
position: from 'fixed' to 'absolute';
overflow-y: from 'auto' to 'hidden'
}
Although this solves my problems as no scroll bar is coming and the modal moves along with the background, the problem is that in smaller screens or screens having lesser resolution the content is getting lost/hidden. Adjusting the width is not a solution as I can never be sure what the resolution will be.
Thanks in advance.
May be your solution is below. just put these css to your stylesheet.
.modal-open{
overflow-y: scroll;
}
.modal-open .modal{
overflow-y: initial;
}
.modal{
position: absolute;
bottom:initial
}
View this live demo on jsfiddle

overlong image header, but how to only show horizontal scrollbar on body content?

I have a 4000px width image slap on the header of my site. for now, the way I hide the horizontal browser scrollbar is with this:
html
{
overflow-x: hidden;
}
Unfortunately that will make the horizontal scrollbar never appear. I would the browser scrollbar to appear when the main content of my site is hidden from view.
What is the technique/style for this?
Thanks
Put the image into a div with width: 100%, a defined height and overflow: hidden.
By the way, overflow-x is not supported by Internet Explorer 6, so it's not perfectly safe to use yet.