使用 bootstrap-slider 作为下拉菜单

Question

我正在使用 bootstrap-滑块（http://www.eyecon.ro/bootstrap-slider/) with vertical orientation. Everything is ok, except using it as a dropdown menu.When I move the slider after dropdown, it is not the exact position where I press.Is it a bug? See the different between the normal and the dropdown one on jsfiddle

Answer 1

看起来滑块不喜欢位于任何具有 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>

使用 bootstrap-slider 作为下拉菜单

Using bootstrap-slider as dropdown menu

twitter-bootstrap

bootstrap-slider