Reputation: 3423
I have two divs
in my html page, side by side.
I want to click a button
and have the div
on the right toggle (show/hide) . So I use jquery and jquery's .toggle() method.
The problem is that when I toggle the right div the div on the left seems to move left and go half way off the screen. I went through the dev tools in Chrome and I think that it is bootstrap that is messing with my divs
So I think that I will have to write my own css
to override the bootstrap css but I'm not sure
Link to the FIDDLE that shows my problem.
Once the right div is hidden I would like the left div to then fill the screen. (Width wise)
FIX
Updated FIDDLE
Upvotes: 0
Views: 124
Reputation: 2686
Instead of using push-md-10
try instead using the regular col-md-12
as your restructuring
so if you want the divs to stay in place on the page you can have
<div class="col-md-10">
//Content to hide
</div>
<div class="col-md-2">
//content to hide
</div>
Now you can just hide the stuff in that column
Another example:
<div class="col-md-3"></div>
<div class="col-md-5"> something worth 5 pushed 3 over </div>
<div class="col-md-4"></div>
NOTE: you always want a factor of 12
because that constitutes a bootstrap row size
Upvotes: 1