CODEWITHSUNDEEP
javascripttwitter-bootstrap-3nouislider
user1449249
user1449249

Reputation: 194

Javascript overlap with slider causing Bootstrap Column Issues

I'm trying to have a split between columns and a set of sliders that are laid on top of each other. The goal is to have the buttons display content via a collapse toggle while having the sliders movable with an image/number tooltip combo so I can have users see what they're dragging while getting the information about the various icons they're sliding. Here's what happens

THe issue.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="col-xs-6">
      <div class="spacer">
      <div class = 'slider' id='slider1'></div>
      <div class = 'slider' id='slider2'></div>
      <div class = 'slider' id='slider3'> </div>
      <div class = 'slider' id='slider4'> </div>
		</div>
	</div>
	</div>
	      <div class="col-xs-6">
      <div class="spacer">

      <button type="button" data-target="#ConditionOne" class="btn btn-default" data-toggle="collapse">Healthy</button>
         <div id="ConditionOne" class="collapse">
            None
	  </div>

      <button type="button"  data-target="#ConditionTwo" class="btn btn-default" data-toggle="collapse">Okay</button>
         <div id="ConditionTwo" class="collapse" >
            &lt;textarea id=&#34;conditionTwoInfo&#34; name=&#34;conditionTwoInfo&#34;&gt;Second Conditional Description&lt;/textarea&gt;
      </div>	
      <button type="button" data-target="#ConditionThree" class="btn btn-default" data-toggle="collapse">Not Okay</button>
         <div id="ConditionThree" class="collapse" >
            None
      </div>	

      <button type="button" data-target="#ConditionFour" class="btn btn-default" data-toggle="collapse">Dead</button>
         <div id="ConditionFour" class="collapse">
            &lt;textarea id=&#34;conditionFourInfo&#34; name=&#34;conditionFourInfo&#34;&gt;Final Conditional Description&lt;/textarea&gt;
         </div>
      </div>

How should I handle both the column issue as well as the button triggering issue as I assume they're tied together.

Upvotes: 1

Views: 214

Answers (1)

user1449249
user1449249

Reputation: 194

First what I did is get the height of the slider. From there I hardcoded the slider's height plus an offset 

.slidespace { height: 275px; //Can be whatever you want
            width: 100% }

Used it as a div:

 <div class="slidespace">     <div class = 'slider' id='slider1'></div>
      <div class = 'slider' id='slider2'></div>
      <div class = 'slider' id='slider3'> </div>
      <div class = 'slider' id='slider4'> </div>
    </div>

This gave me enough space to separate the two.

Upvotes: 1

Related Questions