I want to add div to my website which has variable width, and that it will display scroll bars when the width is smaller than the longest line.
I tried wrapping such a fixed width element, in a variable width (100%) but that didn't work. I got the scroll bars on the entire page.
Any thoughts?
Thanks
Yaron
You can apply the overflow CSS property to the problematic div:
#problematic-div {
overflow: hidden;
}
This defines what happens to content that overflows the content area of an element. For the value scroll, user agents are supposed to provide a scrolling mechanism whether or not it is actually needed; thus, for example, scrollbars would appear even if all content can fit within the element box.
You can try some examples here.
Hope it helps.
Related
I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:
Create a container with fixed dimensions.
Place a scrollable container inside and attach the animation.
Place the labels.
The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.
Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg
The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.
You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.
Codepen
I am trying to get a div to expand to fill its container without causing that container to expand beyond the browser window's width, as in this page. Click "Expand" next to "Stack Trace in the last entry.
What it's supposed to do is show a horizontal scrollbar.
What it's actually doing is expanding beyond the width of the window.
I can get it to sort of work if I give the <div class="stack"> element a max-width in pixels, but I want it to expand to fill no matter how wide the window is, without expanding beyond it.
How can I fix this layout? What's a general way with css to get an element to expand horizontally to fill its container while not going beyond the window's edge?
The Page is back on now!
I cann't get your table stuff sorted. There are some invalid width Parameters.
You should use div-Containers rather then tables to layout your page!
The workaround solution I came up with was adding a max-width to the expand/collapse div. It doesn't really prevent the table being wider than the window, but it solves 95% of the cases.
Don't use tables, use DIV's and for full width use
width: 100%;
This will always use up 100% of the browser window width.
You can provide you outer Div width:100% so it will take browser width. Or else you can calculate browser width with Jquery $(document).width(); and store this in variable and provide to your outer div.
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.
Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.
This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.
One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(
Anyone have any suggestions or a workaround? ty!
When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.
To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
Surly if you used something along the lines of
body{
background: url("yourdir/yourimage.jpg") repeat repeat;
}
Instead of having a background div? It'd be helpful if you also added the code for the background div
This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. Check #242684
I have a page with two divs on it which should fill the entire screen.
Both of them have width = 100%
The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.
The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.
Like this:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
How do I do it with CSS?
Update:
I'm looking for a solution that would not require me to set the fixed height for the upper div.
Is that possible?
this should fix your problem
#header{ overflow: hidden }
#content{ overflow-y: auto }
edit: you have to define the height of the divs aswell
In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.
.content {
height:90%;
overflow:auto;
}
Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.
The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.
With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.
Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.
You should define fixed width for second div and use overflow css property to define scrollbars.