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!
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>
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'">
Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .
Related
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
I am working on a website using drupal. I have created a view with several fields. I want to set some if the field inline horizontally not not one after another vertically. Please help me in the context.
I want to set these ratings start , I'm interested button and Read More link in a row.
If you're familiar with html and css, you can create a new "Global: Custom Text" field.
Exclude the other fields from display, and use Replacement Patterns inside styled div-containers specified in the custom text field.
Little dirty example working with float:
<div style="width:50%;height:200px;float:left;">
<div style="width:100%;">Next div below me</div>
<div style="width:100%;">Previous div above me [somereplacementpattern]</div>
</div>
<div style="width:50%;height:200px;float:left;">
<div style="width:auto;float:left;">Next div on my right</div>
<div style="width:auto;float:left;">Previous div on my left<div>
</div>
Just wondering what exactly is the best practice for say, setting the height of a header in a responsive layout. Would you set it to the column, the row, or perhaps the element(s) nested inside the row. I know its a pretty basic question and there may not be a correct answer, but I am having trouble finding a consensus on this.
Is it best to use the framework in a completely detached way from other elements, eg, never add custom css to a row/col tag just use inner containers? What is preferred?
I usually let the content set the height.
<header>
<div class="container">
<div class="row">
<div class="span12">
<h1 class="padding_min-height_etc"><!-- h1 with a height / margin / padding etc -->
Although I have noticed others using classes set on the header itself.
<header id="overview" class="jumbotron subhead">
<div class="container">
<h1>Components</h1>
I was always taught to not use HTML tags to style content thought...
I've a little problem using bootstrap and adding dynamically element on my page.
I've a form where I lwant to dynamically add new inputs. All that work fine but the rendering is not that good because it seems that there is some missing margin padding between the label and the select.
I use bootstrap as main css.
Here is an exemple : http://jsfiddle.net/4Uf2U/1/
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select></div>
Does anyone have an idea why this happen and how to correct this ?
It is because of the select. The one that is not dynamic is formatted like so:
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select>
</div>
And the dynamic ones are one liners like so:
<div class="form-inline"><label>Label</label><select><option>Option</option></select></div>
So use one way and the style (appearance) will be the same.
Here is an updated jsFiddle: click
I'm using Twitter Bootstrap, but I'm having slight difficulties on a particular element.
Here is a 'Scaffolding' markup already provided by the interface, which I will use as an example.
<div class="row">
<div class="span6">
Level 1 column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Also, to help this case... There are 'Responsive utility classes', which you can check out here - http://twitter.github.com/bootstrap/scaffolding.html#responsive
So, what I am looking to do is simply change the class="span3" to, for example, class="span6" when I am using the 'responsive utility class' .visible-tablet.
Initially, I thought that it would miraclely automatically change to the 'max-width', but it didn't, unfortunately.
As #scumah pointed out, you're not going to change the class using CSS. For that you would use JS.
However, if you want to change the characteristics of a class (in this case span3) when it is contained in an element with a given class (here visible-tablet) that's just a matter of getting your CSS selectors working:
.visible-tablet .span3 {
width: 352px;
}
This would change the span3 to be identical to what is, by default, the width of a span6.
JSFiddle
However, all this seems a bit hackish, so you might want to reconsider what essentially you're trying to accomplish.