title: Seiyria Bootstrap slider bar labels are not showing correctly in bootstrap modal
body: <p>I am using Seiyria Bootstrap slider bar as shown below. The problem is that when I click on the button to open the Bootstrap modal the slider labels are stacked on top of each other on the left as shown in the print screen. However, if I left or right click anywhere on the modal it shows it properly. In addition, I tried to use the example code outside the modal and it worked fine. I have got this example (Example 19) from this <a href="http://seiyria.com/bootstrap-slider/" rel="noreferrer">website.</a> Bootstrap <code>Version 3.3.7</code>.</p>
  
  <pre><code>&lt;div class="modal fade" id="exampleModalLong"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="form-group"&gt;
            &lt;span id="ex18-label-1" class="hidden"&gt;Example slider label&lt;/span&gt;
            &lt;input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["short", "medium", "long"]' data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button onClick="$('#exampleModalLong').modal();"&gt;click&lt;/button&gt;
  </code></pre>
  
  <p>The slider version:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is how the slider is shown when I click on the button to open the modal. </p>
  
  <p><a href="https://i.stack.imgur.com/0K5G6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0K5G6.png" alt="enter image description here"></a></p>
  
  <p>Expected Result - Also, When I click it is shown like this.</p>
  
  <p><a href="https://i.stack.imgur.com/zOfpR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zOfpR.png" alt="enter image description here"></a></p>
  
  <p>I have tried to inspect and fix the labels without any success. I would appropriate it if someone could tell me what I could possibly be doing wrong. </p>