So, Can I create one <div class="row"> and push there columns? The total length of columns will be larger 12 units. Is it bad style and I should create row for every row?
It depends on the behaviour you want. If you have more than 12 columns in a row they will wrap on to the next line as it were
more than 12 columns in one row will wrap
<div class="row">
<div class="small-2 large-4 columns">. . .</div>
<div class="small-2 large-4 columns">. . .</div>
<div class="small-2 large-4 columns">. . .</div>
<div class="small-2 large-4 columns">. . .</div>
<div class="small-2 large-4 columns">. . .</div>
</div>
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 |
| | | |
-----------------------------------------------------------------------
| | |
| div4 | div5 |
| | |
-----------------------------------------------
equivalent in 2 rows
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-2 large-4 columns">...</div>
<div class="small-2 large-4 columns">...</div>
</div>
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-2 large-4 columns">...</div>
<div class="small-2 large-4 columns">...</div>
</div>
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
-----------------------------------------------------------------------
| | | |
| div1 | div2 | div3 | (row 1)
| | | |
-----------------------------------------------------------------------
-----------------------------------------------
| | |
| div1 | div2 | (row 2)
| | |
-----------------------------------------------
There is a bit more detail here Understanding Div classes in Foundation 4
Related
I have dict:
my_dict = {
'1': [],
'2': [],
'3': ['some_text'],
'4': ['some_text'],
'5': ['some_text'],
'6': [],
'7': ['other_text'],
'8': []
}
And I want to display this in template:
+--------+------------------------------+
| 1 | |
+--------+------------------------------+
| 2 | |
+--------+------------------------------+
| 3 | some_text |
+--------+ +
| 4 | |
+--------+ +
| 5 | |
+--------+------------------------------+
| 6 | |
+--------+------------------------------+
| 7 | other_text |
+--------+------------------------------+
| 8 | |
+--------+------------------------------+
For now I have:
{% for skey, svalue in sdict.items %}
<tr>
<td>
{{ skey }}
</td>
<td>
{% for val in svalue %}
{{ val }}
{% endfor %}
</td>
</tr>
{% endfor %}
and output:
+--------+------------------------------+
| 1 | |
+--------+------------------------------+
| 2 | |
+--------+------------------------------+
| 3 | some_text |
+--------+------------------------------+
| 4 | some_text |
+--------+------------------------------+
| 5 | some_text |
+--------+------------------------------+
| 6 | |
+--------+------------------------------+
| 7 | other_text |
+--------+------------------------------+
| 8 | |
+--------+------------------------------+
How to do it?
You could use the {% regroup %} tag with a converted version of your dictionary in conjunction with the {% ifchanged %} tag.
First, you'd need to convert your dictionary in your view to something that works with the {% regroup %} tag, for instance a list of dictionaries:
sdict_converted = [{"column_one": k, "column_two": v} for k, v in sdict.items()]
This can then be used in your template like so:
{% regroup sdict_converted|dictsort:"column_one" by "column_two" as grouped_sdict_converted %}
{% for group in grouped_sdict_converted %}
{% for item in group.list %}
<tr>
<td>
{{ item.column_one }}
</td>
{% ifchanged item.column_two %}
<td rowspan="{{ group.list|length }}">
{% for nested_value in item.column_two %}
{{ value }}
{% endfor %}
</td>
{% endifchanged %}
</tr>
{% endfor %}
{% endfor %}
I am using ionic 2 ion-item-sliding with ion-item and ion-item-options for swipping and show two buttons and text box as follows. My problem is when I click the text box which is in the ion-item-options list, whole component swipe back, so i cant enter any data inside the text box. How can i prevent swiping back until i enter data in text box?
<ion-item-sliding #item *ngFor="let order of orders">
<ion-item>
<div class="pending-order-list">
<div class="row custom-padding-xs custom-padding">
<div class="col-xs-3"></div>
<div class="col-xs-9">
<div class="panel-order-date">
<span class="list-label">{{ "pendingOrder.date" | translate }}</span>
<span class="list-input">{{ order.orderDate | date }}</span>
</div>
<div class="panel-order-number">
<span class="list-label">{{ "pendingOrder.orderNo" | translate }}</span>
<span class="list-input">{{order.orderNo}}</span>
</div>
</div>
</div>
<div class="row custom-padding-xs">
<div class="col-xs-3">
<span class="list-label">{{ "pendingOrder.customer" | translate }}</span>
</div>
<div class="col-xs-6 bold">
{{order.customer}}
</div>
<div class="col-xs-3 bold text-right">
{{order.sum | numberFormat}}
</div>
</div>
<div class="row custom-padding-xs">
<div class="col-xs-3">
<span class="list-label">{{ "pendingOrder.chain" | translate }}</span>
</div>
<div class="col-xs-6 ">
{{order.chain}}
</div>
<div class="col-xs-3 status">
{{order.status}}
</div>
</div>
</div>
</ion-item>
<ion-item-options side="right">
<div class="row custom-padding-xs">
<div class="col-xs-6">
<input type="text" name="" id="" class="input-custom" />
</div>
<div class="col-xs-3">
<button class="btn-small" (click)="confirmOrder(order)">{{ "pendingOrder.confirm" | translate }}</button>
</div>
<div class="col-xs-3">
<button class="btn-small black">{{ "pendingOrder.reject" | translate }}</button>
</div>
</div>
</ion-item-options>
While Designing website layout using foundation css,if i use grid system as bellow within the div with class row.its giving more space at left and right as in the Image.
The Code I am using is as bellow within the div with class="row"
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
Here I need just 5-7% space both at left and right side.How to achieve this by using foundation?
You can use Centered Columns in Foundation to do this.
Small-1 row takes up 8.3333% so by the below html you can have space of 4.166% on the right and on the left.
<div class="row">
<div class="small-11 small-centered columns">
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
</div>
</div>
Here is a fiddle-link
If I understood you correctly you want something like this http://jsfiddle.net/Tb9Vg/1/ But it has nothing to do with the Foundation itself.
html:
<div class="wrap">
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
</div>
css:
.wrap{
padding-left:7%;
padding-right:7%;
}
.columns{
height: 500px;
background-color:blue;
}
.row ( margin-left:auto; margin-right:auto; width : 30em;}
The margin-left and margin-right centers your element, and with width property you can set the size of your element as big as you like (30 is just an example). The benefit is that when you resize the screen, it retains distance from both sides.
We need to change the width of class "row" of a foundation as much as we need.thats it we will get space at both left and right side.
I have in template this:
{% for item in items %}
{% ifchanged item.st2 %}
<div class="clear"></div>
<div class="item-title">{{ item.get_st2 }}</div>
{% endifchanged %}
<div class="cell {% cycle 'clear tco1' 'tco' 'tco' 'tco2' 'clear tce1' 'tce' 'tce' 'tce2' %}">{{ item.name }}</div>
{% endfor %}
and it shows things like this:
------------------ st2 name 1 -------------------
+-----------------------------------------------+
| grey item | grey item | grey item | grey item |
+-----------------------------------------------+
| dark item | dark item | dark item | dark item |
+-----------------------------------------------+
| grey item | grey item | grey item | grey item |
+-----------------------------------------------+
| dark item | dark item | dark item | dark item |
+-----------------------------------------------+
| grey item | grey item | grey item | grey item |
+-----------------------------------------------+
------------------ st2 name 2 -------------------
+-----------------------------------------------+
| grey item | grey item | grey item | grey item |
+-----------------------------------------------+
| dark item | dark item | dark item | dark item |
+-----------------------------------------------+
and its good.
But if items on st2 name is less than 4 in one line:
------------------ st2 name 1 -------------------
+-----------------------------------------------+
| grey item | grey item | grey item | grey item |
+-----------------------------------------------+
| dark item | dark item | dark item |
+-----------------------------------+
then next looks like this:
------------------ st2 name 1 -------------------
+-----------------------------------+
| grey item | grey item | grey item |
+-----------------------------------------------+
| dark item | dark item | dark item | dark item |
+-----------------------------------------------+
because cycle coutner is still on the fourth element.
How to reset cycle tag?
You can use cycle tag with silent keyword to declare the cycle but not produce the first value. By giving the cycle tag a name, using "as" you can insert the current value of the cycle wherever you’d like. Another cycle tag with name of the variable will move cycle to the next value independently. And divisibleby tag can be used to check for last in line item:
{% cycle 'clear tco1' 'tco' 'tco' 'tco2' 'clear tce1' 'tce' 'tce' 'tce2' as cellcls silent %}
{% for item in items %}
{% ifchanged item.st2 %}
<div class="clear"></div>
<div class="item-title">{{ item.get_st2 }}</div>
{% if not forloop.counter1|divisibleby:"4" %} {# im not tested it #}
{% cycle cellcls %}
{% endif %}
{% endifchanged %}
<div class="cell {{cellcls}}">{{ item.name }}</div>
{% cycle cellcls %}
{% endfor %}
Ugly, but it works:
{% cycle '1' '2' '3' '4' as cellcount silent %}
{% cycle 'tco1' 'tco' 'tco' 'tco2' 'tce1' 'tce' 'tce' 'tce2' as cellcls silent %}
{% for item in items %}
{% ifchanged item.st2 %}
{% if not forloop.first %}
{% if cellcount|add:0 == 2 %}
{% cycle cellcls %}{% cycle cellcls %}{% cycle cellcls %}
{% cycle cellcount %}{% cycle cellcount %}{% cycle cellcount %}
{% endif %}
{% if cellcount|add:0 == 3 %}
{% cycle cellcls %}{% cycle cellcls %}
{% cycle cellcount %}{% cycle cellcount %}
{% endif %}
{% if cellcount|add:0 == 4 %}
{% cycle cellcls %}
{% cycle cellcount %}
{% endif %}
{% endif %}
<div class="clear"></div>
<div class="item-title">{{ item.get_st2 }}</div>
{% endifchanged %}
<div class="cell {{ cellcls }}" style="{{ cellcount }}">{{ item.name }}</div>
{% cycle cellcls %}
{% cycle cellcount %}
{% endfor %}
I came across same problem and write small custom template tag (works in django 1.8):
from django import template
import itertools
register = template.Library()
class ResetCycleNode(template.Node):
def __init__(self, variable_name, cycle_node):
self.variable_name = variable_name
self.cycle_node = cycle_node
def render(self, context):
cycle_iter = itertools.cycle(self.cycle_node.cyclevars)
context.render_context[self.cycle_node] = cycle_iter
context[self.variable_name] = next(cycle_iter).resolve(context)
return ''
#register.tag
def reset_cycle(parser, token, escape=False):
args = token.split_contents()
if len(args) != 2:
raise TemplateSyntaxError("'reset_cycle' tag requires exactly one argument")
name = args[1]
if not hasattr(parser, '_namedCycleNodes'):
raise TemplateSyntaxError("No named cycles in template. '%s' is not defined" % name)
if name not in parser._namedCycleNodes:
raise TemplateSyntaxError("Named cycle '%s' does not exist" % name)
return ResetCycleNode(name, parser._namedCycleNodes[name])
And then use it in template like this:
{% cycle 'clear tco1' 'tco' 'tco' 'tco2' 'clear tce1' 'tce' 'tce' 'tce2' as cellclass silent %}
{% for item in items %}
{% ifchanged item.st2 %}
<div class="clear"></div>
<div class="item-title">{{ item.get_st2 }}</div>
{% reset_cycle cellclass %}
{% endifchanged %}
<div class="cell {{ cellclass }}{% cycle cellclass %}">{{ item.name }}</div>
{% endfor %}
This is an old question, but as of Django 1.11 there is a built-in tag, resetcycle that appears to do what OP wants.
How can I make a grid with more than 12 columns? I'd like to make a grid to represent 24 hours in a day in half hour increments (total of 48 columns).
<div class="row display">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
</div>
You can simply use a nested Grid.
First you divide your row into 2 columns. Than you place your 12 hours into each section:
<div class="row">
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">2</div>
<div class="small-2 large-1 columns">3</div>
<div class="small-2 large-1 columns">4</div>
<div class="small-2 large-1 columns">5</div>
<div class="small-2 large-1 columns">6</div>
<div class="small-2 large-1 columns">7</div>
<div class="small-2 large-1 columns">8</div>
<div class="small-2 large-1 columns">9</div>
<div class="small-2 large-1 columns">10</div>
<div class="small-2 large-1 columns">11</div>
<div class="small-2 large-1 columns">12</div>
</div>
</div>
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">13</div>
<div class="small-2 large-1 columns">14</div>
<div class="small-2 large-1 columns">15</div>
<div class="small-2 large-1 columns">16</div>
<div class="small-2 large-1 columns">17</div>
<div class="small-2 large-1 columns">18</div>
<div class="small-2 large-1 columns">19</div>
<div class="small-2 large-1 columns">20</div>
<div class="small-2 large-1 columns">21</div>
<div class="small-2 large-1 columns">22</div>
<div class="small-2 large-1 columns">23</div>
<div class="small-2 large-1 columns">24</div>
</div>
</div>
</div>
You can customize Foundation on this subpage of Zurb, and you can set 48 columns for yourself. Then you can use large classes from .large-1 to .large-48, and small classes from .small-1 to .small-48.
After searching for something similar, finally figured out how to do this with foundation's mixins.
In another scss file you can create your custom class as follows. This only implements the coding for the "large-x" sub class for this parent class. I reset the total-columns variable to 12 just in case.
#import "foundation/components/grid"
.customClassName {
$total-columns:24;
#include grid-row();
#include grid-html-classes($size:large);
$total-columns:12;
}
This gives me a 24 column grid that I can place anywhere without overwriting the defaults for foundation in the project.
There a most likely multiple solutions to this. I tried the solution from Jay, and it does not work - not sure why? So I discovered another solution - there's a function in Foundation that can be used.
Let's assume that you're outputting the alphabet A-Z as a list:
<ul>
<li class="grid-26">A</li>
...
<li class="grid-26">Z</li>
</ul>
In your SCSS, create your class and call the grid-calc function:
.grid-26 {
width: grid-calc(1, 26);
}
This will return a width which equals 1/26 or 3.84615%
Dress up the SCSS so that each li floats and the text is centered:
.grid-26 {
width: grid-calc(1, 26);
float: left;
text-align: center;
}