Menu icon Foundation
Foundation 5.0.3 .columns .end

So has the way this is working changed?

.end {
float: right !important; }

line 100

If the column is the last item in a row, and that row did not equal 12, you would use end. No?




Before it would float to the left. I manually change this in the foundation.css file to float:left

Please clarify what the reasoning behind the change is?
The end column now floats right

gridend

So has the way this is working changed?

.end {
float: right !important; }

line 100

If the column is the last item in a row, and that row did not equal 12, you would use end. No?




Before it would float to the left. I manually change this in the foundation.css file to float:left

Please clarify what the reasoning behind the change is?
The end column now floats right

Karl Ward over 5 years ago

I am not sure exactly what you are trying to do, but I believe these classes are not needed in Foundation 5. Foundation 5 uses pseudo-classes to assign float to :last elements, and this is supported in all modern browsers.

Chris Lusted over 5 years ago

Try using .start instead of .end

Had the same problem yesterday and found these in the _global.scss file.

// Miscellaneous useful HTML classes
    .left   { float: left !important; }
    .right  { float: right !important; }
    .clearfix     { @include clearfix; }
    .text-left    { text-align: left !important; }
    .text-right   { text-align: right !important; }
    .text-center  { text-align: center !important; }
    .text-justify { text-align: justify !important; }
    .hide         { display: none; }
    // Bidi counterparts to .left, .right, .text-left, .text-right
    .start { float: $default-float !important; }
    .end   { float: $opposite-direction !important; }
    .text-start { text-align: $default-float !important; }
    .text-end   { text-align: $opposite-direction !important; }

Fuzen Design over 5 years ago

Karl, in my case—and I'm running 5.0.3—not assigning a class does indeed float the column, but it floats it right (it moves the last column all the way to the right as the last column shown in the row) which is not the desired behavior I would think in most cases. I want it to stay put left.

Trevor's question is good. And Chris, thanks for pointing that out, but it really doesn't make sense to assign a class of "start" when in reality I'm telling it it's the "last" column in the row.

Was this an oversight on Zurb's part because I don't see "end" or "last" documented anywhere for version 5.

Karl Ward over 5 years ago

First of all, your columns should add up to the total amount of 12 columns ... If they do not, then it must be because you want some space somewhere. I can't see any other reason why you would not have the columns add up ... If so, you can use the offset class, which will help fill add up to 12 columns:

<div class="row">
  <div class="large-4 columns">1</div>
  <div class="large-4 large-offset-4 columns">2</div>
</div>

In the example above, the columns only add up to 8, but with the last column having an offset-4 class, it is aligned to the right and column-count correctly counts 12 including the offset.

Furthermore, you also got the -centered class and -pull -push classes to assist in columns layout within a row. I can't see any scenario where you won't have the column count add up to 12 including offset.

Rafi Benkual over 5 years ago

This was updated into master before 5.1 via PR https://github.com/zurb/foundation/pull/4206

You're best off updating to 5.1.1 for this feature.

Fuzen Design over 5 years ago

Karl, if you're responding to me then you don't understand what I've said. You come off very condescending. The push, pull classes have nothing to do with what we're trying to accomplish. Also, even Zurb has not been dogmatic about columns adding up to 12. That was precisely the point of the .end class going back to version 3.

Zurb has re-added the .end class back in so obviously someone (not just the two people inquiring about it in this thread) found the feature helpful.

Karl Ward over 5 years ago

Well, apologies if I come off as condescending. Personally, I would like to see a scenario where you need to use this class ...

Malou Geurts over 5 years ago

I don't know if this has changed since the new version, but the 5.1.1 responds just like described here: http://foundation.zurb.com/docs/components/grid.html (Incomplete Rows)

So I'm not really sure what your problem is. If this is the desired effect, but it doesn't function like the example, I suggest you update.

Steven Valladolid over 5 years ago

How about the use case where you have to loop through a list or array to dynamically create elements?

<div class="row">

<!-- for each logic to add:
      <div class="small-12 medium-6 large-4 columns"> content </div>
-->

</div>

While I know there are simple ways of adding rows after every nth element using the modulus operator for two responsive states, it gets vastly more complex when you need a grid with a third or fourth responsive state. In my experience the best method of handling this has been to wrap all of the items in a single row container regardless of whether the "columns" add up to 6, 12 or 144.

Javier Rincón over 5 years ago

In this case:

<div class="row">
    <div class="small-centered large-uncentered small-4 columns"></div>
    <div class="small-centered large-uncentered small-4 columns"></div>
    <div class="small-centered large-uncentered small-4 columns"></div>
</div>

the last column is positioned to the right, because to the

  [class*="column"] + [class*="column"]:last-child {
    float: right; }

rule of Foundation 5.1.1

I don't understand this rule. Must I tweak the code of Foundation to center all columns in small devices?

Marv Steigman about 5 years ago

A bit to late to this game, but, here is an example of where using less than 12 columns is an easy way forward: http://marvbox.com/less_than_12_columns.html

There are other, in some ways more correct, methods to accomplish the same thing but none as easy and clean as this. ( would remove the left padding on the images if this were for real)