Html - CSS auto change li width when label text increases

JK
July 10, 2024
94 views
4 votes
4 Answers

I have some problems with this CSS.

How can I make each li’s size increases or decreases according to the label’s size?
Also, when the li run to the end of the page’s width, how can I make it wrap to a new row?

For example:

Black’s width should be smaller
Forest Green’s width should be wider
The first row should end at Purple, that’s the width of the page. Rose Pink, Rose Red.. and the rest, should wrap to a new row

.cable-config span {
    font-size: 14px;
    font-weight: 400;
    color: #86939E;
    display: inline-block;
}

.cable-choose {
    list-style-type: none;
    margin: 25px 0 0 0;
    padding: 0;
}

.cable-choose {
    white-space: nowrap;
}


.cable-choose li {
    /* float: left; */
    margin: 15px 5px 0 0;
    width: 100px;
    height: 40px;
    display: inline-block;
    position: relative;
}

.cable-choose label,
.cable-choose input {
    display: block;
    position: absolute;
    /* top: 0; */
    left: 0;
    right: 0;
    bottom: 0;
}

.cable-choose input[type="radio"] {
    opacity: 0.01;
    z-index: 100;
}

.cable-choose input[type="radio"]:checked+label,
.Checked+label {
    background: yellow;  
}

.cable-choose label {
    border: 2px solid #E1E8EE;
    border-radius: 6px;
    padding: 13px 20px;
    font-size: 14px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
    transition: all .5s;
    cursor: pointer;
    z-index: 90;
}

.cable-choose .sold-out {
    color: #ced3d9;
}

