I have the following code:
<div class="row">
<div class="large-12 columns">
<div class="item">ITEMS GO HERE</div>
<div class="item">ITEMS GO HERE</div>
... many .item here ...
</div>
</div>
Each .item would have a fixed width, say 150px. I want the div large-12 to be scrollable if there are more .item that it can fit within the current screen. How can I do that? Currently, if I add too many .item, then they go to the next line!
Thanks
You'll need to add an overflow-x:scroll; and white-space:nowrap; to the parent container. And a display:inline-block; to the .items.
Here's a working demo.
Related
<div class="row align-middle">
<div class="small-4 columns">
<div></div>
</div>
<div class="small-4 columns">
<div></div>
</div>
<div class="small-4 columns">
<div>I want to be on the right edge of the parent .row</div>
</div>
</div>
I have the above.
I want the div that's in the third .columns div to be aligned to the right (so that it would look the same as if I put text-align: center on the third .columns div).
I know a way to do so - by putting another .row div inside that column and giving that .row another class of align-right and putting then another .columns inside of that row - but this would result in an unnecessary amount of HTML and I assume Foundation must have provided me a way (another CSS class that I can't find in the docs) of achieving my goal without further HTML than is above.
How do I do this? Or do I have to put another row and column inside that third column?
.columns doesn't have display: flex so I can't put align-right on the column - won't work. Or are .columns meant to have display:flex and I'm just experiencing a bug or otherwise an issue I've possibly created somewhere?
Thanks
if you are using the 6.5 version of foundation, then the following replacements in code would do what you expect
<div class="grid-x">
<div class="small-4 cell">
<div></div>
</div>
<div class="small-4 cell">
<div></div>
</div>
<div class="small-4 cell">
<div>I want to be on the right edge of the parent .row</div>
</div>
</div>
But if you really don't want to use the grid-xy classes, then you can keep your code and use instead foundation 5.5. I hope this helps!
Im currently using Foundation 6.3.1 and stuck on overriding nesting column to full container width.
Here is what I am trying to do:
<div class="row container">
<div class="column small-8">
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
<div class="row expanded">
<div class="column full">
Full screen width content
</div>
</div>
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
</div>
</div>
https://codepen.io/maca1016/pen/QgobrJ
I need the "Full screen width content" area expanded to full width of the browser window. If possible I want to achieve this through the framework. Rather not use position: absolute; for solution.
I think you need to override the container's width declaration for this section, and force the content to be larger than it's container. I forced it with an inline style and it worked in the pen, but you may want to clean it up and add a class for this, or an ID if it is just a one off use.
<div class="row expanded">
<div style="width:150%!important;" class="column full">
Full screen width content
</div>
</div>
https://codepen.io/anon/pen/JJzJQv
Is there any special reason for that .row.container wrapping it all?, I think the solution is clearly taking the items you need full width (the .row.expanded and its children) out of that container, without making adding anything else.
Hope this helps.
I have a very simple code with Foundation CSS
<div class="row">
<div class="large-offset-1 large-6 columns">Content goes here</div>
<div class="large-4 end columns">Side goes here</div>
</div>
I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.
Doesn't Foundation provide a solution for this?
try this (it makes a full width div inside the other, automatically adding margins)
<div class="large-4 medium-6 small-12 columns">
<div class="large-24 columns">
... content ...
</div>
</div>
You could try this:
<div class="row">
<div class="large-offset-1 large-6 columns padded-column">
<div class="column-content">Content goes here.</div>
</div>
<div class="large-4 end columns padded-column">
<div class="column-content">Side goes here</div>
</div>
</div>
Then, for styles:
.padded-column {
padding: 10px;
}
.column-content {
background: red;
}
I had a similar issue that couldn't be resolved with padding. Since Foundation 5 isn't IE8 compatible, I just used calc eg. width: calc(50% - 10px);
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.
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file