The container is an popup, so it must be block and absolute. It has a max-height and it can contain a table as my example:
http://jsfiddle.net/3rsaLcwe
.container
{
display: block;
position: absolute;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
If table's height > it's height, only vertical scroll-bar is appeared but we must hide horizontal scroll-bar. However, the vertical-scroll-bar cover on table. Please help me to fix this problem. Note that the table's width is dynamic, horizontal scroll-bar must be hidden and vertical scroll-bar not cover on table. Thanks.
If i understood correctly what you mean, the scrollbar covers the table.
just add a padding to the container:
padding-right:10px;
Related
I have 3 group of checkboxes, first two are given fixed width and the last one should take the remaining space. In the last group if the names are long, horizontal scroll appear for this group.
However, the last group is overflowing the parent div here. how can I fix this?
You just need to add overflow: auto to the parent container .select__content, this way when content is too big to fit in its block formatting context and overflows, the scrollbar appears and the container .select__content container becomes scrollable. Try this out.
.select__content {
margin-top: 2px;
display: flex;
overflow: auto;
}
Here is the updated CodeSandbox demo.
.select_checkbox takes width auto which grows because the span element is very long. It can be resolved by giving .select_checkbox a max-width so it does not go beyond the specified width and the scrollbar may appear. Try adding max-width like this.
.select__checkbox {
border: 2px solid lightgray;
display: flex;
flex-direction: column;
max-width: 260px;
}
I have a table inside a div whose style is table-wrapper:
.table-wrapper {
display: inline-block;
overflow-x: scroll;
width: 800px;
}
As you can see I want this div to show a horizontal scroll bar so the table inside it can be as wide as it should. Problem is, my table still adjust itself to occupy exactly the width of the wrapper, rendering the scrollbar useless. This is the table style:
.elements-table {
width: 100%;
}
How can I get my table to be as wide as it should?
When you use width:100%, the element will try to match the width of its parent container, which in this case is 800px.
You'll need to set a hard or min-width on your table to have your parent .table-wrapper scroll.
i have a div named panel, CSS of whose is
.msg_panel
{
width:100px;
height:45px;
max-height:200px;
padding: 3px;
overflow-y:scroll;
overflow-x:hidden;
}
now even if height of panel is not larger than the max-height, i am getting the scrollbar visible(you can see in the pic).
I want scrollbar visible only if max-height is attained.
i tried javascript, but can it be done only in css
Set the overflow-y property to auto
Working Example http://jsfiddle.net/TLwcX/1/
Set overflow-y to auto which removes the vertical scroll and it will appear only if the content exceeds your max-height of 200px...
.msg_panel
{
overflow-y:auto;
}
You have explicitly stated that you need vertical scroll always visible: overflow-y: scroll;
To let browser decide when to show the scroll use this: overflow-y: auto;
The Css goes like this:
#mylog{
background-color: white;
border-style: solid;
border-color: rgb(154,154,154);
overflow: auto;
width: 100%;
height: 100%;
}
as soon as I put the 'overflow: auto;' the width gets reduced. I have no clue why one tag would overcome the other. Please help.
When the box height of your #mylog element is overflowed, your overflow:auto declaration will in force the browser to generate a vertical scrollbar which will use some pixels of the available width.
If you don't want the available width to change when overflowing, you should use overflow:scroll and in that way, your scroll bar will be all ways there and your available width wont be changed.
I have a container div that holds many child divs. One of the divs in my container houses comments. Instead of setting the whole div to scroll, I want everything to stay in place, leaving only the comments div to scroll. I have tried setting the parent overflow to hidden, and the comment div to scroll, and the scrollbar actually shows on the page but it is disabled. Does anyone know how I can accomplish this?
CSS
#container
{
position: absolute;
overflow: hidden;
}
#comments
{
position: relative;
overflow: scroll;
}
HTML
<div id="container">
<div id="comments">
this is what I want to scroll
</div>
</div>
I cannot get rid of the container because it houses many more child elements. I just want everything else to stay static while only the comments can scroll.
You need to set a specific height on the "comments" div to make sure it knows exactly when to scroll. If there's not enough content to fill up that container beyond the specified height, the scrollbar might appear with overflow:scroll but it will be disabled. If you want the scrollbar to appear only when it's actually needed, you'll want to use overflow:auto as the CSS rule. By setting the height of the child container and not the parent, the parent can grow as necessary.
In your example, the position:absolute on the parent container is not required to obtain the solution; however, you might be including that for some other reason.
It is disabled because there's no defined height on the element. Overflow auto will populate the scrollbar if you define a height and the content extends past that height.
#comments{
height:200px;
width:200px;
position: relative;
overflow: auto;
}
You need to add a width and height:
Check out this JSFiddle: http://jsfiddle.net/FgGmQ/
HTML:
<div id="container">
<span>This is the container</span>
<div id="comments">
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
</div>
<span>The end of the container</span>
CSS:
#container{
overflow: hidden;
}
#container span{
background-color: yellow;
}
#comments{
overflow: auto;
height: 80px;
width:150px;
}
Again, just check out this JSFiddle