Maybe this is a basic question, if I copy the below code into a <div class="main-container"></div> the window will show the horizontal scroll, but if the code goes to a <div class="content-area"></div> then I have the expected behavior.
<div class="clr-row">
<div class="clr-col-4">
<span>4</span>
</div>
<div class="clr-col-6">
<span>6</span>
</div>
<div class="clr-col-2">
<span>2</span>
</div>
</div>
e.g. the .clr-row must be only used inside a content-area ?
I'm using Angular 9 with Clarity Design 3.0.0-next.8.
Thank you for any hint.
Yes, you should use clr-row inside of the .content-area container element.
We disucuss application layout and how it fits with the variaous navigation patterns here: https://v2.clarity.design/app-layout
But its not explicitly called out to use the layout classes and apply them to elements inside of the content-area.
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'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 .
I have started work on a new project and decided to give Foundation 5 a bash to see what it's like. The first thing I noticed in the documentation when creating forms with horizontal fields is they use a large number of divs for styling. So I tried an example below (second example I tried it without divs):
<!-- Example with extra divs -->
<div class="row">
<div class="large-2 columns">
<label>Contact</label>
</div>
<div class="large-6 columns left">
<select></select>
</div>
</div>
<!-- Example without extra divs -->
<div class="row">
<label class="large-2 columns">Contact</label>
<select class="large-6 columns left"></select>
</div>
These both achieve the same thing with slightly different styling. I was wondering if anyone could explain why I would use the first one (follows foundation documentation) and not the other ... with less html! I am guessing it has something to do with how foundation is used and I am just not up to speed with it enough yet.
Thanks
Having <label> in <div> will give you lot of flexibility in styling. Defining a class for <label> will restrict your styling options. For a <div> you can define height, background color, border, width, background image, gradient fill, margins, padding, and lot more. Whereas giving <label> a class name would not let you do those styling. You could try it.
Basically, a <div> works as a box or container holding some content element in it, and that gives you lot of power and flexibility in styling. Whereas defining classes for content element doesn't give you that flexibility and power.
I'm an experienced software engineer just getting into web dev and I'm having some issues getting bootstrap 3 row-fluid to work correctly. Basically, I'm trying to get a side navigation bar and an angular application to work together in a fluid layout, but when I attempt to use row-fluid, it is stacking the two elements instead of putting them side by side. Here is the code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li class="nav-header">Administer</li>
<li class="active">Users</li>
<li>Devices</li>
</ul>
</div>
<div class="span9">
<div ng-view></div>
</div>
</div>
</div>
Also interesting is if I change row-fluid to row, the same behavior persists. Changing spanX to col-lg-X fixes it, but I lose the fluid layout. any ideas?
Use .col-md-* instead of .span*
Bootstrap 3 is responsive by default, so there is no need for the -fluid. you can just use row and container.
And the span classes you are using are from bootstrap 2.x not 3. you need to use something like col-lg-4 or col-xs-4. check out the bootstrap 3 docs for more info on this.
See here for more info on the Bootstrap 3 grid system
I am currently testing out Blueprint to create the layout for a site. So far it has been going great, but now I've run into a problem I'm wondering if there is any elegant solution to.
I am using the default 24 column layout and have a situation where I would like to do something similar to:
<div class="span-8 box">..</div>
<div class="span-8 box">..</div>
<div class="span-8 box last">..</div>
Problem is that the box-class adds a padding which causes the three div's to not fit into the 24 columns.
One "solution" is to use span-7 instead for all three, but this doesn't fill the entire width.
Any ideas?
You can use the class this way:
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8 last">
<div class="box">..</div>
</div>
You could change the "span-7" css rule:
...
.span-7 {width:274px;}
...
And change the divs to "span 7".
Simplest thing I could think of :)
jsFiddle example.