twitter-bootstrap - ドロップダウン メニューとしてブートストラップ スライダーを使用する

Question

垂直方向のブートストラップ スライダー ( http://www.eyecon.ro/bootstrap-slider/ ) を使用しています。ドロップダウンメニューとして使用する以外はすべて問題ありません。ドロップダウン後にスライダーを移動すると、押した正確な位置ではありません。バグですか? 通常とドロップダウンの違いを確認してくださいjsfiddle

Answer 1

スライダーは、 or によってそれぞれ適用されている or を持つposition: relative;ものの中にいるのを好まないようです。position: absolute.btn-group.dropdown-menu

これに対する非常に悪い修正は、これらの css プロパティを削除することですが、おそらくバグです。

$(function () {
    $(".slider").slider();
});

.fix-position.btn-group,
.fix-position .dropdown-menu {
  position: initial !important;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>

<div class="container">
  <div class="row">

    <div class="col-xs-4">
      <h3>Working</h3>
      <input type="text" value="" class="slider"
             data-toggle="slider"
             data-slider-min="0" data-slider-max="100" 
             data-slider-step="1" data-slider-value="100" 
             data-slider-orientation="vertical" />

    </div>

    <div class="col-xs-4">
      <h3>Dropdown - Broken</h3>
      <div class="btn-group btn-group-sm">
        <button class="btn btn-default btn-sm dropdown-toggle"
                id="testDropdownMenu" data-toggle="dropdown">
          <b class="caret"></b>
        </button>

        <div class="dropdown-menu" aria-labelledby="testDropdownMenu">
          <input type="text" value="" class="slider"
                 data-toggle="slider"
                 data-slider-min="0" data-slider-max="100" 
                 data-slider-step="1" data-slider-value="100" 
                 data-slider-orientation="vertical" />
        </div>
      </div>
    </div>

    <div class="col-xs-4">
      <h3>Dropdown - Working</h3>
      <div class="btn-group btn-group-sm fix-position">
        <button class="btn btn-default btn-sm dropdown-toggle"
                id="testDropdownMenu" data-toggle="dropdown">
          <b class="caret"></b>
        </button>

        <div class="dropdown-menu" aria-labelledby="testDropdownMenu">
          <input type="text" value="" class="slider"
                 data-toggle="slider"
                 data-slider-min="0" data-slider-max="100" 
                 data-slider-step="1" data-slider-value="100" 
                 data-slider-orientation="vertical" />
        </div>
      </div>
    </div>
    
  </div>
</div>