Can elements be forced to stay on a single line (with horizontal scrollbar) by using a single container div?
Why are the inner divs falling on multiple lines instead of being on the same line?
DEMO: http://jsfiddle.net/6PupD/61/
I want to achieve the same effect as this but without using an additional container.
One option would be to add white-space: nowrap to the parent container element. Given that the children elements are inline-block, the property white-space: nowrap on the parent element will force them to stay inline without breaking to a new line. Just remove float: left and it will work.
Updated Example Here
#container {
width: 300px;
overflow-x: scroll;
overflow-y:hidden;
max-height: 150px;
white-space: nowrap; /* Added */
}
.obj {
width: 100px;
height: 100px;
background-color: #888;
margin: 3px;
display: inline-block; /* Removed float: left */
}
You can also use flexbox for this -
http://jsfiddle.net/clintioo/6PupD/92
#container {
width: 315px;
overflow-x: scroll;
overflow-y: hidden;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.obj {
min-width: 100px;
width: 100px;
height: 100px;
background-color: #888;
margin: 3px;
}
Related
I have a container that is flex-grow sized to fill up the remaining space within a fixed size container.
Within the flex-grow container, I have another div that is a lot bigger than the flex sized container. How do I make it so that the content-wrapper element is scrollable instead of the child element overflowing.
Thank you!
.main-content-container {
padding: 0 20px;
display: flex;
flex-flow: column nowrap;
grid-gap: 10px;
height: 550px;
background: green;
}
.sub-content-container {
width: 300px;
background: grey;
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
}
.content-wrapper {
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
overflow: auto;
}
.content-container {
height: 10000px;
background: #555;
}
body {
background: black;
color: white;
padding-bottom: 30px;
}
<div class='main-content-container'>
<p>stuff</p>
<div class='sub-content-container'>
<p>header</p>
<div class='content-wrapper'>
<div class="content-container">I WANT THIS TO STAY WITHIN THE CONTENT-WRAPPER</div>
</div>
</div>
</div>
Generally speaking, for the overflow property to work, the container needs to be overflowed. That requires a fixed length on the container. Without a fixed length (height or width), there's nothing to trigger an overflow. The flex-grow property doesn't establish a fixed length, so it doesn't work.
Of course, setting a fixed height on your container is not an option if you want a dynamic layout.
So, to solve both problems, set the container to height: 1px.
this establishes the fixed length;
it doesn't interfere with the dynamic lengths; and,
the flex-grow property expands the container to full height
But there's one more problem. The nested flex container in column direction seems to be ignoring the overflow property. This is possibly because of the nesting in a flex formatting context. Hence, if possible, switch that container back to a block formatting context.
Make these adjustments to your code:
.content-wrapper {
height: 1px; /* new */
flex-grow: 1;
/* display: flex; */
flex-flow: column nowrap;
overflow: auto;
}
.main-content-container {
padding: 0 20px;
display: flex;
flex-flow: column nowrap;
grid-gap: 10px;
height: 550px;
background: green;
}
.sub-content-container {
width: 300px;
background: grey;
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
}
.content-wrapper {
height: 1px; /* new */
flex-grow: 1;
/* display: flex; */
flex-flow: column nowrap;
overflow: auto;
}
.content-container {
height: 10000px;
background: #555;
}
body {
background: black;
color: white;
padding-bottom: 30px;
}
<div class='main-content-container'>
<p>stuff</p>
<div class='sub-content-container'>
<p>header</p>
<div class='content-wrapper'>
<div class="content-container">I WANT THIS TO STAY WITHIN THE CONTENT-WRAPPER</div>
</div>
</div>
</div>
jsFiddle demo
I have a container div that has two div's within it aligned at two ends (left and right). I am aligning using flex as shown below.
.box {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
height: 40px;
margin: 0 auto;
background-color: lightblue;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.number {
font-size: 14px;
text-align: right;
background-color: lightblue;
}
When there is not enough space for the two divs to fit in the given width, i'd like the div on the right to take all the space it needs while the div on the right to shrink (and add ellipsis). However, in some cases, i still see the content in the 2nd div going to the next line. Is there anyway to avoid this? Notice, how in the example in jsFiddle, 'NUMBER' is pushed to next line.
http://jsfiddle.net/kLn9bm7w/
Also add white-space: nowrap to the div on the right (.number).
.box {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
height: 40px;
margin: 0 auto;
background-color: lightblue;
}
.name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.number {
white-space: nowrap; /* new */
font-size: 14px;
text-align: right;
background-color: lightblue;
}
<div class="box">
<div class="name">Somereallylongtextcodssdmeshere</div>
<mark class="number">21.0K NUMBER</mark>
</div>
I have the following CSS, trying to make a responsive table-like design.
.table {
display: flex;
width: 100%;
flex-direction: column;
overflow-x: auto;
}
.table__row {
display: flex;
flex-flow: row nowrap;
}
.table__column {
flex-shrink: 0;
display: block;
align-items: center;
padding: .54rem 1.05rem;
width: 300px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Here's a JSFiddle: https://jsfiddle.net/abuer473/
The problem is that when a user scrolls to the right, the background gets lost. How do I fix this?
I was able to fix the issue by adding background to the columns of every even numbered row:-
css:
.table__row:nth-child(2n) > .table__column {
background: #AAA;
}
or else you could write
css:
.table__row:nth-child(even) > .table__column {
background: #AAA;
}
DEMO
This question already has answers here:
text-overflow ellipsis on flex child not working [duplicate]
(4 answers)
Closed 5 years ago.
I'm trying to put ellipsis for text overflow:
parent:
.grid-row {
display: flex;
}
child:
.grid-cell {
display: flex;
flex-grow: 3;
flex-basis: 0;
align-items: center;
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.grid-cell:first-child {
flex-grow: 1;
justify-content: center;
}
And, well the overflow is hidden, but without any ellipsis.
For text overflow to work you need a set width - set a width to your grid-row.
Also remove the display: flex from the grid-cell - see demo below:
.grid-row {
display: flex;
width: 250px;
}
.grid-cell {
/*display: flex;*/
flex-grow: 3;
flex-basis: 0;
/*align-items: center;*/
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.grid-cell:first-child {
flex-grow: 1;
justify-content: center;
}
<div class="grid-row">
<div class="grid-cell">insert text here</div>
<div class="grid-cell">some text</div>
<div class="grid-cell">some more text here</div>
</div>
.grid-cell {
display: flex;
flex-grow: 3;
flex-basis: 0;
align-items: center;
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap:normal;
width: ###px;
}
You should set the width of .grid-cell
Add this to your .grid-cell:
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Works like a charm.
I am trying to make a very simple .html for the purpose of learning.
I'm trying to put two divs each next to each other, but I can not accomplish that.
So far I managed to do it, but if I add the property of the "width" it goes down, if I put a float: left; It works but the other div does not fill the rest of the page. .
Style
#video{
width: 50%;
height: 100%;
border-style: solid;
float: left;
}
#chat{
width: 50%;
height: 100%;
border-style: solid;
float: left;
}
#caja{
overflow: hidden;
}
</head>
<body>
<div id="caja">
<div id="video">
TEST
</div>
<div id="chat">
TEST
</div>
</div>
</body>
Your border overflows here.
Try setting box-sizing: border-box to both divs:
#video{
width: 50%;
height: 100%;
border-style: solid;
float: left;
box-sizing: border-box;
}
#chat{
width: 50%;
height: 100%;
border-style: solid;
float: left;
box-sizing: border-box;
}
The border is part of the equation although you haven't specified a size.
Border-box would set the border inside the box. Not sure if this is different in each browser or not.
MDN box-sizing
Use display: inline with width of 50% for inner divs.
The following css would resolve the issue.
CSS
#video{
width: 50%;
height: 100%;
border-style: solid;
display: inline;
box-sizing: border-box;
}
#chat{
width: 50%;
height: 100%;
border-style: solid;
display: inline;
box-sizing: border-box;
}
#caja{
width: 100%;
}
HTML
<div id="caja">
<div id="video">
TEST
</div>
<div id="chat">
TEST
</div>
</div>
https://jsfiddle.net/uo5qfj2t/
You could use another approach with flexbox:
#video {
width:50%;
border-style: solid;
}
#chat {
width:50%;
border-style: solid;
}
#caja {
display: flex;
flex-wrap: nowrap;
}
I would drop floats and use flexbox.
Here is a codepen I made with a bunch of goodies.
See the Pen Simple flexbox layout by Craig Curtis (#craigocurtis) on CodePen.
HTML
<div id="caja" class="flex-container fullheight fullwidth">
<div id="video" class="flex-item-6 flex-container-vh-center">
<div class="flex-item">Video</div>
</div>
<div id="chat" class="flex-item-6 flex-container-vh-center">
<div class="flex-item">Chat</div>
</div>
</div>
CSS
/* body reset - to get rid of default margins */
body {
margin: 0;
}
/* basic horizontal alignment */
.flex-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/* based off of 12-column layout (like Bootstrap) */
.flex-item-6 {
-webkit-flex: 0 1 50%;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
/* perfect vertical and horizontal centering */
.flex-container-vh-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/* simple flex item child maintaining original dimensions */
.flex-item {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
/* full height */
.fullheight {
/* a nice way to get the viewport height in percentage */
min-height: 100vh;
}
.fullwidth {
/* another good way to get the viewport width in percentage */
width: 100vw;
}
#caja {
/* I can relax! */
}
#video, #chat {
/* rems are better than px since px keep getting smaller. rems are units based off of hte root font size, and don't change */
border: 0.25rem solid black;
color: white;
font-size: 4rem;
font-family: sans-serif; /* a more readable font family */
}
#video {
/* just a fun gradient with ridiculous html colors */
background: linear-gradient(lime,tomato);
}
#chat {
/* a better way of controlling colors via rgba alpha scale, good for transparent-esque overlays */
background: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.75));
}
Drop floats, because they pull content out of the normal flow and get real buggy and require clearfixes, use flexbox instead.
Use reusable classes instead of id's.
This code may look daunting, but there is a super easy way to create quick layouts. Play with Flexy Box - it will solve nearly all of your layout headaches!
http://the-echoplex.net/flexyboxes/
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Add this property also due to border on div total width of div will be 50% + width of border and this property include border in width.