5

I use Twitter Bootstrap 2.3.2 and bootstrap-slider plugin in modal window. The problem is that part of tooltip of slider is overlapped behind header of modal window and has wrong position.

enter image description here

I tried to add this rule, but it didn't help.

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

I would like to provide correct jsfiddle, but I am not able to find bootstrap-slider plugin cdn. Here is jsfiddle, which doesn't work because bootstrap-slider plugin source is missing.

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;
                    }
            });
});
Matt
  • 8,195
  • 31
  • 115
  • 225

2 Answers2

2

For z-index to work, the element you are applying it to must have position other than static, for example 

.slider .tooltip{
    position: relative;
    z-index: 1151 !important;
}
Alizoh
  • 1,562
  • 1
  • 13
  • 16
  • 1
    Thanks for response, but the tooltip is still overlapped behind header of modal window – Matt Nov 08 '14 at 19:25
  • Have you checked to see if the parent confusing the modal content has an overflow hidden that maybe obscuring the tooltip? – Alizoh Nov 08 '14 at 19:27
  • 1
    Here is your problem, the modal-body element has overflow-y: auto; By removing that your tooltip will appear – Alizoh Nov 08 '14 at 19:36
  • 1
    @Zoheiry Thank you Zoheiry, the tooltip is visible now. – Matt Nov 08 '14 at 19:43
2

Add this to your Javascript:

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

Explanation: When modal is shown the function relayout is run on both input fields and renders the tooltip again after initialization.

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

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

5less
  • 902
  • 1
  • 9
  • 18