.radio-custom:checked ~ label {
    border: 2px solid #121b21;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<div class="cable-config clearfix">
  <div><h5>Color:</h5></div>

  <ul class="cable-choose">
    <li>
      <input
        type="radio"
      /><span class="radio-custom-dummy"></span
      ><label class="" for="black">Black</label>
    </li>
    <li>
      <input
        type="radio"
      /><span class="radio-custom-dummy"></span
      ><label class="" for="forest-green">Forest Green</label>
    </li>
    <li>
      <input
        type="radio"
        disabled=""
      /><span class="radio-custom-dummy"></span
      ><label class="sold-out" for="light-purple">Light Purple</label>
    </li>
  </ul>
</div>

Tags: css html

Answers

Use "flex" styles for ul and make it simple

.cable-config span {
  font-size: 14px;
  font-weight: 400;
  color: #86939E;
  display: inline-block;
}

.cable-choose {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.cable-choose {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 5px;
}

.cable-choose li {
  height: 40px;
  position: relative;
}

.cable-choose input {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.cable-choose input[type="radio"]:checked~label,
.Checked+label {
  background: yellow;
}

.cable-choose label {
  border: 2px solid #E1E8EE;
  border-radius: 6px;
  padding: 13px 20px;
  font-size: 14px;
  color: #000;
  background-color: #fff;
  cursor: pointer;
  transition: all .5s;
}

.cable-choose .sold-out {
  color: #ced3d9;
}

<div class="cable-config clearfix">
  <div>
    <h5>Color:</h5>
  </div>
  <ul class="cable-choose">
    <li>
      <input type="radio" /><span class="radio-custom-dummy"></span><label class="" for="black">Black</label>
    </li>
    <li>
      <input type="radio" /><span class="radio-custom-dummy"></span><label class="" for="forest-green">Forest Green</label>
    </li>
    <li>
      <input type="radio" disabled="" /><span class="radio-custom-dummy"></span><label class="sold-out" for="light-purple">Light Purple</label>
    </li>
  </ul>
</div>

Use display: flex for ul styles.

.cable-config span {
    font-size: 14px;
    font-weight: 400;
    color: #86939E;
    display: inline-block;
}

.cable-choose {
    list-style-type: none;
    margin: 25px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 5px;
}

.cable-choose li {
    height: 40px;
    position: relative;
}

.cable-choose input[type="radio"] {
    display: none;
}

.cable-choose input[type="radio"]:checked+label {
    background: yellow;  
}

.cable-choose label {
    border: 2px solid #E1E8EE;
    border-radius: 6px;
    padding: 13px 20px;
    font-size: 14px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
    transition: all .5s;
    cursor: pointer;
    z-index: 90;
}

.cable-choose .sold-out {
    color: #ced3d9;
}

<div class="cable-config clearfix">
  <div><h5>Color:</h5></div>

  <ul class="cable-choose">
    <li>
      <input
        type="radio" name="cable-color" id="black"
      /><label class="" for="black">Black</label>
    </li>
    <li>
      <input
        type="radio" name="cable-color" id="forest-green"
      /><label class="" for="forest-green">Forest Green</label>
    </li>
    <li>
      <input
        type="radio" name="cable-color" id="light-purple"
        disabled=""
      /><label class="sold-out" for="light-purple">Light Purple</label>
    </li>
  </ul>
</div>

Use flexbox and remove all the absolute positioning, it’s unnecessary and over-complicating what you are trying to do.

.cable-config span {
  font-size: 14px;
  font-weight: 400;
  color: #86939e;
}

.cable-choose {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0;
  width: 400px /* for demo */
}

.cable-choose {
  display: flex;
  flex-wrap: wrap;
}

.cable-choose li {
  white-space: nowrap;
  margin: 15px 5px 0 0;
  height: 40px;
}

.cable-choose input[type="radio"] {
  display: none;
}

.cable-choose input[type="radio"]:checked~label {
  background: yellow;
}

.cable-choose label {
  border: 2px solid #e1e8ee;
  border-radius: 6px;
  padding: 13px 20px;
  font-size: 14px;
  color: #000;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 90;
}

.cable-choose .sold-out {
  color: #ced3d9;
}

.radio-custom:checked~label {
  border: 2px solid #121b21;
}

<div class="cable-config clearfix">
  <div>
    <h5>Color:</h5>
  </div>

  <ul class="cable-choose">
    <li>
      <input type="radio" id="black" name="picker" />
      <span class="radio-custom-dummy"></span>
      <label class="" for="black">Black</label>
    </li>
    <li>
      <input type="radio" id="green" name="picker" />
      <span class="radio-custom-dummy"></span>
      <label class="" for="green">Very Long Label Name</label>
    </li>
    <li>
      <input type="radio" id="forest-green" name="picker" /><span class="radio-custom-dummy"></span><label class="" for="forest-green">Forest Green</label>
    </li>
    <li>
      <input type="radio" disabled="" id="light-purple" /><span class="radio-custom-dummy"></span><label class="sold-out" for="light-purple">Light Purple</label>
    </li>
  </ul>
</div>

Your main problem is the fixed width and height used for the list items. Text will simply overflow if it’s larger.

There is also no need to use an unordered list for this scenario.

CSS flexbox would definitely be an easier solution as suggested by other members. I have included a working example for you and made some improvements with regard to the custom radio buttons.

Note: "max-width: 600" is only set to demonstrate how the custom radio buttons are wrapped.

.radio-btn {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.btn {
    border-radius: 6px;
    padding: 13px 20px;
    font-size: 14px;
    color: #000;
    background-color: #fff;
    border: 2px solid #E1E8EE;
    cursor: pointer;
    transition: all .5s;
    cursor: pointer;
}

.radio-btn+.btn:hover {
    border-color: yellow;
}

.radio-btn:checked+.btn {
    background-color: yellow;
    border-color: yellow;
}

.radio-btn:disabled+.btn {
    text-decoration: line-through;
    background-color: #E1E8EE;
    border-color: #E1E8EE;
}

.cable-config {
    max-width: 600;
}
.cable-choose {
    display: flex;
    flex-wrap: wrap;
}
.cable-choose .btn {
    margin: 5px;
}

<div class="cable-config">

    <h5>Color:</h5>
    
    <div class="cable-choose">
    
        <input type="radio" class="radio-btn" name="cable-options" id="black" autocomplete="off">
        <label class="btn" for="black">Black</label>

        <input type="radio" class="radio-btn" name="cable-options" id="forest-green" autocomplete="off">
        <label class="btn" for="forest-green">Forest Green</label>

        <input type="radio" class="radio-btn" name="cable-options" id="light-purple" autocomplete="off" disabled>
        <label class="btn" for="light-purple">Light Purple</label>
    
        <input type="radio" class="radio-btn" name="cable-options" id="white" autocomplete="off">
        <label class="btn" for="white">White</label>

        <input type="radio" class="radio-btn" name="cable-options" id="velvet-red" autocomplete="off">
        <label class="btn" for="velvet-red">Velvet Red</label>

        <input type="radio" class="radio-btn" name="cable-options" id="ny-pink" autocomplete="off" disabled>
        <label class="btn" for="ny-pink">NY Pink</label>
        
        <input type="radio" class="radio-btn" name="cable-options" id="orange" autocomplete="off">
        <label class="btn" for="orange">Orange</label>

        <input type="radio" class="radio-btn" name="cable-options" id="yellow" autocomplete="off">
        <label class="btn" for="yellow">Yellow</label>

        <input type="radio" class="radio-btn" name="cable-options" id="dark-chocolate" autocomplete="off" disabled>
        <label class="btn" for="dark-chocolate">Dark Chocolate</label>
        
    </div>

</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS auto change li width when label text increases

Answers