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
Related
Div scroll is not showing automatically.
.sectionContent {
height: 100vh;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
}
.asideContent {
flex: none;
width: 30rem;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
background: #eceff1;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: space-between;
min-height: 100%;
}
.rightSideDiv {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 2rem;
min-height: 100%;
}
I am having Section inside that having aside and Div. Div scroll not showing automatically and some times showing but div not fully displaying when check in responsive way. here I am providing in section, aside, div css classes, please help.
After changing .sectionContent as {height: 60vh} its working , but i am not sure its correct or not.
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>
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 have trouble getting text-overflow: ellipsis and overflow: hidden working the way I need it.
Basically, I need to get the left div with class item1 and text "Please truncate me" to shrink as the width of the container decreases so that both item1 and item2 are on the same row.
No matter what I try I end up with the row overflowing and it never shrinks.
Tried various solutions from here but didn't manage to get any working the way I need.
.mainwrapper {
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.content {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
max-width: 800px;
width: 100%;
height: 400px;
background-color: red;
}
.top-container {
display: flex;
flex-wrap: wrap;
width: 80%;
height: 80%;
background-color: cyan;
}
.title {
background-color: white;
}
.table-container {
display: table;
}
.skills-container {
width: 100%;
display: block;
background-color: green;
}
.skill-row {
width: 100%;
display: flex;
justify-content: start;
background-color: blue;
}
.item1 {
display: flex;
flex-wrap: nowrap;
}
.item2 {
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
}
.item-content {
display: flex;
}
.item-details {
display: flex;
}
.text1 {
display: inline-block;
white-space: nowrap;
background-color: yellow;
}
.small-button {
display: flex;
height: 50px;
width: 50px;
background-color: green;
}
.overflow-toverflow {
overflow: hidden;
text-overflow: ellipsis;
}
.flex-w {
flex-wrap: wrap;
}
.flex-nw {
flex-wrap: nowrap;
}
.flex-min {
flex: 1 1 auto;
min-width: 0;
}
.flex-sh-0 {
flex-shrink: 0;
}
.min0 {
min-width: 0;
}
<div class="mainwrapper">
<div class="content flex-min">
<div class="top-container flex-min">
<div class="title">Your skills</div>
<div class="table-container">
<div class="skills-container">
<div class="skill-row flex-nw flex-min">
<div class="item1 flex-min">
<div class="item-content">
<div class="small-button"></div>
<div class="text1 overflow-toverflow">Please truncate me! Please truncate me!Please truncate me!Please truncate me!Please truncate me!Please truncate me</div>
</div>
</div>
<div class="item2 flex-sh-0">
<div class="small-button"></div>
<div class="text1">Relevance: None Whatsoever None</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
codepen:
https://codepen.io/Tiartyos/pen/Ljxyqr
An initial setting on flex items is min-width: auto. This means that, by default, an item cannot shrink below the size of its content. This prevents the ellipsis from rendering since the item simply expands to accommodate all content.
Most of your flex items have the necessary min-width: 0 override applied. But not all of them.
Also, flex and table properties don't play well together. Mixing them can break a flex layout, which appears to be happening in your case.
With the following adjustments, your layout seems to work.
.table-container {
/* display: table; */
min-width: 0; /* NEW */
}
.item-content {
display: flex;
min-width: 0; /* NEW */
}
revised codepen
More information:
Why doesn't flex item shrink past content size?
(This post would be a duplicate of this link, if it weren't for the display: table matter.)
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;
}