search

ExactTarget / fuelux-mctheme

Marketing Cloud Theme: Use Fuel UX 3 and Bootstrap 3 to create a user interface with the look & feel of existing Salesforce Marketing Cloud applications. View the latest at
http://fuelux-mctheme.herokuapp.com/
BSD 3-Clause "New" or "Revised" License
19 stars 21 forks source link

Collapse panel sizing #453

Open futuremint opened 8 years ago

futuremint commented 8 years ago

From @janxious: Ran into an issue with some code that was in the following shape:

<ul class="list-group">
  <li class="list-group-item list-group-custom-thing-form" id="some-list-group-item">
    <input type="text" class="form-control" placeholder="thing name" name="thing-name" pattern="[A-Za-z0-9]+" required="required">
    <button type="button" class="btn btn-default btn-create"><i class="fuelux-icon fuelux-icon-plus-sign"></i>Add</button>
  </li>
  <li class="list-group-item">
    <a data-toggle="collapse" a href="#collapseExampleLink" aria-expanded="false" aria-controls="collapseExample">Watch collapse in action</a>
    <a data-toggle="collapse" aria-expanded="false" aria-controls="some-list-group-item" href="#some-list-group-item" class="btn btn-link"><i class="fuelux-icon fuelux-icon-plus-sign"></i>Add A Thing</a>
  </li>
</ul>

The un-collapse worked correctly, but the re-collapse left a partial height visible list-group-item. It seemed like it was the height of the padding/margin above the text input.