CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
Mrmartin
Mrmartin

Reputation: 105

Hiding and Showing Bootstrap Grid Columns

I'm trying to adapt bootstrap's standard practices to speed up some of my development but have a quick question related to showing and hiding cols.

I have the following simple layout

<div class="row" id="contactGrid">

<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>

</div>

When I use AngularJS to show/hide the Sidebar col I expect the Content col to stretch the entire width of the container but it doesn't it says at 'col-10'. Do I need to programmically change the class/width to col-sm-12 when I hide the sidebar?

Thanks for your help, I'm sure this is an easy one!

Upvotes: 3

Views: 7218

Answers (3)

Mrmartin
Mrmartin

Reputation: 105

Daniel,

Your answer is the reason I'm trying to learn the BS/NG style of UI. It's just knowling where the shortcuts begin and end. To polish it off I used a ternary expression in the ng-class. showFilterSidebar is my hide/show variable. Thanks Again!

<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">

Upvotes: 2

Soufiane
Soufiane

Reputation: 96

Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .

Upvotes: 0

Daniel
Daniel

Reputation: 3514

The element with the class col-sm-10 will always have 10/12 of the width of it's parent row. Therefore you need to update it on the fly, when your sidebar changes to hidden. As you already use AngularJS you might have a variable defining if your sidebar should be visible or not. This variable may also define your class conditionally for your content div.

<div class="row" id="contactGrid">
  <div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
  <div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>

Upvotes: 2

Related Questions