स्लाइडर के टूलटिप का ओवरलैप्ड हिस्सा और बूटस्ट्रैप-स्लाइडर प्लगइन में उनकी स्थिति

Question

मैं मॉडल विंडो में ट्विटर बूटस्ट्रैप 2.3.2 और bootstrap-slider प्लगइन का उपयोग करता हूं। समस्या यह है कि स्लाइडर के टूलटिप का हिस्सा मोडल विंडो के शीर्षलेख के पीछे ओवरलैप किया गया है और इसमें गलत स्थिति है।

मैं इस नियम जोड़ने की कोशिश की है, लेकिन यह मदद नहीं की।

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

मैं सही jsfiddle प्रदान करना चाहते हैं, लेकिन मैं बूटस्ट्रैप-स्लाइडर प्लगइन cdn ढूँढने में सक्षम नहीं हूँ। यहां jsfiddle है, जो काम नहीं करता है क्योंकि बूटस्ट्रैप-स्लाइडर प्लगइन स्रोत गुम है।

jsfiddle

एचटीएमएल

<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> 

जावास्क्रिप्ट

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

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

Answer 1

अपने जावास्क्रिप्ट को यह करें:

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

स्पष्टीकरण: जब मोडल समारोह relayout दोनों इनपुट फ़ील्ड पर चलाया जाता है दिखाया गया है और प्रारंभ के बाद फिर से टूलटिप renders है।

स्रोत:https://github.com/seiyria/bootstrap-slider#functions

JSfiddle अपडेट किया गया:http://jsfiddle.net/0sryor13/3/

Answer 2

काम करने के लिए z- सूचकांक के लिए, तत्व आप इसे आवेदन कर रहे हैं स्थिर अलावा अन्य स्थिति होना आवश्यक है करने के लिए, उदाहरण के लिए

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