CODEWITHSUNDEEP
jqueryhtmlcss
Tchypp
Tchypp

Reputation: 1105

jQuery slideUp and slideDown do not work as expected

I want to hide and show a div element when a checkbox is selected or unselected using jQuery's slideUp() and slideDown(). My div looks as follows:

<div class="parent">
    <label class="childLeft">text</label>
    <div class="childRight">
      <input type="text" />
      <select>
        ...
      </select>
    </div>
</div>

and the css code for this is:

.parent {
  float: left;
  padding: 3px 0;
  width: 100%;
  min-height: 22px;
  border-bottom-color: #F2F2F2;
  border-bottom-style: dotted;
  border-bottom-width: 1px;
}
.childLeft {
  float: left;
  width: 108px;
  margin-right: 2px;
}
.childRight {
  float: right;
  width: 209px;
}

On slideUp(1000) it looks like only the padding are slided and the rest suddenly disappears. On slideDown(1000) the div appears and then the padding slides.

Do you have any idea why is this happening ?

Upvotes: 1

Views: 815

Answers (1)

zachallia
zachallia

Reputation: 1495

The reason is because you have a min-height set on the parent element. This makes it not possible to make that element smaller than 22px, causing the effect you are seeing.

Upvotes: 2

Related Questions