Parte sovrapposta del suggerimento del dispositivo di scorrimento e la sua posizione nel plugin del bootstrap-slider

Question

Uso plugin Twitter Bootstrap 2.3.2 e bootstrap-slider nella finestra modale. Il problema è che parte del tooltip del cursore è sovrapposta dietro l'intestazione della finestra modale e ha una posizione errata.

Ho provato ad aggiungere questa regola, ma non ha aiutato.

.slider .tooltip{ 
    z-index: 1151 !important; 
} 

Vorrei fornire corrette jsfiddle, ma io non sono in grado di trovare bootstrap-cursore plug CDN. Ecco jsfiddle, che non funziona perché manca l'origine del plugin bootstrap-slider.

jsfiddle

html

<a href="#options" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<div id="options" class="modal hide fade"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3>Settings</h3> 
    </div> 
    <div class="modal-body"> 
     Vertex size <input id="nodeSize" data-slider-id='nodeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br><br> 
     Edge size <input id="edgeSize" data-slider-id='edgeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
     <button class="btn btn-primary" id="saveSettings">Save</button> 
     </div> 
</div> 

JavaScript

$(document).ready(function() { 
      $('#nodeSize').slider({ 
        formatter: function(value) { 
          return value; 
        } 
      }); 

      $('#edgeSize').slider({ 
        formatter: function(value) { 
          return value; 
        } 
      }); 
}); 

Answer 1

Aggiungi questo al vostro Javascript:

$("body").on("shown.bs.modal", function() { 
    $("#edgeSize").slider('relayout'); 
    $("#nodeSize").slider('relayout'); 
}); 

Spiegazione: Quando modale viene visualizzata la funzione Ridefinisci layout viene eseguito su entrambi i campi di input e rende di nuovo il tooltip dopo l'inizializzazione.

Fonte:https://github.com/seiyria/bootstrap-slider#functions

Aggiornato JSfiddle:http://jsfiddle.net/0sryor13/3/

Answer 2

Per z-index funzioni, l'elemento si sta applicando a deve avere posizione diversa statica, ad esempio

.slider .tooltip{ 
    position: relative; 
    z-index: 1151 !important; 
}