Menu icon Foundation
Issues with Flex Grid in 6.2.3

Hello. I've noticed that the columns are behaving differently in mobile devices in this version, particularly iPads and iPhones (haven't tested on Android). Everything works perfectly fine in the desktop, the problem only happens when I tested the websites on iPads and iPhones.

This only happens when I use flex-grid, on non-flex grid the problem isn't there.

Normally, something like this would work fine on the iPhone or iPad (with version 6.2.0):

<div class="row">
	<div class="small-12 column">
		<h1>Hello!</h1>
	</div>
</div>
<div class="row">
	<div class="small-3 column">
		<p>Uno</p>
	</div>
	<div class="small-3 column">
		<p>Dos</p>
	</div>
	<div class="small-5 column">
		<p>Tres</p>
	</div>
	<div class="small-1 column">
		<p>Cuatro</p>
	</div>
</div>

 

But in this version of FS, the last column is sent to the next line as it doesn't seem to fit the space.

To work around it I had to include the 'column' class in the 'rows' as well, and everything seems to work.

Is the 'column' class supposed to be used like this now? Or am I omitting something? This behaviour wasn't there in 6.2.0, which was the version I previously used. After upgrading I noticed my websites were all over the place, and ultimately found that it was the 6.2.3 version that is doing this.

The devices I used are an iPhone 6s and an iPad Mini 3. On both the alignment was off. As for the desktop, I tested it on Chrome 51.0.2704.103, and Firefox 47.0.1, on both the alignment seems fine.

Also, this is on a Ruby on Rails project, I normally call foundation files via scss like this:

 

@import 'foundation-sites/assets/foundation';

@include foundation-flex-grid;

In case you're wondering, why 'foundation-sites/assets/foundation'? I'm calling the files from assets in my vendor directory, installed via bower.

Thanks in advance.

foundation-sites

Hello. I've noticed that the columns are behaving differently in mobile devices in this version, particularly iPads and iPhones (haven't tested on Android). Everything works perfectly fine in the desktop, the problem only happens when I tested the websites on iPads and iPhones.

This only happens when I use flex-grid, on non-flex grid the problem isn't there.

Normally, something like this would work fine on the iPhone or iPad (with version 6.2.0):

<div class="row">
	<div class="small-12 column">
		<h1>Hello!</h1>
	</div>
</div>
<div class="row">
	<div class="small-3 column">
		<p>Uno</p>
	</div>
	<div class="small-3 column">
		<p>Dos</p>
	</div>
	<div class="small-5 column">
		<p>Tres</p>
	</div>
	<div class="small-1 column">
		<p>Cuatro</p>
	</div>
</div>

 

But in this version of FS, the last column is sent to the next line as it doesn't seem to fit the space.

To work around it I had to include the 'column' class in the 'rows' as well, and everything seems to work.

Is the 'column' class supposed to be used like this now? Or am I omitting something? This behaviour wasn't there in 6.2.0, which was the version I previously used. After upgrading I noticed my websites were all over the place, and ultimately found that it was the 6.2.3 version that is doing this.

The devices I used are an iPhone 6s and an iPad Mini 3. On both the alignment was off. As for the desktop, I tested it on Chrome 51.0.2704.103, and Firefox 47.0.1, on both the alignment seems fine.

Also, this is on a Ruby on Rails project, I normally call foundation files via scss like this:

 

@import 'foundation-sites/assets/foundation';

@include foundation-flex-grid;

In case you're wondering, why 'foundation-sites/assets/foundation'? I'm calling the files from assets in my vendor directory, installed via bower.

Thanks in advance.

Jean Christophe Huwette 8 months ago

Removing all .small-x .medium-x .large-x ... classes to the first column item fix the issue, so i tried this snippet and it works :

 

// Fix ios flex bug
.row {
  .column:first-child {
    flex: 1 1 0;
  }
}

Nod 4 months ago

Hello guys,

 

Is this issue fixed in Foundation 6.3.1?

I still have the bug and I have to use the Jean Christophe Huwette hack to fix it..

 

Thanks,