CODEWITHSUNDEEP
csszurb-foundation
Robert Maxwell
Robert Maxwell

Reputation: 107

How to ensure Foundation CSS Grid Blocks Load Left-Center-Right?

I cannot figure out how to edit the Foundation stylesheet so that the dynamically-added blocks shown in the attached picture load from left to right. Currently, they load right-left-center. Any help is greatly appreciated. Image: https://i.sstatic.net/Arqy8.jpg

    <div ng-repeat="(photo_id, photo) in photos" class="large-4 columns">
    <row>
        <div class="panel" data-photo-id="{{photo_id}}">

            <p>
                <img ng-src="{{photo.image_url}}" width="350" height="300"/>
            </p>
                <ul class="small-block-grid-4">
                    <li><button class="tiny button" onclick="#">Sleep</button></li>
                    <li><button class="tiny button" ng-click="setIgnore(photo_id)">Ignore</button></li>
                    <li><button class="tiny button" onclick="alert({{photo.camera_id}})">Info</button></li>
                    <li><button class="tiny alert button" ng-click="setAlert(photo_id)">Alert</button></li>
                </ul>
        </div>
    </row>
</div>

Upvotes: 4

Views: 1053

Answers (4)

aaaaahaaaaa
aaaaahaaaaa

Reputation: 452

Use ng-class

<div ng-repeat="(photo_id, photo) in photos"
     class="large-4 columns"
     ng-class="{'end': $last}">

Upvotes: 0

davidmdem
davidmdem

Reputation: 3823

Travis was spot on with the problem.

Your solution can be to add the end class to each column.

<div ng-repeat="(photo_id, photo) in photos" class="large-4 columns end">

Upvotes: 1

Travis
Travis

Reputation: 12379

The Foundation Docs for Grid say...

In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior.

For example:

<div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
</div>
<div class="row">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns end">3 end</div>
</div>

In your case, Angular is automatically repeating your div elements with this line:

<div ng-repeat="(photo_id, photo) in photos" class="large-4 columns">

I don't have any experience with Angular so I don't know how you could make the last element different but I assume there is a way to do that, and hopefully this gives you a good start.

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24713

I would do something like

p img {
    float:right;
}

Upvotes: 0

Related Questions