I have the following markup (see my Plunker):
<div class="workflow-step-container">
<div class="step-container">
<div class="step-bubble completed">1</div>
<span class="divider"></span>
</div>
<div class="step-container">
<div class="step-bubble completed">2</div>
<span class="divider"></span>
</div>
...
</div>
The number of steps (bubbles) can vary. What I would like to happen is if the number of bubbles exceeds the container width, I would like the bubble container to become horizontally scrollable. Currently, the content just wraps.
I've added overflow-x: auto;, but that doesn't seem to work.
Thanks in advance
Update
After adding white-space:nowrap; to my .workflow-step-container styles, the bubbles now do not wrap as desired. In my actual project, though, the content continues to wrap and doesn't ever become scrollable. Here is a screenshot. I tried wrapping the .workflow-step-container div in another div to which I set overflow-x: hidden;, but that did nothing. Here is a Plunker.
You could simply change the white-space property of the parent element to nowrap in order to prevent the inline-level elements from wrapping. In doing so, a horizontal scrollbar will be added when content overflows.
Updated Example
.workflow-step-container {
overflow-x: auto;
white-space: nowrap;
}
Based on your update, you need to add table-layout: fixed/width: 100% to the nested ancestor table element.
The problem was that the table element's width was being determined by the maximum width of the .workflow-step-container element. Adding a width of 100% forces the parent element to take the width of its parent element, and table-layout: fixed changes the layout algorithm to allow for this.
Updated Example
.col-xs-8 table {
table-layout: fixed;
width: 100%;
}
Related
I'm having a problem with some text overflowing outside the parent's div. I tried with
element.style {
text-overflow: ellipsis;
overflow: hidden;
}
but to no avail.
Here is a JSFiddle with my code. Looks like the DD element goes outside the div. How can I force it inside without specifying a fixed width?
Your <dd> element has no width to overflow from.
See this updated demo.
UPDATE
Looks like display:table-cell was causing the issue in this case. Removing this style and setting display:flex; to the parent wrapper fixes the problem.
See this demo.
Flexbox is good for dynamic content and responsive design, whereas display:table-cell; seems to get stuck at a static width.
I wanted to align text vertically inside of div:
display:table-cell;
vertical-align: middle;
Text is getting aligned, but div (which has 100% width) becomes smaller in width. What is the problem? Is there any other good way to align vertically?
EDIT: little more HTML code:
<div style="position:absolute;top:40%;left:0%;">
<div id="posts" style="position:relative;">
<div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em"></div>
<div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em"></div>
</div>
</div>
An element displayed as table-cell without any parent explicitly displayed as table will create its own shadowy parent displayed as such (and another in-between set as table-row). It's nowhere to be seen in the DOM but it still have an effect.
The default table layout algorithm is table-layout: auto and you want table-layout: fixed: former layout algorithm will adapt dimensions of cells to your content; latter will respect what the author (you) says for widths. You can test by having very little content in 1 "cell" and then a very long multi-line content.
#posts {
position: relative;
display: table;
table-layout: fixed;
width: 100%;
}
You also should remove or adapt widths on cells: total should be 100% or else it'll be proportional on most browsers (Safari being at risk. Maybe not Saf 8 but 6 at least...)
I have updated your code to get it to work:
<div style="position:absolute;top:40%;left:0%;width:100%;">
<div id="posts "style="position:relative;width:100%;">
<div style="display:table; width:100%;">
<div style="display:table-cell;vertical-align: middle;width:100%;height:100px;position:relative;text-indent: 1.5em;text-align:center;">test
</div>
</div>
</div>
What you needed was to add a div with display: table in and set all the containing elements to 100% width. Also the div you are centring needed a text-align: center.
The problem is that the parent div should respect the text height of both columns (#col1 and #col2, each using float:left). However, parent's height property (#content) acts like no text is written inside.
Code: http://jsfiddle.net/Arkl1te/UWNaT/
I could insert a fixed height, but it shouldn't work like that: height should have a "flexible" value, even with text.
As the children are floating you have 2 options:
Add overflow: hidden; to the parent to respect the height of the children:
#content{
overflow: hidden;
}
Add an empty element with clear:both as the latest element:
<div id="content">
<p id="col1">...</p>
<p id="col2">...</p>
<div style="clear:both;"></div>
</div>
I have a container div that holds many child divs. One of the divs in my container houses comments. Instead of setting the whole div to scroll, I want everything to stay in place, leaving only the comments div to scroll. I have tried setting the parent overflow to hidden, and the comment div to scroll, and the scrollbar actually shows on the page but it is disabled. Does anyone know how I can accomplish this?
CSS
#container
{
position: absolute;
overflow: hidden;
}
#comments
{
position: relative;
overflow: scroll;
}
HTML
<div id="container">
<div id="comments">
this is what I want to scroll
</div>
</div>
I cannot get rid of the container because it houses many more child elements. I just want everything else to stay static while only the comments can scroll.
You need to set a specific height on the "comments" div to make sure it knows exactly when to scroll. If there's not enough content to fill up that container beyond the specified height, the scrollbar might appear with overflow:scroll but it will be disabled. If you want the scrollbar to appear only when it's actually needed, you'll want to use overflow:auto as the CSS rule. By setting the height of the child container and not the parent, the parent can grow as necessary.
In your example, the position:absolute on the parent container is not required to obtain the solution; however, you might be including that for some other reason.
It is disabled because there's no defined height on the element. Overflow auto will populate the scrollbar if you define a height and the content extends past that height.
#comments{
height:200px;
width:200px;
position: relative;
overflow: auto;
}
You need to add a width and height:
Check out this JSFiddle: http://jsfiddle.net/FgGmQ/
HTML:
<div id="container">
<span>This is the container</span>
<div id="comments">
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
</div>
<span>The end of the container</span>
CSS:
#container{
overflow: hidden;
}
#container span{
background-color: yellow;
}
#comments{
overflow: auto;
height: 80px;
width:150px;
}
Again, just check out this JSFiddle
Suppose I have this HTML structure:
<div class="a">
<div class="floated-left">...</div>
<div class="floated-left">...</div>
</div>
I have noticed that if I don't set overflow:hidden to .a, then the <div class="a"> does not occupy any vertical size. For example, if I set its background to red, it is not visible at all. Inspecting it with FireBug shows that it's there but of almost no vertical size.
To fix this, I found that I have to set overflow:hidden to .a. Then the first <div> goes over all its content.
Here is a real example:
<html>
<head>
<style>
.a { background-color: red; }
.b { background-color: red; overflow: hidden }
.floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
</style>
</head>
<body>
<p>div with class a, that doesn't overflow:hidden:</p>
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
</div>
<div style="clear:both"></div>
<p>div with class b, that does overflow:hidden:</p>
<div class="b">
<div class="floated-left">Hi,</div>
<div class="floated-left">Dad!</div>
</div>
</body>
</html>
Notice how Hi, Mom! does not get red background (no overflow:hidden), while Hi, Dad! does get red background (has overflow:hidden).
Can anyone explain this behaviour?
Here is screenshot of the example:
Thanks, Boda Cydo.
When you float elements they are taken out of the document flow. Among other things, this means that they have no impact on the dimensions of the parent element (although its width will determine where the floats are positioned on the horizontal axis). They do however impact positioning of siblings within the container depending on whether those sibling are inline or block level elements and whether they have width or not.
In order to make the height of the floats impact the height of the container you must have an element after them that clears them. However, what you are seeing here is actually a part of the CSS standard that you can use to clear floats without additional, non-semantic markup. The only issue is this behavior can vary slightly in older browsers and their css implementations. This effect is present with both overflow auto and overflow hidden but does not present with overflow visible. In IE < 6 you must have a width set on the containing element for it to work.
Hi, Mom does not get any background because the background comes from the a div, which is height 0 (or near 0). The inner divs are actually overflowing its bounds (which is what floats do by default).
The thing to remember with floats is that they don't have inherent height (when it comes to layout and determining the parent's height). Inline content simply flows around them. So without overflow: hidden the parent div has no height. No height means no background. The floats are still rendered but they go beyond the bounds of the parent div ie the content in the floats is outside the parent div.
Floated elements don't occupy any vertical space for clearing, there are a few ways to fix this, something like:
<div class="a">
<div class="floated-left">Hi,</div>
<div class="floated-left">Mom!</div>
<br style="clear: left;" />
</div>
Would clear after, and make the outer div have a vertical height. Set a border: solid 1px red; on .a to see this in action.
Alternative CSS only solution:
.a:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Per the spec for CSS basic box model:
Margins of a floated box do not
collapse with any other margins.
Margins of a box with ‘overflow’ other
than ‘visible’ do not collapse with
its children's margins.
By providing it the "overflow" property explicitly you have allowed the children to fit into this model, thus the b div no longer has bounds attached to its children. If you apply visible or inherit (which the parent of b is visible by default), the bounds return and the children divs define the margins.
http://www.w3.org/TR/css3-box/ (RE: Example X)