i have a problem with Foundation. I have four containers where to of them is shown as sidebar on the right on bigger screens. On smaller screens I want to weave them into the other content. My sections are as follows:
`<section class="column medium-8">
</section>
<aside class="column small-12 medium-4 authorDetails">
</aside>
<section class="column medium-8 small-12 shouldBeOnBottomOnSmall">
</section>
<aside class="column small-12 medium-4 authorDetails helloThere">
</aside>`
aside.helloThere gets pushed next to section.shouldBeOnBottomOnSmall on bigger screens. How can i fix that?
The columns work great for adding widths to your layout but you need rows to make it stay in place. The row is a wrapper for your columns.
<div class="row">
<section class="medium-12 columns">
http://codepen.io/rafibomb/pen/jPNRVK
BTW - if you are using tags, make sure you have a heading inside it.
Related
I have a Foundation-specific query and hoped you could help. I have a first row of two columns above a second row. I want the second (righ hand) column of the first row to fall beneath the second row in mobile format. I've looked into push/pull etc but I'm having difficulty switching columns between rows. Any ideas how this can be achieved please?
Thanks,
MK
This is not directly possible in the way you describe via Foundation's Push / Pull, as it is to reorder columns only (not rows and columns).
You could reconstruct your HTML to be just one row (this has other associated problems though), and then use Push / Pull
Or (more simply) employ the Visibility classes to show one row for small only and hide it for medium upwards and the other vice versa:
<div class="row">
<div class="small-12 medium-6 columns">
Top left
</div>
<div class="medium-6 columns show-for-medium">
Top right
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
Bottom
</div>
</div>
<div class="row">
<div class="small-12 columns show-for-small-only">
Bottom for small
</div>
</div>
This example in a jsfiddle.
I am encountering an issue with Jquery Mobile :
I want to display a grid of items using three columns. Each new item must be displayed next to the previous one and begin a new line after the third column.
To give you an example, I want something like this : JSFiddle
But my items have to be items from a splitButtonList (an icon with labels on the left and a clickable button on the right) instead of the blocks from the previous example.
The problem is : when I use the kind of code shown below, each new item is display at the bottom of the previous one, like in a list. I cannot manage to display it using my three columns grid pattern JSFiddle.
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere">
</div>
<div data-role="content" id="content">
<div class="ui-grid-b">
<ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview">
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
</ul>
</div><!-- /grid-b -->
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
</div>
</div>
</body>
Do you have any idea of what to do ? Using CSS maybe ? Any clue would be very precious for me. Thank you
How about this? JSFiddle
You were basically missing the 3 child containers of the grid:
<div class="ui-grid-b">
<div class="ui-block-a">Listview 1 goes here...</div>
<div class="ui-block-b">Listview 2 goes here...</div>
<div class="ui-block-c">Listview 3 goes here...</div>
</div><!-- /grid-b -->
So, as you can see you will need three different listview.
Hope this helps!
I'm working with Foundation 5, none of my own custom styles. I'm linking, in order, app.css, modernizr.js, jQuery, Fastclick, and foundation.min.js.
I have followed instructions in my tutorial ("Lynda: Up and Running With Foundation") and on the Zurb website for creating a nested row, but there's a problem: the last cell in the row always jumps itself over by a small amount, throwing off not just the text flow but the entire page layout. On mobile devices, this small nudge means that the page can be swiped side to side.
Here's a screenshot of what I'm talking about.
My HTML is
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
...text...
</div>
<div class="large-3 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-3 columns">
<h3>Buy From Us!</h3>
text
</div>
<div class="row">
<div class="large-3 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-3 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
What have I done wrong? I can't see any information on Google or StackOverflow about this, I've gone over the code carefully, I've torn it down and rewritten it from scratch following code samples... I just don't get what I've missed.
So, although using large-3 columns approximates the correct output you need a little bit different structure. There are many ways to do things, but the thing to remember, is that if you are using a grid or a nested grid, all the columns must add up to 12 columns total. In your case you have a nested grid that adds up to 6. This will give you inconsistant output unless you intent for part of the column to be empty. In that case you can use the .end presentational class to force it to float left.
Here is a set of nested grids that approximates what I think you are going for.
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
text
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-6 columns">
<h3>Buy From Us!</h3>
text
</div>
</div>
<div class="row">
<div class="large-6 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-6 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
</div>
I'm using the Foundation 5 framework and am trying to solve an issue I'm having. Let's say I've got a layout like so.
<div class="row">
<div class="large-15 columns">
<div class="large-9 columns">
</div>
<div class="large-6 columns">
<div class="large-3 columns">
<p>stuff</p>
</div>
<div class="large-3 columns">
<p>stuff</p>
</div>
</div>
</div>
</div>
How can I stop the .large-3 columns from nesting? I want each .large-3 column to take half of its parent column (.large-6). Is this possibly, or am I doing it wrong?
First off, Foundation grids are 12 units wide, so unless you have built a custom grid, and written custom CSS for it, large-15 isn't going to mean anything.
That being said, this will split the right hand column neatly in half, using a 12-unit grid. Every row in the grid has to add up to 12, no matter how deeply it is nested. If you laid out the necessary structure for a 15-unit grid, the same principle would apply, although it would be much more difficult to split things in half.
<div class='row'>
<div class='large-12 columns'>
<div class='large-7 columns'>
<p>stuff</p>
</div>
<div class='large-5 columns'>
<div class='large-6 columns'>
<p>stuff</p>
</div>
<div class='large-6 columns'>
<p>stuff</p>
</div>
</div>
</div>
</div>
I think you need block grid. http://foundation.zurb.com/docs/components/block_grid.html.
If you create block grid using class "small-block-grid-2" and with two "li" then both li will take half of the available width.
Also I show your last comment, if you don't need margin then add collapse class to "row" div.
I hope this helps.
Problem: Attempting to Create 6 centered tabs in a row, however because I can't keep all 6 tabs on the same row. It does center the tabs, however pushes 2 of the tabs one line below and leaves an extra empty cell on the first line.
I tried using small-centered and made no difference.
Version: Foundation 4
Browser: Chrome - Latest
Code
<div class="row">
<div class="large-6 large-centered columns">
<div class="section-container horizontal-nav" data-section="horizontal-nav" >
<section class="section">
<p class="title">Tab 1</p>
</section>
<section class="section">
<p class="title">Tab 2</p>
</section>
<section class="section">
<p class="title">Tab 3</p>
</section>
<section class="section">
<p class="title">Tab 4</p>
</section>
<section class="section">
<p class="title">Tab 5</p >
</section>
<section class="section">
<p class="title">Tab 6</p>
</section>
</div>
</div>
</div>
I don't think this is possible with Foundation 4 out of the box. By using large-centered, you are just centering the div containing the tabs and not the tabs themselves. The tabs will always align left.
The functionality you are looking for is available in button groups. For example button-group even-6 will fill the entire space. Maybe it is possible to use jQuery to use a button group instead or to take a look at the JavaScript source and see how Zurb is resizing those elements and apply it to your section / tabs.