2017-05-22 10 views
0

私はリストを開いたときに滑らかなスライダを持っていますが、スライダで隠れています。私はslick.cssをチェックし、私はこれが見つかりました:ドロップダウンリストスライダで隠されていますhtml

$('.variable-width').slick({ 
 
    dots: true, 
 
    infinite: true, 
 
    speed: 300, 
 
    slidesToShow: 6, 
 
    variableWidth: true 
 
});
body { 
 
    background: #ccc; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    padding: 25px; 
 
    border: 1px solid #000; 
 
} 
 

 
.slider { 
 
    border: 1px solid #000; 
 
} 
 

 
.slider { 
 
    height: 80px; 
 
} 
 

 
.slider p { 
 
    background: #fff; 
 
    height: 75px; 
 
    border: 1px solid #ccc; 
 
}
<h2>Variable Width</h2> 
 
<div class="container"> 
 
    <div class="slider variable-width"> 
 
    <div style="width: 200px; color:red"> 
 
     <span> 
 
       <a class='dropdown-button btn white clickDrop' ng-click="clickS()" 
 
       data-activates='dropdownSkill' style="width: 295px">Drop Me!</a> 
 
          <!-- Dropdown Structure --> 
 
       <div id='dropdownSkill' class='dropdown-content'> 
 
        <input class="inputDropdown" ng-model="skillValue" style="margin-left: 5px"> 
 
        <ul class="" style="width: 300px" ng-repeat="skill in skillsFilter | filter: skillValue"> 
 
        <li ng-click="selectSkill(skill.SKILLID)" ng-model="skill.SKILLID">alyssa</li> 
 
        <li ng-click="selectSkill(skill.SKILLID)" ng-model="skill.SKILLID">mel</li> 
 
           </ul> 
 
          </div> 
 
      </span> 
 
    </div> 
 
    <div style="width: 200px;"> 
 
     <p>200</p> 
 
    </div> 
 
    <div style="width: 75px;"> 
 
     <p>75</p> 
 
    </div> 
 
    <div style="width: 300px;"> 
 
     <p>300</p> 
 
    </div> 
 
    <div style="width: 225px;"> 
 
     <p>225</p> 
 
    </div> 
 
    <div style="width: 175px;"> 
 
     <p>175</p> 
 
    </div> 
 
    <div style="width: 100px;"> 
 
     <p>100</p> 
 
    </div> 
 
    <div style="width: 200px;"> 
 
     <p>200</p> 
 
    </div> 
 

 
    </div> 
 
</div>

を私があふれ、すべての滑らかなスライドを削除すると、次のように示されています enter image description here は、私がここにフィドルを作った:http://jsfiddle.net/memvovkz/150/

事前に誰かが私を助けてくださいすることができ 感謝:)

答えて

0

子孫要素overflow: hiddenで常に要素によって切り取られます。 position: fixedの要素もあります。

スライダからドロップダウンを移動し、固定または絶対に設定できます。その後、「DROP ME!」のonclick必要な場所にドロップダウンリストの位置を設定して表示します。

正しい位置を取得するには、「DROP ME」のオフセットを使用できます

関連する問題