CODEWITHSUNDEEP
htmlcss
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

Automatically expand height of li and align the content to center

How to automatically expand height of <div class="criteria-text"> in the <li>

For example:

https://jsfiddle.net/d44nusaL/

You can see the first and bottom rows (green) contain a few text but the middle row in row contain a lot of text but it has chopped off. The height of middle row should expand.

How can it be done?

HTML

<div class="question-block">
    <ul style="display: block;">
       <li class="row-pass">
           <div class="criteria-text">Text1 Text1 Text1 Text1 Text1 Text1</div>
           <div class="criteria-control">
                 <button class="btn" value="YES">YES</button>
               <button class="btn" value="NO">NO</button>
           </div>
        </li>
       <li class="row-fail">
           <div class="criteria-text">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div>
           <div class="criteria-control">
                 <button class="btn" value="YES">YES</button>
               <button class="btn" value="NO">NO</button>
           </div>
        </li>
       <li class="row-pass">
           <div class="criteria-text ">Text3 Text3 Text3 Text13 Text3 Text3</div>
           <div class="criteria-control">
                 <button class="btn" value="YES">YES</button>
               <button class="btn" value="NO">NO</button>
           </div>
        </li>        
    </ul>
</div>

CSS

.question-block {
    padding: 1px;
    overflow: hidden;
}

.question-block ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    clear: both;
}

.question-block ul li {
    height: 21px;
    margin-bottom: 1px;
    padding: 4px;
    border-bottom:1px solid gray;
    overflow:hidden;
}
.row-pass {
    background-color: green;
}

.row-fail {
    background-color: red;
}

.question-block .criteria-text {
    float: left;
    line-height: 21px;
    font-size: 12.2px;
    width: 350px;
}

Upvotes: 1

Views: 59

Answers (2)

m4n0
m4n0

Reputation: 32285

Instead of having a fixed height for the list items, Set height to auto which will expand the height depending on the content inside.

You can use the CSS3 flexible box layout which will replace the traditional method of centering. Use display: flex; and align-items: center to vertically center when the row has expanded.

JSfiddle Demo

.question-block {
  padding: 1px;
  overflow: hidden;
}
.question-block ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  clear: both;
}
.question-block ul li {
  height: auto;
  margin-bottom: 1px;
  padding: 4px;
  border-bottom: 1px solid gray;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.row-pass {
  background-color: green;
}
.row-fail {
  background-color: red;
}
.question-block .criteria-text {
  float: left;
  line-height: 21px;
  font-size: 12.2px;
  width: 350px;
}
<div class="question-block">
  <ul style="display: block;">
    <li class="row-pass">
      <div class="criteria-text ">Text1 Text1 Text1 Text1 Text1 Text1</div>
      <div class="criteria-control">
        <button class="btn" value="YES">YES</button>
        <button class="btn" value="NO">NO</button>
      </div>
    </li>
    <li class="row-fail">
      <div class="criteria-text ">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div>
      <div class="criteria-control">
        <button class="btn" value="YES">YES</button>
        <button class="btn" value="NO">NO</button>
      </div>
    </li>
    <li class="row-pass">
      <div class="criteria-text ">Text3 Text3 Text3 Text13 Text3 Text3</div>
      <div class="criteria-control">
        <button class="btn" value="YES">YES</button>
        <button class="btn" value="NO">NO</button>
      </div>
    </li>
  </ul>
</div>

Upvotes: 4

c.early
c.early

Reputation: 186

In addition to Manoj's answer, you could set min-height. This works like 'auto' but has a starting minimum:

.question-block ul li {
    min-height: 21px;
    margin-bottom: 1px;
    padding: 4px;
    border-bottom:1px solid gray;
    overflow:hidden;
}

This would ensure the li isn't too small to start with.

Upvotes: 2

Related Questions