This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
When I specify overflow-x: hidden on an element which overflows both horizontally and vertically, the element gets a vertical scroll bar in addition to hiding the horizontally overflowing content. I have tried adding overflow-y: visible and even just overflow: visible, to no effect.
Am I misunderstanding what these properties do? I would think that overflow-x should not affect the vertical overflow at all.
This has happened on every browser I've tried.
Here's a snippet which demonstrates the effect. I'm using <pre> tags because they're an easy way to create overflowing content, but it seems to happen with any tag.
pre {
height: 40px;
width: 150px;
margin-bottom: 50px; /* We need this so they don't overlap. */
}
#x-hidden {
overflow-x: hidden;
}
#y-visible {
overflow-x: hidden;
overflow-y: visible;
}
#visible {
overflow: visible;
overflow-x: hidden;
}
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="x-hidden">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="y-visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre id="visible">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
The W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
But this makes no mention of the case when overflow-x or overflow-y is set to hidden, which to me implies that this combination is indeed meant to be possible.
Check out this answer to a related question: https://stackoverflow.com/a/6433475/3583023
It explains why
el {
overflow-x: hidden;
overflow-y: visible;
}
renders as
el {
overflow-x: hidden;
overflow-y: auto;
}
which usually renders the same as
el {
overflow-x: hidden;
overflow-y: scroll;
}
because the auto value of overflow-y is scroll in most browsers.
So, in order to achieve this effect, we can't use the overflow-x/overflow-y properties. I've experimented with the clip property as a potential alternative, but no luck so far: http://jsfiddle.net/qvEq5/
Try setting your height. Either make it like 100%, or auto
check this
jsfiddle
height: auto;
Just an hour ago I had the similar problem except the problem occurred when I had specified overflow's value as auto. I didn't use overflow-x or overflow-y, I just needed it to fully contain my two lists that were floating on opposite ends.
What worked for me was that I changed overflow's value to hidden. Try that. I had set the max-width to 100% and instead of specifying height, I just used overflow: hidden.
Hope that helps.
Give this a try:
height: auto;
width: 100px;
overflow: hidden;
Should keep the element at 100px wide, and allow it to expand vertically based on its content (without scrollbars).
Firstly, this fiddle shows the problem which you describe.
As yet, I don't know how to get around this, but it seems like the spec hints to this here:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
Just use overflow: hidden on a wrapper div with size constraints. Excuse my formatting in a bit of a rush today.
<!DOCTYPE html>
<html>
<head>
<style>
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>
<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>
See it in action here: http://jsfiddle.net/4PZC9/
Try setting the display property? The overflow declaration works on block level elements!
Maybe you misunderstood something, I didn't unsdertood the question... or the problem is not in the overflow settings.
Overflow: auto will add the scrollbar only if needed (content bigger than container).
Òverflow: visible will add the scrollbar.
Òverflow: hidden will NOT add the scrollbar.
I understand that you want the x-content to be hidden, so overflow-x: hidden, but from your question it seems to me that don't want the vertical scrollbar to see the vertically overflowed content.
Maybe the problem is that is set a fixed height (or max-height) for the container and the content is bigger. Remove the height (or max height) and you'll avoid the vertical scrollbar.
...or as maybe I said, just didn't understood what is the desired effect.
Try this,
height: auto;
overflow:hidden;
Cheers.
Reading you question... I don't see any problem...
Whe I specify overflow-x:hidden; on an element, it adds a vertical scroll bar.
If it overflows in it's height (as you just said it does), then that's quite normal.
I have tried adding overflow-y:visible; and even just overflow:visible, to no effect.
Well... That's normal, as you're telling it to show a vertical scrollbar, wich there already is.
As kuloir said: X = horizontal; Y = vertical.
Related
I'm new in CSS. I don't understand if a display: absolute; element for instance a , is still consider child of its parent or not (for its out of the flow)?
For example:
**HTML**
<div class="container">
<div class="my_div">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In sit amet nibh et arcu gravida tincidunt. Nam dignissim elit
vitae erat porta, at efficitur lacus consequat. Sed molestie,
mi a efficitur elementum, lacus metus hendrerit libero, posuere
ultricies urna libero nec quam.
</div>
</div>
**CSS**
.container div {
width: 50%;
}
.my_div {
position: absolute;
}
without the position: absolute; my_div width is equal to the 50% width of the container . But after the setting position: absolute; I don't understand what actually happen to the my_div width, is still referring to the CSS .container div{} rule or not?
The "parent-child relationship" doesn't really change (so technically it'll still be a child thereof, which you can see reflected in the DOM), but the "(document) flow" does indeed change.
Once you use position: absolute; the element is removed from the normal document flow, which does affect the effect many properties have (as you've likely noticed).
Since you mentioned being new to CSS, i should make sure you're aware that 90%
of the time, when online tutorials (or books) suggest using properties such as position and float, they are likely to be leading you down an outdated and/or misguided path.
Nowadays we have things like flexbox (display: flex) and grid (display: grid) which make the vast majority of layout challenges (which used to be a pain to understand/create) totally simple.
It is still a child of the parent, but it is also outside the flow. Giving the parent position: relative; will allow certain properties on the child (like top, etc) to still act relative to the parent. Usually absolutely positioned elements require explicit height and width declarations, but it depends on what you are trying to do...
I have
<div id="aboutPyKov">
<h2 id="pyKovSubheading">About PyKov</h2>
<p id="pyKovIs">Lorem ipsum dolor sit amet,<br/>consectetur
adipiscing elit.<br/>Vestibulum congue mattis odio.<br/>Nulla f
acilisi. Quisque tempus<br/>varius enim, quis mattis metus,
<br/>auctor quis. Lorem ipsum dolor sit<br/>amet, consectetur
adipiscing elit.<br/>Pellentesque a euismod sem, a<br/>convallis
turpis. Donec aliquet<br/>quis leo at fermentum. Maecenas<br/>ut
lacinia magna. Maecenas gravida<br/>interdum turpis non
fermentum.</p>
</div>
For styling, I have
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
}
This works fine, however it shows a dotted border around the whole width of the whole page. I want it to be self-contained, but instead, it goes around the whole screen as you can see in this picture. How do I make it so it only goes around the text? Also, the top border is hugging the background color above it. I would also like to know how to change that.
This is CSS level 1: block and inline. Block elements take up 100% of available width unless you set them to float or set an explicit width. Either set the border to the paragraph element or set a width to your div.
Try adding padding = 0px" to your <p> tag and <h2> tag,
p, h2 {
padding: 0px;
}
because <p> and <h2> tags have default padding applied.
Just change the display attribute
#aboutPyKov {
border: 8px dotted rgba(255,198,107,0.93);
border-radius: 20px;
display:inline-block; // just change the display
}
I've read a few solutions with similar titles but none with a solution to this layout.
I have 3 content blocks which all stack beneath each other at most screen widths.
However, when content become overly wide, I want to display a slightly different format.
I want to display the media to the right and the title and text to the left with the text directly beneath the title. It currently sits below the media block (as per the snippet).
anyone know how I can fix it?
.content {
overflow:hidden;
}
.chart {
height: 200px;
width: 200px;
background-color: red;
}
.title, .text {
float:left;
}
.media {
float:right;
}
<div class="content">
<h3 class="title">This is a reasonably long title</h3>
<div class="media">
<div class="chart"></div>
</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non urna est. Quisque sed dolor ac ex aliquet aliquet. Integer ornare, velit vitae iaculis faucibus, nulla libero molestie sem, eget placerat augue massa vitae justo.</p>
</div>
There are 2 things you need to do:
1) You need to add a width for your text block, cause now it's 100% and it takes 100% of parent block width - so no floating will be.
2) You need to add to text block a clear property with left value - cause you don't need it to be floated by the headerfrom the left side.
It's all you need to solve the issue:
.text {
clear: left;
width: 50%; /* put your own width (no matter percents or pixels), but it must be less than (parent block width - media width)*/
}
Check here the example: https://codepen.io/fox_hover/pen/8f838b7799db7a3ed4f4d742097440ef
While both previous answers do work to some degree, both fail to fully address the initial question.
The first, requires a change in the order of elements and the second applying a fixed width which was restrictive.
The final solution is in 2 parts so that it works with multiple screen sizes and media queries.
Firstly I changed the order of the elements as per answer 1. This enabled me to achieve the layout required for my 8 column (wide layout). I applied this styling using an 8 column only media query.
For all other screen sizes, I use display flexbox, which allows me to restore the order I require.
I'm trying to achieve a fluid width table where text in the cells isn't allowed to flow onto another line and will use text-overflow:ellipsis when it is too long to fit.
I tried the following test:
HTML:
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat placerat risus. Maecenas lectus orci, commodo id varius ac, vulputate eget elit. Nunc laoreet feugiat aliquet.</td>
</tr>
</table>
CSS:
table { width: 100%; }
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; }
But as you can see in the fiddle below, the ellipsis doesn't work:
http://jsfiddle.net/p3pXc/
Is there a solution?
Unfortunately, there is now way to have the CSS ellipsis on a dynamic width element.
Adding
display: block;
width: 300px;
for example, will create your ellipsis. But this will not do, in your case.
You will have to fallback on a JavaScript solution, like jquery.ellipsis plugin.
See this question for more information: Insert ellipsis (...) into HTML tag if content too wide
Edit:
Actually, if you just want the column to extend to all the width of the table, without crossing out of the screen (and keeping it only on one line), you should add
table {
width: 100%;
table-layout: fixed;
}
See the updated fiddle: http://jsfiddle.net/7v72L/
(thanks to #CBroe for the suggestion)
Using JavaScript, this problem is solved here, achieving the effect illustrated below:
Given this simple structure:
<div id="parent">
<div id="child">Lorem ipsum</div>
</div>
with this CSS:
#parent {
width: 200px;
height: 200px;
padding: 20px;
overflow-x: scroll;
}
#child {
width: 500px;
}
Live demo: http://jsfiddle.net/523me/5/
Notice that the parent has a 20px padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you'll see that the child touches the right edge of the parent.
So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)
Is there a way to force the right padding to be applied in this scenario without having to remove any of the elements from the flow (by floating or positioning)?
Screenshot 1 - The right padding is ignored. This is how all current browsers behave.
Screenshot 2 - The right padding applies. This is what I'm trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)
You're suffering from this problem.
I would solve it by giving a margin to the child (and not a padding to the parent):
body {
padding: 2em;
}
#parent {
width: 200px;
height: 200px;
overflow-x: scroll;
background: gray;
}
#child {
width: 500px;
background: yellow;
margin: 20px;
display: inline-block;
}
<div id="parent">
<div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>
Dunno but adding:
#child{
display: inline-block;
}
Seems to fix it: http://jsfiddle.net/523me/6/
I've only tested in latest Chrome, may not be cross-browser
You might change the padding to a border.
padding: 20px;
to
border: 20px solid gray;
No, the padding is not ignored, but it's still inside the parent.
See updated jsFiddle, where you can see that the padding hasn't moved from its original position.
Edit: Hm, there are some anomalies. If you give the inner div a right margin, that gets ignored too. Hm. Upvoting your question.
Apply padding-right to overflowing element itself, and move background to its direct child element.
<div id="parent">
<div id="child"><div>Lorem ipsum...</div></div>
</div>
<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>
http://jsfiddle.net/523me/9/