With the Flex Grid of Foundation 6, I'm trying to centrally align a child of a parent ele that has been centrally aligned with Foundation's 'align-center' class.
The parent .row uses Flex Box to align (justify) the content of its children. How do I apply central alignment to the ele on line 4, using the Framework?
Notes:
The 'align-self-center' on line 4 has no effect.
In-line styling used for sample/readability only.
Applying 'margin:auto' to line 4 resolves the issue, however would not in the case of using an img.
<section class="row expanded align-middle align-center" style="height: 100%;">
<div class="columns small-7 medium-4">
<h3 class="text-center">lakakakaka</h3>
<div class="align-self-center" style="height: 20px; width: 20px; background: pink;"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
In the case of using an img, applying a wrapper as a column and setting margin: auto also achieves the desired effect, but surely theres a better way to do this?
<section class="row expanded align-middle align-center" style="height: 100%;">
<div class="columns small-7 medium-4">
<h3 class="text-center">lakakakaka</h3>
<div class="row columns small-6" style="margin:auto">
<img src="..." alt="..." style="width: 100%;" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section>
By default, .row is a flex parent so .columns are flex children. To make a .column a flex parent so that it's children can be aligned, you need some CSS like
.align-middle {
display: flex;
align-items: center;
justify-content: center;
}
We wrote a lesson on this recently that will help https://zurb.createsend.com/campaigns/reports/viewCampaign.aspx?d=y&c=E5D5A5C6700B86DC&ID=3053EAAD5186C206&temp=False&tx=0
Related
I made a simple grid of two columns and two rows, was easy. But for the content inside it wasn't.
I have added snippet here, when I use grid-template-rows with auto or with 4 1fr it gives me sections that is identical in height according to biggest section.
What I want is 4 sections that shrinks when content is less, like in sections have only a number.
To clarify more, I want these parts with green background and very small content to shrink to fit the content only.
UPDATE 1: I added a photo to clarify what I want to achieve with this. You will notice that rows on right and left align together according to content.
The part with aqua color will make its content expand to fit the content, and the part with blue background with expand because the aqua background part is bigger.
I want these parts only expand when there is content only BUT I want both to expand with it or get smaller if there no content.
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
.grid-section{
background: blue;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.grid-section div:nth-child(1){
background: yellow;
}
.grid-section div:nth-child(2){
background: green;
}
<section>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
</div>
</section>
I just set the height with max-content. So the height is gonna fit the content dynamically.
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, 1fr);
grid-gap: 20px;
}
.grid-section{
background: blue;
display: grid;
grid-template-rows: repeat( 4, minmax(1px, 1fr) );
}
.grid-section div:nth-child(1){
background: yellow;
}
.grid-section div:nth-child(2){
background: green;
height: max-content
}
<section>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
</div>
</section>
Is this the result you want you to achieve? Simply used grid-auto-rows: auto; in .grid-section. More about grid-auto-rows.
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
.grid-section{
background: blue;
display: grid;
grid-auto-rows: auto; /* replaced grid-template-rows with this */
}
.grid-section div:nth-child(1){
background: yellow;
}
.grid-section div:nth-child(2){
background: green;
}
<section>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
</div>
</section>
UPDATED
If you need left and right blocks in each row to be the same height - you have to use one single grid element instead of two separated. This is the only way to synchronize each row height using CSS. Made one single grid with grid-auto-rows: auto;
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 1px;
}
section div {
background: cyan;
}
<section>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</section>
I'm building a website for a friend's film production company using Foundation 6. I created a top-bar navigation bar with his logo image above the top-bar and made them both sticky. It seems to work fine on large screens and small screens but if viewed on anything in between the logo separates from the top-bar. This is most evident when you stretch and squish the page.
I've tried to include the image in the top-bar div but it aligns it to the left and I haven't been able to align it to the top as it is currently. This is the first time I've worked with the sticky function in Foundation. I've looked through the Foundation docs, Google, and StackOverflow but haven't found anything quite like this.
This is my top-bar section.
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li>Home</li>
<li>Current News</li>
<li>Film/Media</li>
<li>Photography</li>
<li>Publicity</li>
<li>Misc</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
I would like the logo image and the navigation bar to look the way they do at larger screen sizes but minimize together to the point where the data-toggle kicks in instead of separating, as they are doing currently.
I was doing the tutorial here: https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6 and was trying the stretch here:
https://codepen.io/chrisoncode/pen/wMWEVE
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">space</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
body { padding-top:50px; }
.row { border:1px solid #FF556C; margin-bottom:20px; }
.columns { background:#048CB9; color:#FFF; padding:20px; }
.columns:first-child { background:#085A78;vertical-align:bottom }
.columns:last-child { background:#B3BBBB; }
On the 3rd example, using the stretch property, I am trying to get the text to vertically align middle and am having no luck. Can anyone tell me how to do it?
I tried adding .columns:first-child { background:#085A78;vertical-align:bottom } but that did not work.
HTML:
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">
<div class="row align-center text-center"><p>space</p></div>
</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
CSS:
div.row.align-stretch.text-center .columns {
display: flex;
justify-content: center;
align-items: center;
}
div.row.align-stretch.text-center .columns p {
margin: 0;
}
Flex children are equal height by default, unless you assign an align-items value other than stretch.
Therefor:
<div class="row align-stretch text-center">
Is the same as:
<div class="row text-center">
For your example, the simplest way is to use the .align-middle which will make the column the height of the content within and vertically center it to the taller column in the group.
Otherwise, you can make the column itself display: flex; and add align-items: center;
I'm trying to add transitions to a list of items where mouse over causes the item to expand by changing max-height.
The expand on mouse enter happens immediately but the mouse out transition is delayed.
jsfiddle https://jsfiddle.net/cawkie/u2eLh18f/2/
<html>
<head>
<style>
.inner {
border: solid 1px #000000;
width: 300px;
max-height: 30px;
overflow: hidden;
transition: max-height 10s linear 0s;
}
.inner:hover {
max-height: 10000px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Lorem ipsum dolor ....
</div>
<div class="inner">
Lorem ipsum dolor ...
</div>
</div>
</body>
</html>
Possibly not relevant, but the JS mouse-out event is immediate.
Am I missing something?
Is there a workaround?
If this is normal/intended - why?
I could use JS/jQuery but was trying not to :-)
If your not opposed to using Bootstrap, they have a really nice accordion implementation you could use the achieve this effect without writing your own Javascript. If you do want to implement it yourself, you can add their CDN link to your page, then use Chrome DevTools to inspect the CSS in the Sources tab. Just prettify it and Ctrl+F search for the relevant classes.
I've been using Foundation 5 for about a month, but I'm having trouble placing three images side by side without spaces. Any ideas please?
Here's the code prior to adding Foundation 5:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
margin: 0;
border: 0;
padding: 0;
}
.left {
float:left;
width: 15%;
}
.center {
float: left;
background:white;
width: 70%;
}
.main {
float:left;
width:70%;
}
aside {
float:left;
width:30%;
}
.right {
float: left;
width: 15%;
}
</style>
</head>
<body>
<div class="left"><img src="_images/topo_l.jpg" alt="topo map" /></div>
<div class="center">
<div class="header">
<h1>Header H1</h1>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p>
</div>
<aside>
<ul>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
<li>Aside li items here</li>
</ul>
</aside>
</div>
<div class="right"><img src="_images/topo_r.jpg" alt="topo map" /></div>
</body>
</html>
It looks okay at this point, but after I include Foundation (foundation.css, etc.) the code breaks.
I believe you're looking for Foundation's Block Grid feature.
http://foundation.zurb.com/docs/components/block_grid.html
You could also use the regular grid, and in the class="row", modify to something like class="row small-collapse". Example below.
<!-- BEGIN BLOCK GRID EXAMPLE -->
<div class="row">
<ul class="small-block-grid-3">
<li style="background-color:blue;height:100px;"></li>
<li style="background-color:red;height:100px;"></li>
<li style="background-color:green;height:100px;"></li>
</ul>
</div>
<!-- END BLOCK GRID EXAMPLE -->
<!-- BEGIN REGULAR GRID EXAMPLE -->
<div class="row small-collapse">
<div class="small-4 columns" style="background-color:blue;height:100px;"></div>
<div class="small-4 columns" style="background-color:red;height:100px;"></div>
<div class="small-4 columns" style="background-color:green;height:100px;"></div>
</div>
<!-- END REGULAR GRID EXAMPLE -->
The block grid uses ul and li tags, while the regular grid uses the traditional row and columns classes inside div.