CODEWITHSUNDEEP
htmlcssless
Antony SUTHAKAR J
Antony SUTHAKAR J

Reputation: 950

Set an element width based on the number of siblings from its parent in LESS without any script

For example,

<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
</div>

from the above HTML, I want to set 'column' width 25% if container div has 4 children. If it has only 2 children then 'column' width 50% wise versa.

Is there any way to do this using LESS framework. But should not use any script like javascript, jquery etc...

Any help would be appreciated !

Upvotes: 1

Views: 4301

Answers (3)

Antony SUTHAKAR J
Antony SUTHAKAR J

Reputation: 950

Yes, there is an answer for the above question. Though it is not specific to LESS framework, we can acheive it through simple CSS properties.

All the CSS properties can be used in LESS. Hence it should be applicable in LESS framework.

It is really cool! Is it. Cheers!.

Solution:

Here is the working fiddle.

jsfiddle

Here is the code.

HTML:

<div class="container1">
  <div class="column">Column 1</div>
</div>
<div class="container2">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>
<div class="container3">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

CSS:

.container1, .container2, .container3 {
 float: left;
 width: 100%;
}
.container1 .column, .container2 .column, .container3 .column {
  float: left;
}
.container1 .column {
  background: #ff0000;
}
.container2 .column {
  background: #ffff00;
}
.container3 .column {
  background: #ff00ff;
}
.container1 .column:first-child:nth-last-child(1) {
  width: 100%;
}
.container2 .column:first-child:nth-last-child(2), .container2  .column:first-child:nth-last-child(2) ~ .column {
 width: 50%;
}
.container3 .column:first-child:nth-last-child(3), .container3 .column:first-child:nth-last-child(3) ~ .column {
  width: 33.33%;
}

Result:

enter image description here

Upvotes: 2

Aroniaina
Aroniaina

Reputation: 1252

As @Danield say in comment, I post my idea as an answer! My answer is base on 2 CSS rules :

  • set parent to .container{display: flex;}
  • set children to .column{flex:1;}

The result is :

.container
{
  border:solid 1px red;
  display:flex;
}

.column
{
  border:solid 1px blue;
  flex:1;
}
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>

<br>

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<br>

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
  <div class="column">Column 5</div>
</div>

Upvotes: 5

Luca Detomi
Luca Detomi

Reputation: 5716

As said by Harry:

Less compiler has no way to find out how many siblings the element has

But this is not a LESS problem, you can solve it with simple CSS using a common display value.

Look at this jSFiddle that shows you how .column elements automatically adjust their width:

Core code is the following:

.container
{
    display:table;
    table-layout:fixed;
    width:100%;
}

.column
{
    display:table-cell;
}

That tells browser to treat elements as a table and inner table-cells.

Upvotes: 1

Related Questions