Sandbox: JavaScript

Sets the min-size property for an element based on the tallest element from those specified (defaults to its children). This assumes that some portion of them are hidden, will at some point be displayed, and you don't want the height transition.

Example

These examples use BS.Carousel with each successive slide taller than the last.

With SetMinSize

<div id="myCarousel" class="carousel slide grey-20-bkg" data-behavior="BS.Carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <!-- can use #id references or not; uses index of the element otherwise -->
    <li href="#item1"></li>
    <li href="#item2"></li>
    <li href="#item3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" data-behavior="SetMinSize">
    <div class="item active" id="item1">
      <div class="inner-slide">
        <ol>
          <li>item one</li>
        </ol>
      </div>
    </div>
    <div class="item" id="item2">
      <div class="inner-slide">
        <ol>
          <li>item one</li>
          <li>item two</li>
        </ol>
      </div>
    </div>
    <div class="item" id="item3">
      <div class="inner-slide">
        <ol>
          <li>item one</li>
          <li>item two</li>
          <li>item three</li>
        </ol>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control fui-arrow-left"></a>
  <a class="right carousel-control fui-arrow-right"></a>
</div>

w/o SetMinSize

<div id="myCarousel" class="carousel slide grey-20-bkg" data-behavior="BS.Carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <!-- can use #id references or not; uses index of the element otherwise -->
    <li href="#item1"></li>
    <li href="#item2"></li>
    <li href="#item3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active" id="item1">
      <div class="inner-slide">
        <ol>
          <li>item one</li>
        </ol>
      </div>
    </div>
    <div class="item" id="item2">
      <div class="inner-slide">
        <ol>
          <li>item one</li>
          <li>item two</li>
        </ol>
      </div>
    </div>
    <div class="item" id="item3">
      <div class="inner-slide">
        <ol>
          <li>item one</li>
          <li>item two</li>
          <li>item three</li>
        </ol>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control fui-arrow-left"></a>
  <a class="right carousel-control fui-arrow-right"></a>
</div>

Behavior Options

Name type default example description
targets string > 'div.foo' The childrent to measure their height. Defaults to the immediate children of the element with the behavior fitler.