I'm creating an HTML/CSS application, and I'm a bit stuck.
Let's say that I have 2 elements positioned next to eachother display: inline-block
Every element has again a couple of elements which are placed next to eachother.
See the following illustration that tries to explain it:
So, the image below describes 3 different levels of elements:
Level 1: Red - Outer element
Level 2: Yellow - Wrapper element
Level 3: Green - Content
In HTML, this could be constructed writting like the following:
<ul id="holder">
<li>
<div>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
</div>
</li>
<li>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
</li>
</ul>
The UL represents the red element, the LI represents the yellow elements and the DIV elements represents the green elements.
Now, let's say that our red element has a fixed width and I place the overflow on hidden. This means that when I resize the page, the elements on the right dissapear when they don't fit the page.
But here the problem arizes, when I do resize the window, and the window becomes too small to render everything, immediately, the latest LI element is not visible on the screen anymore.
Is there any CSS way to make sure that no the LI element are hidden but the DIV elements inside the LI? When both DIV elements are hidden, off course the LI element can be hidden aswell since it's empty?
If there's no CSS way to do this, anyone minds putting me in the right direction by using JavaScript or something else?
Here's a jsFiddle to explain it a bit more.
Kind regards
The li disappears from view because it's in display: inline-block.
As soon as the window isn't wide enough, it moves below the first li.
You can see this happen if you release the #holder's height (height:auto).
The solution is to add white-space : nowrap to force the li to stay in one line.
Updated fiddle :
https://jsfiddle.net/zLqfe4z8/4/
It's not a problem of your elements hiding because there's not enough width, it's because they're wrapping because there's not enough width (and then being hidden by the overflow: hidden).
You can see this happening if you remove the height constraint on your wrapper:
#holder { overflow: hidden; border: 1px solid red; }
The fix is simple, stop it from wrapping using white-space: nowrap:
#holder { white-space:nowrap; overflow: hidden; border: 1px solid red; height: 52px; }
Related
How can I let an arbitrary div nested within a ul spill outside of the ul, which is set to width: 160px; and overflow-y: hidden;? I have set it to overflow-y: hidden because the list needs to be scrollable.
Here is my list:
<ul>
<li> color name</li>
<div class="tooltip">color name</div>
<li> color name</li>
<div class="tooltip">color name</div>
<li> color name</li>
<div class="tooltip">color name</div>
.....
</ul>
For the names whose text is wider than 160 pixels I want a hover event to reveal the tooltip element's text and I want this text to spill outside of its container, ul.
I have read the following resources but none of them have helped me:
Allow specific tag to override overflow:hidden
Hovered element to overflow out from an overflow:hidden element css
https://css-tricks.com/popping-hidden-overflow/
CSS spread <li> horizontally across <ul>
Why does inner DIV spills out of outer DIV?
http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent
What causes a parent container to cut off content in child element?
https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346
If I understand your situation correctly, the problem can be solved by applying the z-index property to an ::after pseudo-element that receives content on :hover.
This creates a "tooltip" that's triggered by a hover state and will "spill out" of any parent div regardless of the parent's overflow property. As a bonus, it won't invalidate your markup with rogue tags in your lists.
HTML
<ul class="list">
<li class="list-item">color</li>
</ul>
CSS
.list {
border: 1px solid black; //to see element boundary
overflow: hidden;
width: 160px;
}
.list-item::after {
content: '';
}
.list-item:hover::after {
background-color: gray; //aesthetic only
content: 'long tooltip text about the color';
margin-left: 5px; //aesthetic only
position: absolute;
z-index: 999;
}
Example on Codepen
First off, you should fix your HTML. Only LI element can be direct children of UL elements. The invalid HTML is not likely to give you any issues in this particular case, but you should always strive to write valid HTML as you never know what weird issues might come up.
Next, if you have overflow: hidden on your parent UL, then there is nothing you can really do without getting javascript involved. Most "tooltip" types of libraries will handle this for you:
On hover, make a copy of the DIV which is outside of the UL (preferable at the document root - a direct child of the BODY)
Position the copied DIV so that it appears on top of (or next to) the original DIV - this requires JavaScript and I will leave as an exercise for the OP
Delete the copy when the user is no longer hovering.
Again, most "tooltip" libraries already do this for you. You might have to write custom CSS to make a tooltip appear on top of and existing element as opposed to next to it.
I have the following CSS code written;
#container {
width: 1300px;
background-color:green;
margin:0 auto;
overflow:hidden;
}
#menu {
float:left;
width:20%;
background-color: yellow;
}
After searching google for a long time I couldn't find an explaination why the container background color is disappearing when the container overflow attribute is visible.
Can someone help me understand why ?
Update:
Thanks alot for your answers.... :)
I don't mind using overflow:hidden, ijust want to understand its purpose and how to use it.
As i unserstand, the overflow property specifies what happens if content overflows an element's box, so i dont understand why would its visibilty make the container background color disappear or why would it change the container height.
Since the elements within the container are have float:left - the container had a height of 0 - which is also what is causing you not to see any background.
In order to fix this there are a few solutions out there:
One of them is called clearfix
<div id="container" class="clearfix">
<!-- floated elements here -->
</div>
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Another is by setting overflow:hidden on the container element - this establishes a new block formatting context - which in effect clears the floats. (See this post)
From the spec:
Floats, absolutely positioned elements, block containers (such as
inline-blocks, table-cells, and table-captions) that are not block
boxes, and block boxes with 'overflow' other than 'visible' (except
when that value has been propagated to the viewport) establish new
block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other,
vertically, beginning at the top of a containing block. The vertical
distance between two sibling boxes is determined by the 'margin'
properties. Vertical margins between adjacent block-level boxes in a
block formatting context collapse.
In a block formatting context, each box's left outer edge touches the
left edge of the containing block (for right-to-left formatting, right
edges touch). This is true even in the presence of floats (although a
box's line boxes may shrink due to the floats), unless the box
establishes a new block formatting context (in which case the box
itself may become narrower due to the floats).
This is because of the floating child element. If your container only contains floated elements, its height will be equal to zero.
You need to include a clear element, different possibilities exists:
The Empty Div Method: By adding a <div style="clear: both;"></div> as latest child element.
The Overflow Method: By setting an overflow: hidden on the container element
The Easy Clearing Method: By adding extra CSS and a class on the parent element (clearfix')
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
It is happening because you have not given any height to #menu.
As, #container has height of #menu, background is not visible.
Give some height to it.
#menu {
float:left;
width:20%;
background-color: yellow;
height:50px;
}
DEMO here.
You can set the height of the container div to be equal with the height of the menu. This way you don't need the overflow: hidden setting.
$("#container").height($("#menu").height());
Demo here: http://jsfiddle.net/er144/ZV6pb/
I am making a horizontal content slider, and need to put an arbitrary number of equally-sized elements in a row inside the slider div, so i can shift the slider div back and forth and display one element at a time on the page. These elements could be anything: divs, imgs, whatever.
Currently I am floating all the elements, and in order to prevent them from dropping onto the next row, using javascript to sum up the widths of all the elements on page load and manually fix the width of the slider in order to fit all of them.
Naturally I do not want to do this. I have looked at the CSS Flexible Box Model and it seems it would do what i need, but it does not appear very often outside of the W3C specification and i'm not sure how well supported it is. Does anyone have any experience using it? Apart from that, is there any other non-javascript way of lining up a bunch of divs side by side and having the parent expand laterally to fit?
Flexbox isn't really standardised or widely-supported enough to use yet. It's supported in newer browsers including IE10, but it's likely to be a long time before that's your baseline.
There are some ways to work around it. For example you can use white-space: nowrap to make inline children not fall down to the next line, in combination with float: left to make the parent shrink-wrap its width around the children. Then if you want the children to be stackable blocks you could use tables or inline blocks:
#slider { white-space: nowrap; float: left; border: dotted blue 1px;}
#slider .box { display: inline-block; width: 100px; border: dotted red 1px; }
<div id="slider">
<span class="box">foo</span
><span class="box">bar</span
><span class="box">bof</span
><span class="box">zot</span
>...
</div>
(Using <span> is needed for inline-block in IE7, and the odd > placement is to prevent unwanted whitespace between the boxes.)
As you may have seen, every browser may render things differently, but if you apply the style display:inline; to the elements in the slider, and width:auto; to the container element, they should not wrap.
I have a simple blog page - a list of posts that each consist of a title and contents. When the page loads I want all posts' contents hidden until their titles are clicked. The following code accomplishes this but with an unwanted side effect - the on-page-load hide() function that hides each post's content also hides the background of the containing (id="content") div:
Relevant JavaScripts:
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Summary of blog page:
<section class="grid_7">
<div id="content">
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
</section>
Relevant CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('../images/content_background.jpg');
}
When the page loads the list of titles displays without the #content parent div's background. However when I click on a post's title the #content div's background shows up behind all posts up to and including that one.
Any idea what's going on?
It sound like you have some CSS that applies to the blog_head elements, that makes them float, for example:
.blog_post { float: left; }
In that case, the reason that the background doesn't show up is that the height of the content div is zero. A floating element doesn't affect the size of its parent, and when the content div only contains the headers, the height becomes zero. The background is still there, but there is no area where it's visible.
Add an overflow to the content div, that will make it contain its children:
#content { overflow: hidden; }
Note that this will not hide anything as long as you don't specify a size for the content element, it will just change how it's rendered so that it will become a container for its children.
A bit of a stab in the dark: Your #content div will, of course, be a lot shorter as the blog posts aren't there, basically consisting just of the divs with the titles. Perhaps that's the problem.
Does the image have a blank (or subtle) bit at the top or something, so that it's only apparent that it's there when there's more content in the #content div (e.g., when it's taller)? Or is there some other reason you can see that when #content is really short, you wouldn't see the background on the part of it that's there? (You can use the debugging tools in most modern browsers to see what the dimensions of the #content div are when the paragraphs are hidden; or slap a border on it temporarily, but tools these days are pretty good.)
Basically, since the jQuery doesn't, of course, actually hide the background, it must be a side-effect of the paragraphs being hidden — because of the effect that has on the dimensions of the #content div.
This is working fine for me:
HTML:
<div class="blog_post">
<div class="blog_head">
<h2>Title</h2>
</div>
<p>Contents</p>
</div>
</div>
CSS:
section {
border: 1px solid white;
}
#content {
margin: 20px;
background-image:url('http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg');
}
JS
$(document).ready(function() {
$(".blog_post p").hide();
//BLOG CONTENT ANIMATION
$('.blog_post').click(function() {
$(this).find('p').slideToggle(130);
});
});
Check it live here: Jsfiddle example
I have a container div element that has overflow:hidden on it. Unfortunately this property is required on it because of the way the site is made.
Inside this div it's all the site content, including some tooltips. These tooltips are displayed with jQuery when you mouse over a link or something.
The problem is that some of these tooltips will display partially hidden because of the overflow thing above, because they are positioned outside the container div...
Is there any way to be able to show a specific element from inside this container, even if it's out of its boundaries? Maybe a javascript solution?
the html looks like this:
<div style="overflow:hidden; position:relative;">
the main content
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
try this:
<div style="position:relative;">
<div style="overflow:hidden; position: relative; width: {any}; height: {any};">the main content<div>
<div style="position:absolute;left:-100px;top:-50px;"> the tooltip thing </div>
</div>
just place your main content to another div inside the main div and give provided css to hide the content if overflowing...
CSS works like a box, and sometimes, you have elements "flowing out". Setting overflow: hidden on the main element hides contents that flow out of this box.
Consider the following:
HTML
<div class="box">This box has a height and a width. This means that if there is too much content to be displayed within the assigned height, there will be an overflow situation. If overflow is set to hidden then any overflow will not be visible.</div>
<p>This content is outside of the box.</p>
CSS
.box {
border: 1px solid #333333;
width: 200px;
height: 100px;
overflow: hidden;
}`
This outputs the following:
Note that the rest of the texts that overflow are hidden.
if overflow:hidden is to contain floats, then there are other ways that would allow tooltips to not be cut off. look foe clearfix:after