Is a CSS-only autoexpanding label possible within a list?

Question

Is a CSS-only autoexpanding label possible within a list?

I am interested in having all the labels automatically expand to the size of the widest one. Below is the HTML structure:

 <div class="body">
  <ul class="list">
    <li>
      <span>
          <label>condition</label>
          <span>used</span>
      </span>
    </li>
    <li>
      <span>
          <label>with invoice</label>
          <span>yes</span>
      </span>
    </li>
    <li>
      <span>
          <label>with warranty</label>
          <span>no</span>
      </span>
    </li>
        <li>
      <span>
          <label>with extra large text</label>
          <span>not looking good!</span>
      </span>
    </li>
  </ul>
 </div>

In addition, here is the related CSS code:

.body {
  background-color: #f1c40f;
  padding: 1em;
  width: 300px;
}

.list {
  padding-bottom: 1em;
  padding-top: 1em;
  > li {
    margin-bottom: 1em;
    &:last-child {margin-bottom: 0;}
  }  
  > li > span {
    background-color: #e0e0e1;
    border-radius: 5px;
    color: #6c777f;
    display: inline-block;
    width: 100%;
  }
  label {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    background-color: #a1aab0;
    color: white;
    display: inline-block;
    margin-bottom: 0;
    margin-right: .5em;
    min-width: 40%;
    padding: .5em;
    text-transform: capitalize;
  }
}

The question remains - can all the labels adjust their size based on the length of the fourth label?

Fiddle: https://jsfiddle.net/emvidi/qe6bpn14/1/ Updated Fiddle for fluid design: https://jsfiddle.net/emvidi/qe6bpn14/4/

html css

Answer 1

Answer №1

Absolutely possible! However, a slight modification in the structure is required.

To achieve this layout, you will need the following HTML structure:

<ul class="list">
  <li>
    <label>condition</label>
    <span>used</span>
  </li>
  <li>
    <label>with invoice</label>
    <span>yes</span>
  </li>
  ...
  ...
  <li>
    <label>with invoice</label>
    <span>yes</span>
  </li>
</ul>

The list items will be rendered as table rows, and both the <label> and <span> elements will act as table cells.

.list {
  border-spacing: 0 10px;  
  display: table;
}
.list > li {
  display: table-row;
}
.list > li > label,
.list > li > span {
  display: table-cell;
}

.body {
  background-color: #f1c40f;
  padding: 1em;
  width: 300px;
}

.list {
  display: table;
  border-spacing: 0 10px;
  padding: 0.5em 0;
}

.list > li {
  background-color: #e0e0e1;
  border-radius: 5px;
  color: #6c777f;
  display: table-row;
  width: 100%;
}
.list > li > label {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #a1aab0;
  color: white;
  display: table-cell;
  min-width: 40%;
  padding: .5em;
  text-transform: capitalize;
}

.list > li > span {
  border-radius: 0 5px 5px 0;
  background-color: #e0e0e1;
  display: table-cell;
  padding: .5em;
}

<div class="body">
  <ul class="list">
    <li>
      <label>condition</label>
      <span>used</span>
    </li>
    <li>
      <label>with invoice</label>
      <span>yes</span>
    </li>
    <li>
      <label>with warranty</label>
      <span>no</span>
    </li>
    <li>
      <label>with extra large text</label>
      <span>not looking good!</span>
    </li>
  </ul>
</div>

Answer 2

Absolutely possible! However, a slight modification in the structure is required.

To achieve this layout, you will need the following HTML structure:

<ul class="list">
  <li>
    <label>condition</label>
    <span>used</span>
  </li>
  <li>
    <label>with invoice</label>
    <span>yes</span>
  </li>
  ...
  ...
  <li>
    <label>with invoice</label>
    <span>yes</span>
  </li>
</ul>

The list items will be rendered as table rows, and both the <label> and <span> elements will act as table cells.

.list {
  border-spacing: 0 10px;  
  display: table;
}
.list > li {
  display: table-row;
}
.list > li > label,
.list > li > span {
  display: table-cell;
}

.body {
  background-color: #f1c40f;
  padding: 1em;
  width: 300px;
}

.list {
  display: table;
  border-spacing: 0 10px;
  padding: 0.5em 0;
}

.list > li {
  background-color: #e0e0e1;
  border-radius: 5px;
  color: #6c777f;
  display: table-row;
  width: 100%;
}
.list > li > label {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #a1aab0;
  color: white;
  display: table-cell;
  min-width: 40%;
  padding: .5em;
  text-transform: capitalize;
}

.list > li > span {
  border-radius: 0 5px 5px 0;
  background-color: #e0e0e1;
  display: table-cell;
  padding: .5em;
}

<div class="body">
  <ul class="list">
    <li>
      <label>condition</label>
      <span>used</span>
    </li>
    <li>
      <label>with invoice</label>
      <span>yes</span>
    </li>
    <li>
      <label>with warranty</label>
      <span>no</span>
    </li>
    <li>
      <label>with extra large text</label>
      <span>not looking good!</span>
    </li>
  </ul>
</div>

Answer 3

Answer №2

One option to achieve the desired size is by adding .label{width:150px}. However, keep in mind that this size setting will remain constant and won't change dynamically.

.body {
  background-color: #f1c40f;
  padding: 1em;
  width: 400px;
}

.list {
  padding-bottom: 1em;
  padding-top: 1em;
}
.list > li {
  margin-bottom: 1em;
}
.list > li:last-child {
  margin-bottom: 0;
}
.list > li > span {
  background-color: #e0e0e1;
  border-radius: 5px;
  color: #6c777f;
  display: inline-block;
  width: 100%;
}
.list label {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #a1aab0;
  color: white;
  display: inline-block;
  margin-bottom: 0;
  margin-right: .5em;
  min-width: 40%;
  padding: .5em;
  text-transform: capitalize;
  width: 150px
}

