This question is similar to one I asked earlier, but this time I am trying to achieve the layout using a different approach: grids, not block-grids.
I read ZURB's article on How to bridge rows in Foundation, but the end result deviates from my expectation. There is no margin between the first and the second row. So how do I get that margin to work, that you see in the picture at the article?
This is what I got so far: http://jsfiddle.net/NPUHy/
First approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 column">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-8 column">
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-1"/>
</div>
</div>
<div class="row">
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
<div class="small-6 column">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
Second Approach
<div class="row">
<div class="small-9 small-centered column">
<div class="row">
<div class="small-4 columns">
<img src="http://placehold.it/256x512&text=PANEL"/>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<img src="http://placehold.it/256&text=ROW-2"/>
</div>
</div>
</div>
</div>
</div>
</div>
add a class to the row div<div class="row custom">, and then add a padding to the class
.row .custom {
padding-bottom: 10px;
}
updated fiddle http://jsfiddle.net/NPUHy/1/
Related
I want to pass the value in the comment text area when the a tag is clicked.Is there any other methods to pass both the comment and rating into the get method.I saw some similar questions but the answers where suggesting to use hidden input field to pass the value.But in my case i want the rating number in the clicked tag too.so i won't be able to use the hidden input method.
<form method='post'>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Review</h4><br>
<div >
<textarea class="textarea p-3 w-100" placeholder="Write a review" cols = "40" rows="5"></textarea>
{{form.comment}}
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid py-4">
<div class="row">
<div class="col-lg-6 mx-auto mb-lg-0 mb-4">
<div class="card">
<div class="card-body p-4">
<h4 class="font-weight-bolder">Rating</h4><br>
<div class="rating rating2">
★
★
★
★
<a href="{% url 'ratings' 1 id %}" title="Give 1 star" data-value="1" type="submit">★
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
I'm trying to implement a "Count No. of Entries" and "Filtering" functionality to my List.js list, like in this example: Codepen. But in this implementation the list item data is part of the JS file itself and not of the HTML (what I would like to have). So I'm having problems "translating" this JS code for my list. What would I need to write in the JS file? Cf. Codepen Could you please help? 🙏
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Total Number:<span class="count"></span></p>
</div>
</div>
</div>
<div id="users">
<div class="container">
<div class="row">
<div class="col-md-12">
<input class="search form-control" placeholder="Search" />
<button class="sort btn btn-primary" data-sort="name">
Sort by name
</button>
<button class="sort btn btn-primary" data-sort="title">
Sort by title
</button>
<div class="tags">
<div>Filter by:</div>
<div class="tag filter" data-filter="Baseball">Baseball </div>
<div class="tag filter" data-filter="Kitties">Kitties </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group list">
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Alex</h4>
<p class="list-group-item-text title">Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Baseball</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="list-group-item">
<div class="col-md-10">
<h4 class="list-group-item-heading name">Dennis</h4>
<p class="list-group-item-text title">Super Leader</p>
</div>
<div class="col-md-2">
<div class="expertise">
<span class="expertise-label">Tags </span>
<p class="labels">
<span class="label label-default expertise">Kitties</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
</div>
</div>
</div>
I am struggling to get the layout sorted using the code below.
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 columns">
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-8 columns">
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-2 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
It produces the following.
I am trying to line up the bottom input with the one above (Project management).
Any ideas where I am going wrong?
Thanks,
John
Okay John,
It's a couple of things, first of all your bottom input is using 4 columns and the top input is only using 3 columns and secondly you are collapsing the gutters in your first row, but not collapsing them in the second.
You have a two rows, and within the top row you have nested smaller rows. You haven't nested any smaller rows in the bottom row that you have created. To get a little mathematical on you, the container for the first dollar sign is actually 1/6th of 1/3rd the screen width wide (or 1/18th), because you've nested a 2/12 column inside a 3/12 column. The second dollar sign is in a column 1/6th the width of the screen because it's in a 2/12 column. The reason that the top dollar sign doesn't fit in the second dollar sign 3 times has to do with extra width added by gutters.
But this will get it looking how you like:
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 large-offset-3 columns"><!-- add 'large-offset-3' to avoid any weirdness with this lining up in the future -->
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns"><!-- this row will take up nine columns -->
<div class="row collapse"><!-- collapsing this row will make it line up with the above collapsed row -->
<div class="small-12 columns"><!-- setting this to 12 will have it fill all of the parent 9 columns -->
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
</div>
</div>
<div class="large-3 columns"><!-- this takes up three columns and essentially matches the code for the the above row -->
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
Give that a go, be sure to read the comments I left in the html explaining everything. But basically you need to make sure that your using the same number of columns if you want things to line up, and if you collapse a row, you will need to collapse other rows that you want to line it up with.
I sometimes use columns as spacers, and so when there is no content, I don't want the column to collapse, which is the default behavior. Is there a built-in way to prevent empty columns from collapsing?
I know I can add some invisible div or something, but I'm asking if there's a standard way to accomplish this without resorting to hacks like that.
You can use offsets to create gaps:
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
I created a hacky style for this. Like so:
.row.no-collapse .columns {
min-height: 1px;
}
<div class="row no-collapse">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
I'll try to ask this here, because on Foundation forums I got no answer.
I'm making a mixed layout and I want to use Equalizer to make the first column and the second column the same height. The catch is that the second column is another grid layout. Inside that second grid, Equalizer works like a charm, but between the first and second column it does nothing. I've searched here and there are a lot of people with similar problems, but I did not found a solution for mixed layout, even with simple jQuery functions.
Anyone can help?
Here's the code:
<div class="row">
<div class="large-12 columns">
<div class="row" data-equalizer>
<!-- first column -->
<div class="large-2 small-2 columns">
<div class="panel" data-equalizer-watch>
<!-- here goes an image -->
</div>
</div>
<!-- second column -->
<div class="large-10 small-10 columns" data-equalizer-watch>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
</div>
</div>
</div>
I checked on version 5.2.2: you just cannot do this.
I looked at Foundation foundation.equalizer.js file,
this function is simply not suited for equalize an equalizer inside an equalizer.
In 5.2.2 version, at line 30, you can see how it select elements to equalize:
vals = equalizer.find('[' + this.attr_name() + '-watch]:visible')
There is no dinstinction between dom levels, it catches every data-equalizer-watch without looking for any data-equalizer inside a data-equalizer