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

Retrieve the selected option from the dropdown menu in the specified form

Switching from HTML to PHP programming

Connecting to an element within a separate node (XSLT)

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

Designing a navigation system that revolves around a central logo image

Is there a way to extract the content within the HTML tags as well as the text enclosed within parentheses?

Errors are not being shown on mandatory fields in the form

Separating the rules for development and production modes in the webpack configuration file

Find the line containing the selected text within a JavaScript code

Displaying content on the <div> element

Is there a file outside of the website's root that needs to be linked?

Automatically scraping Facebook API data with PHP

JavaScript and AJAX: Dynamically Create URLs

Curved Edges Ensure Non-Interactive Elements

Issue with alignment in the multiselect filter of a React data grid

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

Reasons for dividing by 1 in JavaScript

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

What is the best way to reveal CSS files downloaded via npm?