How to give an empty div a minimum height equal to the text height?!
In this example there are multiple label/value pairs.. And some values are empty
How to give the empty value container a minimum height equal to the text height?
Attention
This is NOT a table layout.. Each label/value have different width
jsfiddle
http://jsfiddle.net/p2ekqomj/9/
code
<div>
<div class="input_label" style="width:80px">
<div class="input_label label">Label 1</div>
<div class="input_label_value">Value 1</div>
</div>
<div class="input_label" style="width:100px">
<div class="input_label label">Label 2</div>
<div class="input_label_value"></div>
</div>
</div>
<div>
<div class="input_label" style="width:50px">
<div class="input_label label">Label 3</div>
<div class="input_label_value"></div>
</div>
</div>
<div>
<div class="input_label" style="width:60px">
<div class="input_label label">Label 4</div>
<div class="input_label_value"></div>
</div>
<div class="input_label" style="width:80px">
<div class="input_label label">Label 5</div>
<div class="input_label_value">Value 5</div>
</div>
</div>
<div>
<div class="input_label" style="width:120px">
<div class="input_label label">Label 6</div>
<div class="input_label_value"></div>
</div>
</div>
.input_label {
display:inline-block;
padding:2px;
vertical-align: top;
}
.input_label.label {
font-size:11px;
}
Change the display property of .input_label from inline-block to table-cell:
.input_label {
display:table-cell;
padding:2px;
}
jsFiddle example
Related
Here's a codepen illustrating the issue: https://codepen.io/robertcooper_rc/pen/jOYbdbR
I'm using a CSS grid to create a table layout. It's been working well, but I'm having an issue with the behavior of position: sticky on one of the columns in my grid.
I have a horizontally scrollable table with 4 columns and the first column is sticky.
When I scroll to the right, the first column does stick to the left as is expected.
However, when scrolling starts nearing the end of the table's horizontal space, the first no longer maintains its sticky position to the left edge of the table.
I've noticed that if I remove the HTML markup for the <aside>, the sticky column behavior works as expected. However, I need the <aside> to be present.
Any ideas on how to fix this with CSS while maintaining the DOM structure?
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
display: flex;
width: 300px;
padding: 0.5rem;
border: 1px solid red;
}
aside {
padding-right: 1rem;
width: 100px;
}
.table {
min-width: 0;
overflow: scroll;
}
.row {
display: grid;
grid-template-columns: repeat(4, 100px);
}
.col {
border: 1px solid black;
background: #eee;
}
.sticky {
position: sticky;
left: 0;
z-index: 1;
background: lightblue;
}
<div class="container">
<aside>
My aside
</aside>
<div class="table">
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
</div>
</div>
So the problem actually falls with the min-width set on .table. The width is not defined to the end of the row which is affecting the behavior of the sticky elements at row-end.
You'll notice if you exchange min-width: 0; to min-width: 100%; it functions as you would like, but then the table overflows outside of .container.
A stickily positioned element is treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root.
MDN CSS/Position
So with that said, the elements with the scroll need to have a defined width so the sticky element knows to stay sticky.
A simple solution would be to nest all of the .table elements in another wrapper that has a defined width. I chose 300px based on the rendered width of the content and the container.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
display: flex;
width: 300px;
padding: 0.5rem;
border: 1px solid red;
}
aside {
padding-right: 1rem;
width: 100px;
}
.table {
min-width: 0;
overflow: scroll;
}
.row {
display: grid;
grid-template-columns: repeat(4, 100px);
}
.col {
border: 1px solid black;
background: #eee;
}
.sticky {
position: sticky;
left: 0;
z-index: 1;
background: lightblue;
}
.wrapper {
width: 300px;
}
<div class="container">
<aside>
My aside
</aside>
<div class="table">
<div class="wrapper">
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
<div class="row">
<div class="col sticky">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
</div>
</div>
</div>
</div>
In this example http://jsfiddle.net/rodrigolinkweb/k8qg14xL/ I need to select only "Container 12", how can I do this?
ps: note that both divs have the same class name "wrapper".
.container:nth-child(n+3){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
You can select them with the .wrapper class, like this
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
If you want to select it from backwards you can use :nth-last-of-type() . Refer to the following fiddle here
No matter what content the .wrapper has :nth-child will select child based on its position where as :nth-of-type selects with appropriate attribute.
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
Some link
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
I need to implement a cartesian plane with Bootstrap 4 and Flex. The desired output is something like the following image:
The plane is composed by a 10x10 matrix. Moreover I need a row containing the x labels and a column showing the y labels.
Here you are my code:
<div class="d-flex p-2" style="border: 1px solid black; width: 40%; margin-bottom: 50px;">
<div class="d-flex flex-row">
<div class="p-2 align-items-stretch">1</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
<div class="p-2 align-items-stretch">11</div>
</div>
<div class="d-flex flex-column">
<div class="p-2">1</div>
<div class="p-2">2</div>
<div class="p-2">3</div>
<div class="p-2">4</div>
<div class="p-2">5</div>
<div class="p-2">6</div>
<div class="p-2">7</div>
<div class="p-2">8</div>
<div class="p-2">9</div>
<div class="p-2">10</div>
</div>
<!-- the same for the other 8 rows -->
</div>
And the associated css:
.p-2 {
border: 1px solid lightgray;
}
.p-2:before {
content:'';
float:left;
padding-top:100%;
}
The actual result is:
I have two problems:
the row number 11 should be stretched until the last column;
the grid items should adapt their size according to the available space
of the container.
How I can reach these goals? Thank you
You can use the Bootstrap grid like this...
Demo: https://www.codeply.com/go/sQA6tvHiZh
<div class="container text-center">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="row">
<div class="col-1">y</div>
<div class="col-11">
<div class="row">
<div class="col">1
</div>
<div class="col">2
</div>
<div class="col">3
</div>
<div class="col">4
</div>
<div class="col">5
</div>
<div class="col">6
</div>
<div class="col">7
</div>
<div class="col">8
</div>
<div class="col">9
</div>
<div class="col">10
</div>
</div>
<!--/row-->
9 more row ...
<div class="row">
<div class="col">x
</div>
</div>
</div>
</div>
</div>
</div>
<!--container-->
</div>
As you can see, there are .row elements that are parent to .cell elements.
I have a selected element inside a .row element, I want to target:
An element that is a child of the parent element that follows the parent containing .selected
Is this possible in CSS only?
Assume I want to select the second .cell of the parent next to the parent containing .selected
How do I turn the background color of the div containing the number 13 green?
.row .cell.selected {
background-color: red
}
.row .cell.selected+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell+.cell+.cell {
background-color: red;
}
#month-view .row .cell.selected+.cell {
background-color: yellow;
}
.row {
padding: 50px;
}
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
/div>
If I understood your question you want that the cell that gets a ".selected" class in the first row gets a styling in a cell in the same position in the second row.
That is not possible with CSS only, just using JS. CSS can't give you the index position of your ".selected" cell.
If you want a solution that is pure HTML and CSS I recommend you to add a second class like ".selected-column" to the next rows and style after this.
Not possible in CSS as you can't go backwards/up the DOM in CSS. But in case you can use JS or jQuery, here's a way. It's pretty easy and intuitive with jQuery using $.parent(), $.next(), and :nth-child.
$('.selected').parent('.row').next('.row').find('.cell:nth-child(2)').addClass('green');
.row .cell.selected {
background-color: red
}
.row {
padding: 50px;
}
.green {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
</div>
Given the following snippet, I would expect the div containing "Award 1" to have a red background colour. Can someone explain to me why it does not? The first item should have a border top.
.item-wrap:first-child .item {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
:first-child (https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child)
In your example you are attempting to select an element with the class .item which resides in a parent with the class .item-wrap which itself is the first child of its parent (in this case .awards). As .item-wrap is not the first child of .awards it does not match.
Given your markup the following rule should fit your needs:
.awards :first-child + .item-wrap .item:first-child {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
This will select an element with the class .item which is the first child of its parent .item-wrap which is immediately preceded by the first child that belongs to the element with the class .awards.
you need to wrap child elements with a parent div like this,
HTML
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
</div>
CSS
.item-wrap:first-child .item {
background-color:red;
}
http://codepen.io/anon/pen/QjJBQL
.item-wrap:nth-child(2){
background: red;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
.item:first-child{
color: red;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
<div class="item">Award 1a</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
<div class="item">Award 2a</div>
</div>
</div>
Place the selector on the child, not the parent (http://codepen.io/anon/pen/vNQamR):
.item:first-child{
color: red;
}