<div class="body">
      <ul class="list">
        <li>
          <span>
              <label>condition</label>
              <span>used</span>
          </span>
        </li>
        <li>
          <span>
              <label>with invoice</label>
              <span>yes</span>
          </span>
        </li>
        <li>
          <span>
              <label>with warranty</label>
              <span>no</span>
          </span>
        </li>
            <li>
          <span>
              <label>with extra large text</label>
              <span>not looking good!</span>
          </span>
        </li>
      </ul>
    </div>

Answer 4

One option to achieve the desired size is by adding .label{width:150px}. However, keep in mind that this size setting will remain constant and won't change dynamically.

.body {
  background-color: #f1c40f;
  padding: 1em;
  width: 400px;
}

.list {
  padding-bottom: 1em;
  padding-top: 1em;
}
.list > li {
  margin-bottom: 1em;
}
.list > li:last-child {
  margin-bottom: 0;
}
.list > li > span {
  background-color: #e0e0e1;
  border-radius: 5px;
  color: #6c777f;
  display: inline-block;
  width: 100%;
}
.list label {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #a1aab0;
  color: white;
  display: inline-block;
  margin-bottom: 0;
  margin-right: .5em;
  min-width: 40%;
  padding: .5em;
  text-transform: capitalize;
  width: 150px
}

<div class="body">
      <ul class="list">
        <li>
          <span>
              <label>condition</label>
              <span>used</span>
          </span>
        </li>
        <li>
          <span>
              <label>with invoice</label>
              <span>yes</span>
          </span>
        </li>
        <li>
          <span>
              <label>with warranty</label>
              <span>no</span>
          </span>
        </li>
            <li>
          <span>
              <label>with extra large text</label>
              <span>not looking good!</span>
          </span>
        </li>
      </ul>
    </div>

Answer 5

Answer №3

One approach is to utilize jQuery to identify the longest label and adjust the width of other labels accordingly:

$(function(){
    var longestLabel = $('label').outerWidth();
    $('label').each(function(){
        if ($(this).outerWidth() > longestLabel) {
            longestLabel = $(this).outerWidth();
        }
    });
    $('label').css('width', longestLabel);
});

Answer 6

One approach is to utilize jQuery to identify the longest label and adjust the width of other labels accordingly:

$(function(){
    var longestLabel = $('label').outerWidth();
    $('label').each(function(){
        if ($(this).outerWidth() > longestLabel) {
            longestLabel = $(this).outerWidth();
        }
    });
    $('label').css('width', longestLabel);
});

Answer 7

Answer №4

To avoid having to check the widest label as previously mentioned, you have the option of using nth-last-child(n) to dynamically adjust the width based on the specific label:

$(function() {
   var width = $('li:nth-last-child(1) label').width(); // Targeting only the last label
   $('label').width(width);
});

Answer 8

To avoid having to check the widest label as previously mentioned, you have the option of using nth-last-child(n) to dynamically adjust the width based on the specific label:

$(function() {
   var width = $('li:nth-last-child(1) label').width(); // Targeting only the last label
   $('label').width(width);
});

Answer 9

Answer №5

If you're familiar with jquery, the following code will work:

$(document).ready(function(){
    var width = 0;
    $(".labelWidth").each(function () {
        if ($(this).width() > width) {
            width = $(this).width();
        }
    });
    $(".labelWidth").css("width", width+"px");
});

Prior to executing the code, ensure that the display of the labels is set to:

display: inline-block;

To keep the labels on new lines, add the following CSS:

float:left; 
clear: both;

With jquery: https://jsfiddle.net/Conner160/aztbgo37

Without jquery: https://jsfiddle.net/Conner160/sacfszy4/

Answer 10

If you're familiar with jquery, the following code will work:

$(document).ready(function(){
    var width = 0;
    $(".labelWidth").each(function () {
        if ($(this).width() > width) {
            width = $(this).width();
        }
    });
    $(".labelWidth").css("width", width+"px");
});

Prior to executing the code, ensure that the display of the labels is set to:

display: inline-block;

To keep the labels on new lines, add the following CSS:

float:left; 
clear: both;

With jquery: https://jsfiddle.net/Conner160/aztbgo37

Without jquery: https://jsfiddle.net/Conner160/sacfszy4/

Is a CSS-only autoexpanding label possible within a list?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Ideas for displaying or hiding columns, organizing rows, and keeping headers fixed in a vast data table using jQuery

What is the best way for me to insert a paragraph between two lists?

What is the role of z-index in relation to floating elements?

I need help picking out specific elements from this messy HTML code using XPath and lxml - any ideas on how to do

Guidelines on transforming XML files into HTML tables using C++ programming language

Seamless flow from one image to the next

Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

Sorting of boxes is not possible when utilizing the sortable() function

The second tab on Bootstrap5's tab content feature seems to generate an endless amount of white

Canvas displaying inaccurately (unsteady)

What is the best way to add padding to each line within a block of text containing multiple lines

Activate Bootstrap button functionality with JavaScript

JSON Novice - persistently storing data in JSON during browser refreshes

Infinite scrolling made effortless with jQuery and Ajax

Exploring Hover Effects in Reactjs and Material UI

A DIV element may not have any visible height, even when it contains content

Using percentages for sizing and margins in CSS

jQuery prioritizes enforcing style over using a CSS file

Is there a way to repurpose a JavaScript object that gets sent back to the client upon page loading?

When you click the button, the page refreshes with no content