If I have a table like this very very simple example:
table {
table-layout:fixed;
width:300px;
}
.td1 {
width:100px;
}
.td2 {
width:200px;
}
and in one of my .td2 contains an image that is, lets say, 300px in width. I would like to show scroll bars to allow users to scroll to see it all. However I don't think this is possible, is it?
So my questions are:
Are there any other options apart from hidden for handling overflow in tables?
Is it possible to show scroll-bars only when content pushes beyond a set width? (I swear I've seen it in some forum software but I can't remember which one)
What about
overflow: auto
Content is clipped and scrolling is
added only when necessary.
Put the image inside a div in the table cell and make the width and height of the div to be 100% of the td and style it to overflow: auto
<style>
.test { width: 100%; height: 100%; overflow: auto; }
</style>
<td>
<div class="test">
your image
</div>
</td>
Related
We have a sticky side panel on our page implemented with the following very-simple CSS:
position: fixed;
top:62px;
bottom:10px;
Where the top and bottom properties create the desired margins.
The problem is that this panel contains several accordion-style elements, and expanding some of them causes the content to overflow past the bottom of the screen and become invisible/inaccessible. Adding an overflow:auto; rule to the above css style almost solves the problem, by inserting a scrollbar that allows the user to scroll vertically to see the would-be hidden content. However, this results in two scrollbars - one for the main nav and one for the sidebar - which feels clunky an unintuitive. Instead, I'd like to have the "fixed" element scroll with the main scrollbar when it overflows. I'm aware that this would essentially make it not a fixed element, and thus am afraid I'll have to resort to JS to make this happen - but does anyone have a cleaner, html/css-only way of handling this?
I'm not sure this is what you need, but hope it helps some way.
#container1 {
height: 400px;
width: 200px;
overflow: hidden;
position: fixed;
top: 62px;
bottom: 10px;
background: #888;
}
#container2 {
width: 100%;
height: 99%;
overflow: auto;
padding-right: 20px; /*Adjust this for cross-browser compatibility */
}
#container2 ul li {
height: 300px;
}
html, body {
height: 99%;
overflow:hidden;
}
<div id="container1">
<div id="container2">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<div>
JSFiddle
Also in chrome you can try out:
::-webkit-scrollbar {
display: none;
}
But this snippet works only in chrome, so I would rather use the above.
Let me try to help. Use Panel-body class selector to handle this.
First you should do many things, such as, width of the div and the second div.
You can manage to hide the scrollbar as follows:
.panel-body {
height:300px;
overflow:auto;
margin-right:0px; // when it shows scrollbar, you need to set it MINUS.
}
Second, you also take notice when browser window gets resized by user and you need to manage Media Queries in related to the div width.
This is the DEMO.
My goal is to get a sidebar layout which should scale based on the browser window width. Some parts should have a scaled width, others should have a static width and some should scale but with a min/max-width. (It also would be great if some would expand based on the content within)
The html:
<div id="table">
<div id="row">
<div id="sidebar">at least 90px width<br/>not more than 130px width</div>
<div id="content">scale</div>
<div id="logo">should be static 60px</div>
<div id="sidebar2">at least 90px width</div>
</div>
</div>
and the css:
#table {
display: inline-table;
width: 100%;
}
#row {
display: table-row;
}
#table #row div {
display: table-cell;
}
#sidebar {
width: 10%;
min-width: 90px;
max-width: 130px;
}
#content {
width: 70%;
}
#logo {
min-width: 60px;
background-color: #FAB6B8;
}
#sidebar2 {
min-width: 90px;
width: 20%;
}
The issues:
It appears that max-width has no effect on dom-elements with display:table-cell assigned. (I guess)
I tried to work with another div, spans around the actual cell div.
This causes the problem, that the cell scales perfectly, but the left side of the content div will not stick to the first sidebar. (Same problem, if I put the "max-width div" inside the cell)
Working with a float: left layout doesn’t work either. (Float breaks if window gets too small; don’t scale, if I use a div to protect it)
Is there a way to work around this without using js?
Put in a div in #row with no further CSS will work for a div, which expand based on content. Sadly if there is just text in it breaks after every word. How can I prevent this and be able to set a max width and hide the overflow?
I found the Answer by myself:
The key is to apply absolute width to the elements, which should get a max width.
It's not perfect, because the divs with an absolute width don’t scale, until the one with a relative width reach their min-widths but I guess it’s the only way.
So simple.
Sorry for the trouble...
Edit 2: It seems clear that no one seems to be able to understand what I'm asking, so I'll try to illustrate it;
The area in the center has the id #navigation. This has the following CSS properties,
width: 960px;
margin: auto;
background: #e4bd04;
The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I'd also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I'd like the background to flow for the entire window width (100% of page), so that users with larger screens don't end a huge chunk of white space at the top.
In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.
Is there any way to do this without using two elements as I've done?
I've undestood, you don't want to have 2 div to center another div with fixed width, isn't it ?
I don't think that you'll love it, but this is a solution :
.nav {
width:960px;
position:absolute;
left:50%;
margin-left:-480px; // width / 2
}
<body>
<div class="nav">Test content</div>
</body>
Result for 300px div : http://jsfiddle.net/7GTCc/1/
Or another, really ugly (lol) :
.nav {width:960px;}
<center>
<div class="nav">Test content</div>
</center>
Edit regarding your illustration
"Is there any way to do this without using two elements as I've done?"
No :-)
But if you only want the background to be 100%, don't specify a background (color or url) to your #navigation.
Last try to answer, test this :
#navigation {
min-width:960px;
text-align:center;
}
Demo here : http://jsfiddle.net/7GTCc/3/
you could use min-width property , dont know what exactly you are looking for
<div style="min-width:960px; width:100%"></div?
Yes, this is easy to do without additional markup. Use the ::before pseudo-element for the expanding part of the navigation.
Demo: http://jsfiddle.net/ThinkingStiff/eAf7w/
HTML:
<div id="nav">navigation</div>
CSS:
#nav {
background: #6D7B8D;
height: 40px;
margin: 0 auto;
width: 400px;
}
#nav::before {
background-color: lightblue;
content: '\00a0';
display: block;
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
I have spent hours looking for a solution and cannot find anything on this particular issue, so please forgive me if it has been answered.
I have a standard CSS page with a masthead, a navigation row, a left column for links, a right column for contents and a footer.
I have set everything to the center of the page at 1024px wide.
What I just cannot achieve is to have the 2 columns stay at the same height when one has longer content than the other.
Let me explain this - both columns have a 1px border that I would like to extend all the way down to the footer. The right column has much longer content so it reaches the footer very quickly but the left column doesn't so the border stops, where the links finish.
To fix this problem I have set the heights to 100% in the html, body, container and the two columns as follows:
html {
height: 100%;
}
body {
height: 100%;
}
#masthead {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#top_nav {
width: 1024px;
height:100px;
margin-left:auto; margin-right:auto;
}
#container {
width: 1024px;
height:100%;
margin-left:auto; margin-right:auto;
}
#left_col {
width: 198px;
float: Left;
height: 100%;
border: 1px solid #FF0000;
}
#page_content {
margin-left: 200px;
width: 824px;
height: 100%;
border: 1px solid #000000;
}
#footer {
bottom: 0px;
clear: both;
width: 1024px;
height: 50px;
margin-left:auto; margin-right:auto;
border: 1px solid #000060;
}
This works BUT now the content of the right column (which is much longer) goes way past the footer? and no matter what I try I cannot fix this without affecting the left column's border i.e. I can use min-height: 100%; which fixes the overflow and footer problem, BUT this has the side effect of capping the border on the left column back to the Navigation link's height i.e. so the border no longer flows to the bottom of the left column and down to the footer (grrrhhh!)
Here is a link to the page itself which you can copy and paste into DW or EW etc. to see what's going on:
http://www.iifuture.org/downloads/testzzz.html
If anyone knows how to fix this paradox I'd love to know about it!
Thanks
Shaun
Actually scratch that : remove the height:100% on the container, left col and page content. That's it.
Edit(revised answer after discussions)
This article helps.
style="background: blue url(someimage.png) repeat-y left;"
Add the above style to container. This is a hack, the DIV doesn't grow but the background image covers it up to get the layout you want!
Please refer this question and answer selected to learn more.
Original answer
Please take a look at overflow property. I was able to get your example page working with the below style added to page_content DIV.
position:absolute;overflow:auto;
With this code the scrollbars appear if the content exceed the height set. If you do not want to get the scrollbars and are okay with not showing the data beyond the DIV height, just use hidden instead of auto. Likewise, to display the scrollbars at all times, you may use scroll.
The last option visible will make it *(mis)*behave the way it is behaving right now i.e. letting the data grow beyond the DIV height. Notice that the DIV is not growing, only the content is.
on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.
How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?
body
{
background-color: #B0B0B0;
color: #ffffff;
margin-top: 0px;
margin: 0px;
}
#header
{
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
}
#content
{
width: 80%;
height: 800px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
padding: 30px;
}
<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>
The html is like that but obviously with more content
Hope I haven't made this too confusing, thanks.
Just add overflow:auto; to your div.
You can also use the following if you only want x or y scrolling
overflow-x:auto;
or
overflow-y:auto;
use the overflow:scroll; to enable scrolling in the DIVs
You must add white-space:nowrap; to your body tag.
I believe you may want overflow: auto;
Here's a comparison between auto and scroll.
add the style
overflow: scroll;
to #content
This answer is pretty late, however I stumbled across this question, as I was having issues on one of my pages, where I have this Page with 30 odd inputs of various types, that are split between two tables. I was unable to scroll to see about 10 or so inputs at the bottom of the page, and could not even scroll left to right when adjusting the browsers width.
What solved my issue was:
html, body {
overflow: visible;
}
This activated my X and Y scroll bar.
I had an issue with my footer not adjusting when scrolling, it instead would just stay fixed where it was situated before scrolling. this was due to my master CSS having the footer's position set as absolute. Simple fix, just creating a new style element in the page and added
footer {
position: fixed;
min-width: 100%;
}
I hope this helps anyone looking for a solution.
As stated by user3726345 , the best option to use is the
html,body {
overflow: visible;
}
using
overflow: auto;
dosnt give the best output. then you can further adjust your footer codes to your taste.