I want to acheive the following layout,
Desktop:
[----A---][-B-]
[-C-][-D-][-E-]
Mobile:
[----- A -----]
[---B--][--C--]
[---D--][--E--]
I can get 'B' to jump down to a new row in the mobile version and take up half the space, but I can't get it to share with 'C' - here is what happens:
[----- A -----]
[---B--]
[--C--][---D--]
[---E--]
How can I acheive the desired layout? I am using Zurb Foundation 4 framework.
The markup is as follows
<div class="row">
<div class="large-8 small-12 columns">
A
</div>
<div class="large-4 small-6 columns">
B
</div>
</div>
<div class="row">
<div class="large-4 small-6 columns">
C
</div>
<div class="large-4 small-6 columns">
D
</div>
<div class="large-4 small-6 columns">
E
</div>
</div>
Well as far as I see you can use following markup for your purpose (fiddle):
<div class="row">
<div class="large-8 small-12 columns">
A
</div>
<div class="large-4 small-6 columns">
B
</div>
<div class="large-4 small-6 columns">
C
</div>
<div class="large-4 small-6 columns">
D
</div>
<div class="large-4 small-6 columns">
E
</div>
</div>
Put everything in one .row.
Here's a demo.
Related
I'm using foundation (5) to layout my grid. Foundation uses equalizer to enable you to measure columns against each other. I'm using this to good effect but it only gets me so far...
When I nest my rows I get a gap - really I need a flexible height on the quote box that fills the gap(see image). I have tried using JS to match the height of the container's equalized value but it just grows the box continually when the window is resized.
Does anyone have any advice on how to expand a div's height in a fluid responsive way so that it's (absolute positioned) content grows with it?
<!-- START Tier One -->
<div class="row" data-equalizer="foo" data-equalizer-mq="large-up">
<div class="large-4 large-push-8 medium-12 medium-push-12 small-12 columns" data-equalizer-watch="foo">
<div class="row" data-equalizer="tierOne" data-equalizer-mq="medium-only">
<div class="large-12 medium-6 small-12 columns">
<!-- Video -->
</div>
<div class="large-12 medium-6 small-12 columns case-study-col">
<div class="card show-for-medium-up case-study-parent" data-equalizer-watch="tierOne">
<a href="/case-studies/">
<div class="card__case-study case-study-child">
<div class="card__case-study-img" style="background-image:url('img/image.jpg');">
</div>
<div class="card__case-study-content">
<blockquote class="">
"<perch:content id="quote_featured" type="textarea" />"
<cite>
<perch:if exists="quote_avatar_featured">
<img src="img/avatar.jpg">
</perch:if>
<div class="q-cite">
</div>
</cite>
</blockquote>
</div>
<div class="card__case-study-bg">
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="large-8 large-pull-4 medium-12 medium-pull-12 small-12 columns" data-equalizer-watch="foo">
<div class="card">
<div class="row collapse">
<div class="large-12 medium-6 small-12 columns">
<div class="row collapse">
<div class="large-5 medium-12 small-12 columns">
<!-- news image -->
</div>
<div class="large-7 medium-12 small-12 columns">
<!-- news text -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Teir One -->
I have product that I want to display in every four cols of materialize. How can I achieve that task using ng-repeat?
Content of main.html:
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1" ng-repeat="laptop in data">
<div class="card-content white-text">
<span class="card-title">{{laptop.name}}</span>
</div>
<div class="card-action">
{{laptop.Brand}}
</div>
</div>
</div>
</div>
Just put the ng-repeat on the col instead of the row..
<div class="row">
<div class="col s12 m4" ng-repeat="laptop in data">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">{{laptop.name}}</span>
</div>
<div class="card-action">
{{laptop.Brand}}
</div>
</div>
</div>
</div>
Example: http://www.codeply.com/go/3rRmpU0NC3
I have the following html in my Angular app:
<div class="row">
<div ng-repeat="Type in Types">
<div class="col s12 m6 l3">
<div class="class1" ng-click="Method1(Type.Id, Type.Desc)">
<div class="white-text">
<img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" />
<h3>{{Type.Desc}}</h3>
</div>
</div>
</div>
</div>
</div>
The above does its job displaying all the items in Types
Now I want to display a textbox and a button whenever there are no elements in Types. What would be the best way to do this?
You can try this:
<div class="row">
<div ng-if=" Types == null || Types.length == 0">
<!-- Your textbox / input button here-->
</div>
<div ng-repeat="Type in Types">
<div class="col s12 m6 l3">
<div class="class1" ng-click="Method1(Type.Id, Type.Desc)">
<div class="white-text">
<img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" />
<h3>{{Type.Desc}}</h3>
</div>
</div>
</div>
</div>
</div>
<div class="row" ng-show="Types">
<div ng-repeat="Type in Types">
<div class="col s12 m6 l3">
<div class="class1" ng-click="Method1(Type.Id, Type.Desc)">
<div class="white-text">
<img id="img_{{Type.Id}}" ng-src="./Images/{{Type.Desc}}" alt="{{Type.Desc}}" />
<h3>{{Type.Desc}}</h3>
</div>
</div>
</div>
</div>
</div>
<div ng-show="!Types">Button and Textbox go here</div>
or
<div ng-show="Types == null"> Button and textbox go here</div>
I have a div with sub divs to create a nested grid system.
There are three levels in total:
MainDiv - Always Visible
SecondDiv - Show or hide when clicked on MainDiv
ThirdDiv - Show or hide when clicked on SecondDiv
<div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
<div class="row">
<div class="col col-75" >
Department / Product Type
</div>
<div class="col col-25">
Qty
</div>
</div>
<div ng-repeat="item in departments | orderBy:'-qty'" style="padding:0px;margin: 0;">
<div class="row" ng-class-odd="'odd'" ng-class-even="'even'">
<div class="col col-75" style="padding:0;margin:0;">
{{item.departmentName}} - {{item.productTypeName}} - Need Click here
</div>
<div class="col col-25" align="center" valign="middle" style="font-size: 14px;font-weight:bold;padding:0;margin:0;">
{{item.qty}}
</div>
</div>
<div ng-repeat="style in item.styles" style="padding:0;margin: 0;">
<div class="row">
<div class="col" style="margin-left: 5% !important;border-top-width:0;border-bottom-width:0;">
{{style.styleNum}} ({{style.qty}}) - Need Click here
</div>
</div>
<div class="row" ng-attr-id="{{ 'level-2-' + $index }}">
<div class="col col-5" style="border:0"></div>
<div class="col col-5" style="border-left:0;border-bottom:0;border-right:0;"></div>
<div class="col col-25">Color</div>
<div class="col col-25">Size</div>
<div class="col">Product#</div>
</div>
<div ng-repeat="styleLine in style.details">
<div class="row">
<div class="col col-10" style="border:0;"></div>
<div class="col col-25">{{styleLine.color}}</div>
<div class="col col-25">{{styleLine.size}}</div>
<div class="col">{{styleLine.productNum}}</div>
</div>
</div>
</div>
</div>
</div>
Now I need to add a click event on the div to show hide the necessary nested divs.
Plunker: http://plnkr.co/z3RiV6cDFC6YjrbuqxN9
Generic example using ng-init and ng-click:
<div ng-repeat="obj in items" ng-init="show = false">
<div ng-click="show = !show"></div>
<div ng-repeat="sub in obj.children" ng-show="show">
<p>Hello World!</p>
</div>
</div>
So I'm trying to do this example from Zurb, but when I create the pie chart (even when I copy and paste the code they have to show the example), the chart goes crazy and tries to fill up the entire page. I know that it tries to take up the entire width of the element it's under, but then when I resize the width of the element, the chart only shrinks in size, but doesn't move back up, so ultimately, it's still taking up the entire space.
This is the main code:
<div style="margin-left: 15px">
<h4>Points: 3.75</h4>
<span>Rank 4</span>
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
</div>
My css which is under the head:
<link href="/res/css/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css"/>
And js which is on the bottom of the page:
<script src="/res/js/pizza.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/res/js/vendor/snapsvg.min.js"></script>
This is how it looks like:
Edit: Ok, so apparently when I name the id of the pie chart to 'donut', it works for some reason. I tested it by changing the ids, and only donut seems to work right now, but this won't work for me, because I have multiple pie charts needing to be shown.
Edit2: Seems like adding the style max-height: 480px seems to be a temporary fix.
`
Points: 3.75
Rank 4
<div class="progress success basic">
<span class="meter" style="width: 97%">Top: 97%</span>
</div>
<span>Tutored 7 times</span>
<span>Missed 2 tutoring sessions</span>
<div class="row graphs">
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example1">
<li data-value="60">Water Buffalo</li>
<li data-value="20">Bison</li>
<li data-value="12">Sheep</li>
<li data-value="32">Goat</li>
<li data-value="50">Shetland Pony</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-2 small-4 columns">
<ul data-pie-id="example2" data-options="{"donut":"true"}">
<li data-value="60">Pepperoni</li>
<li data-value="20">Sausage</li>
<li data-value="12">Cheese</li>
<li data-value="32">Mushroom</li>
<li data-value="50">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
<div class="large-10 small-8 columns">
<div id="example2"></div>
</div>
</div>
</div>
</div>
'donut' is in your code in data-options
Your css class 'large-10 small-8 columns' is not defined in the pizza.css, maybe you need another file like : foundation.css.
If you don't want to add that big file, try to replace or just create a new css class
<div class="large-10 small-8 columns">
<div id="example1"></div>
</div>
By
<div style="width: 200px; height: 200px;">
<div id="example1"></div>
</div>
or by the size that you want.