I have a layout in mind that I'd like to look like this on a desktop monitor. It more or less works right now but I wonder if the 'D' and 'E' sections should be col-md-6 or col-md-3?
Desktop Layout
Also, (and this is where it gets interesting), on mobile I'd like it to be layed out like this:
Mobile Layout
Can one single layout work? I'm busy on the desktop layout but, yeah, everytime I switch to the mobile view things are not good. Therefore, I have a feeling my initial approach leaves something to be desired.
Solution code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-3">
<div class="row">
<div class="col-xs-12">
<section class="box">B</section>
</div>
<div class="col-xs-6">
<section class="box">D</section>
</div>
<div class="col-xs-6">
<section class="box">E</section>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-md-pull-6">
<section class="box">A</section>
</div>
<div class="col-xs-6 col-md-3">
<section class="box">C</section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box">F</section>
</div>
<div class="col-xs-6">
<section class="box">G</section>
</div>
</div>
</div>
Related
Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.
You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>
This is a simple question, but for some reason, I'm not getting the desired result.
Here's a snippet of the code inside my index.html file
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
</div>
<div class="row">
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
What I'm hoping will happen is that the sidebar will take up 1 column and the rest of it will take up the remaining columns. However, when I view the page, the sidebar and the content are shown stacked on top of each other. Am I not allowed to put a ui-view inside a div container?
Try to write 2 columns in same row:
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
I am working with the code below and trying to determine what makes the cols stack on one another. The code looks fine in desktop view, but when I look at it on mobile, the last two col-xs-12 stack together right on top of one another. Is there a break code to make it put a hard return between the two col's in mobile viewing?
<div class="panel panel-default">
<div class="panel-body2">
<div class="row vertical-align">
<div class="col-xs-6 col-sm-3">
<h5><small>Saturday<br>
</small>Feb. 13</h5>
</div>
<div class="col-xs-6 col-sm-3 text-right">
<h5><small>TCU<br>
</small>Horned Frogs</h5>
</div>
<div class="hidden-xs col-sm-3 text-left">
<img src="http://www.wvusports.com/content/images/graphics/logos/TCU.png" width="45">
</div>
<div class="col-xs-12 col-sm-3 text-center">
<span class="label label-warning"><i class="fa fa-ticket"></i> ON SALE SOON</span>
<div>
<img class="hidden-xs" style="padding-top:2px" src="http://www.wvusports.com/content/images/graphics/logos/Big12.png" width="25">
</div>
</div>
<div class="col-xs-12">
<div class="alert alert-success" role="alert">Family Day - $70</div>
</div>
</div>
</div>
</div>
I am trying to have a single-page Angular-App which has a view in the middle and tools like sidebar and topbar around that. But when the user is not logged in, the view should show a login partial and the side- and topbar should be hidden. As well as there should be a fullscreen background image. I got a working attempt, but it's rather ugly, so I wonder how I could do better:
<body ng-app ="MB">
<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid">
<!--fullscreen background when not logged in-->
<div ng-hide="$root.loggedIn" class="landing" ng-cloak>
</div>
<div>
<div ng-show="$root.loggedIn" class="row">
<mb-topbar></mb-topbar>
</div>
<div class="row">
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<mb-sidebar></mb-sidebar>
</div>
<!--view always visible, loads the login page as well-->
<div class = "col-sm-6">
<div ng-view></div>
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<div class="row">
<div mb-news-feed-dir></div>
</div>
<div class="row">
<div mb-quest-feed-dir></div>
</div>
</div>
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
</div>
</div>
</div>
...
</body>
I suggest you use ui-router and have a nested view to accomplish something like this in a more clean way without having to hide and show dom elements.
I am using ngRepeat angularjs to fill out a grid in bootstrap. The grid needs periodic clearfixes.
So, for example, if the grid is:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
<div class="col-md-4 col-sm-6">
foo bar
</div>
</div>
</div>
Is this accomplishable with ngRepeat? It seems that a structure like:
<div class="container">
<div class="row">
<div data-ng-repeat="i in [0,1,2,3,4,5]" class="col-md-4 col-sm-6">
foo bar
</div>
</div>
</div>
Couldn't get the clearfixes in there with the iterator.
Angular has an index property called $index when you're inside of the ng-repeat directive. You could use this to display your clearfix div when it is needed. If you want to shortcut it even more, you could use the $even or $odd (in your case, $odd) property to display it every two instances.
Combining the special ng-repeat-start and ng-repeat-end directives, you could do something like this to get at your required result:
<div class="container">
<div class="row">
<div ng-repeat-start="i in [0,1,2,3,4,5]" class="col-md-4 col-sm-6">
foo bar
</div>
<div ng-repeat-end ng-if="$odd" class="clearfix visible-sm-block"></div>
</div>
</div>
More Info: ng-repeat, ng-if
Here's a Plunker to show it's working: PLUNKER