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.
Related
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
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%;
}
I have a container div, conteining 3 divs, a sidebar, a content and a header while all the elements inside are rendered as they should (they are positioned as "relative" if this may influence in my problem), the sidebar and the content render min-height: 100% as I need, the div containing them won't adapt to those 3 elements, acting like overflow: visible, while I don't want the content to overflow, I want the whole page to scroll and the div to adapt to the content size...
I tried to put my code here : http://jsfiddle.net/vhZV6/
I also cut out some of the graphical tweeks wich should not influence at all... here is a screen of my problem too:
I don't need old broweser integration on this matter (as IE 5/6).
Try adding overflow:auto; to your .container div.
I would try this. 'height: auto' is no longer set once any of the height elements are messed with.
min-height:100% !important;
height:auto !important;
It's a very simple problem: your inner divs are floating. The solution is very simple, just add to your css the following (this is the best solution whenever you have floating divs):
.container:before {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
I have a main wrapper <div> (id #main) that I want to grow as text copy is added to the content <div>, but for some reason the main div will not grow to accommodate the other <div> elements that are in it let alone any content added to the content div.
jsFiddle
Can someone help me out?
You could try a few things here: Float the parent div to the left. If this doesn't do anything then use the overflow: hidden; property in the parent div. Add clear: both; in a child element within it's container.
If that doesn't work, try #main{height:auto}. You may need to add this same attribute to the Content DIV.
I have the following code:
http://jsfiddle.net/3fT2M/
Why isn't the two floated div background color isn't #666666 even though they are under the container div?
It works only if I set the container height which I would like to set to auto.
How can I make it work with .container { height: auto; } ?
Thanks,
http://jsfiddle.net/3fT2M/3/
Because the elemtns are floated inside the div.
This takes the element out of the normal flow of the document.
I've added the overflow: hidden; fix
Right now your div.container has no height. So you cannot see the background-color.
A simple fix is to add a <br /> before the last closing </div>.
See the fiddle: http://jsfiddle.net/3fT2M/2/
It also seems a simple .container div{background: inherit;} works.