What I want to achieve:
Make it possible to select which columns you should see in a table, and if you select "too many for the width to show", you should get a scrollbar to scroll horisontally.
So on a mobile device I have a table and a container that wraps around the it. The container is set to overflow-y: scroll.
The container is as wide as the mobile allows it, but when I add multiple columns so it overflows the with and cause a scroll, the content gets wider, as expected, but not that it pushes the whole content on my side. Should it not cut off the overflow in width? If not, how can I achieve that? (only getting scroll and keep the main width of the container)
Picture of what is happening (the start state was that the container was as wide as it could be on the screen):
If I understand your question correctly
You can can add these styles to make your table scrollable horizontally :
.classname {
width:'as much as you need';
overflow-y: hidden;
overflow-x: auto;
}
Related
I have a table with two columns. I want the first column to be scrollable, so that my table can stay at a fixed height and not expand continuously. I only want it to be scrollable vertically though: Horizontally the overflowing parts should still be visible (In my case, the overflowing parts are on-hover tooltips which are getting hidden and add a horizontal scrollbar...), without having to scroll horizontally. My CSS/HTML looks like this:
<table class"tab1">
<td class="td1"><div class="container"><!-- Many, many, many floating elements here --></div></td>
<td></td>
</table>
CSS:
.tab1 {
table-layout: fixed;
width: 100% /*100% of the parent node*/
height: 20em;
}
.td1.container {
overflow-y: scroll;
}
2 Problems:
The height of 20em gets ignored. Even though the first column now gets a scrollbar, it still expands to its own needs.
When hovering over one of my elements, which generates a div with position:absolute, a horizontal scrollbar appears and the part of the tooltip that overflows gets hidden.
How can I fix this?
PS: The code is simplified of course, but I hope that it still illustrates my problem well.
PPS: Here is a JSFiddle: jsfiddle.net/pg0cLpjd
This question is even more difficult than I thought...
But here is a partial solution:
table-layout: fixed; only applies to the table itself and its columns; not the height. A table will always grow with its content. But there are a couple workarounds:
Set your table to display: block;, give it a specified height and set its overflow-y: scroll; (This also might solve your second problem, depending on your needs)
Place a div with a specified height around your table and set overflow-y: scroll;. The table still grows inside the div but you have a scrollbar.
Place a div in your columns with a specified height and set overflow-y: scroll;. This differs from the first attempt only in the position of the scrollbars and you can scroll every cell independently. But this has one huge disadvantage, which I am going to explain now:
As this answer says: If you set one overflow direction to something else than visible, the other overflow direction will automatically set to auto. (it's a feature, not a bug). And this is exactly where the second problem lies. Your code has the right logic, but it's just not possible. There are solutions using a wrapper div, (it didn't work for me) but you could give it a try.
I'd recommend having a look on how to make tooltips with JavaScript. There are plenty tutorials out there on the internet.
I'm creating a fluid layout with 2 divs (named status and status_edit) in a container.
The second div is overlapping when resizing the window, also ellipsis are not working on the status_list spans. Do you have any solution? i have tried a lot.
You can see it in this Fiddle
Thanks
The li inside .status-edit are floating outside the box. You could add overflow: auto to .status-edit. However, when the screensize gets smaller, 'icon1' and 'icon2' disappear. To fix that, you could set a min-width to .status-edit.
You could also set a min-widht to .container. The div than will be resized in ratio, depending on the window size but will keep a defined minimum width. When the window size gets smaller than that value, the horizontal scrollbar will appear.
I have created a layout in CSS/HTML with the following structure:
Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.
Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.
I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.
I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.
How can I make this website generally full-screen but scroll when below a minimum size threshold?
Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?
So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/
It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.
Try this: overflow-x: auto;
It will try to put a horizontal scroll bar once the content exceeded the size of its container.
My code is as below:
<div id="frame1" style="overflow-y: auto;overflow-x: auto;width:87.5%;height:100%;" >
content
</div>
Here declared div working as a scrollable div but it doesn't resize as per window resize.
I have a situation where I need, on the same line, When the window is resized and the div's
eventually touch, I need them NOT to wrap, but instead, enable the horizontal and vertical scrolling.
Please Help...
<div id="frame1" style="display:block; width: 87.5%">
content
</div>
Height will increase based on content
Not quite sure what you are trying to do here. I'm guessing you have 2 div's next to each other and you want one of them to start scrolling when the space is too small for them both. If you know the width of the other div you could just do something like right: *div width* which would make the 'frame 1' div fill the rest of the space when the width was set to 100%. Then if the content of this div were too large for that div, scroll bars should appear. You would obviously need to set the position value to something other than static to get the top, right, bottom or left css values to have an affect.
I recently used something similar to this on a site with 3 fixed div's; a header, a footer and the main content. For the content, I have top set to the height of the header and bottom set to the height of the footer with a height value set at 100%. This makes the content fill the space between the header and footer. I then set the overflow-y value of the content to scroll so the vertical scroll bar is always visible but it is only on the content as the header and footer don't scroll anyway which gives a really nice effect, especially with webkit scroll bars.
Again, I'm not really sure if that was what you were asking. Temporary link to site here (resolution-gaming.comuf.com).
The spec says that a horizontal scrollbar is supposed to be always shown if overflow-x: scroll is set.
On my website I often post code in a <pre>-Block. As this has no predefined width, but the surrounding div does have a maximum (defined as percentage), it seems that I can not figure out how to achieve the following:
In case a code block is not too wide, hide the horizontal scrollbar.
If it exceeds the width, show a scrollbar.
Any hints? I think I have tried most of the combinations of overflow-x and -y, but none seem to do what I want.
Use:
overflow-x: auto;
auto tells the browser to only show a scrollbar if the content exceeds the width of the box.