AngularJS + Bootstrap: Two col-xs-6 columns will not align

Question

I've wasted 4 hours on this. I have four objects in four columns. When the view becomes small, I have a 6-width column instead of a 3-width. They refuse to go side-by-side, and no clearfix class placement has fixed it. Firefox and Chrome.

<div class="row" ng-controller="LocationsMainPageController as locMainCtrl">
    <div class="col-md-3 col-xs-6" ng-repeat="loc in locMainCtrl.locations">
        <img class="img-responsive img-thumbnail"
             ng-src="{{ loc.images['0'].image }}"
             alt="{{ loc.raw }}">

        <h2>{{ loc.raw }}</h2>

        <p class="hidden-xs">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies
            vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
            cursus magna.</p>

        <p><a class="btn btn-default" href="#" role="button">Go Here! &raquo;</a></p>
    </div>
    <!-- /.columns -->
</div>
<!-- /.row -->

As you can see, I have looped through the objects with AngularJS. I can't think of why this would matter, but just in case! Here's a picture - no rep so I can't post it directly. Sorry.

https://i.sstatic.net/1PJRg.jpg

Can anyone help? Certainly I'm not the only one??

Please provide a Plunker example. This will assist to see what CSS?JS you are using (AnguarlJS, Bootstrap). Also, please advise, are you using Bootstrap or UI-Boostrap (For Angular)? Please see scotch.io/tutorials/… — Brian Gerhards
– Brian Gerhards, Commented Jul 15, 2015 at 1:07
It appears to be because Zanzibar is taller than Split, so Phuket isn't floating all the way to the left. This can be combatted by setting a fixed min-height on each div, or by clearing every odd column. Can you post the final HTML+CSS in a fiddle so that we can look at it? — Jared
– Jared, Commented Jul 15, 2015 at 1:07
Hi, this is just a case of you images being different sizes, you could try resizing all your images to a uniform size. By the way.... the image you show of Split, it is actually a picture of Dubrovnik. — AngularJR
– AngularJR, Commented Jul 15, 2015 at 3:06
Haha - you can't see, but the "Split" image is actually named Dubrovnik.jpg. Development pics! I will post a Plunker ASAP tomorrow. In the meantime, it's default everything for jQuery, Bootstrap 3.3.5 and no custom CSS. If I fix it with one of the suggestions below I'll post a Plunker with the solution for posterity. — PANDA Stack
– PANDA Stack, Commented Jul 15, 2015 at 4:46

Daniel Cottone · Accepted Answer · 2015-07-15 01:37:37Z

1

Ah, I've run into this problem before. The cause is that the image heights are not all the same, causing the grid to get messed up. The fix is simple, just give the image a fixed height. Stick this in your css:

.thumbnail img {
  min-height: 150px;
  height: 150px;
}

And add the thumbnail class to the parent div:

<div class="thumbnail col-md-3 col-xs-6" ng-repeat="loc in locMainCtrl.locations">

edited Jul 15, 2015 at 1:37

answered Jul 15, 2015 at 1:11

Daniel Cottone

4,52029 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed Salem Lamiri · Accepted Answer · 2015-07-15 10:34:17Z

0

I have faced a similar problem before, try to create your 4 blocks this way :

<div class="row row-centered" ng-controller="LocationsMainPageController as locMainCtrl">
   <div class="col-md-3 col-xs-6 col-centered" ng-repeat="loc in locMainCtrl.locations">
   </div>
</div>

and add this css classe

.row-centered {
   text-align: center;
}
.col-centered {
  display:inline-block;
  float:none;
  /* reset the text-align */
  text-align:left;
  /* inline-block space fix */
  margin-right:-4px;
}

I have already tested it and it works, I hope it helps.

edited Jul 15, 2015 at 10:34

answered Jul 15, 2015 at 1:20

Mohamed Salem Lamiri

6,1176 gold badges38 silver badges48 bronze badges

Comments

PANDA Stack · Accepted Answer · 2015-07-15 17:21:32Z

Thanks to you all many times over for the help and inspiration. Special thanks to @Jared for his suggestion of adding the clearfix div based on $index. This is an area I didn't know about in AngularJS, and your suggestion helped me research it.

Here is the solution I came up with.

      <!-- Four columns below the carousel -->
<div class="row" ng-controller="LocationsMainPageController as locMainCtrl">
    <!-- Wrapper Div -->
    <div ng-repeat="loc in locMainCtrl.locations">
        <div class="col-md-3 col-xs-6">
            <img class="img-responsive img-thumbnail"
                 ng-src="{{ loc.images['0'].image }}"
                 alt="{{ loc.raw }}">

            <h2>{{ loc.raw }}</h2>

            <p class="hidden-xs">Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor
                id nibh ultricies
                vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
                cursus magna.</p>

            <p><a class="btn btn-default" href="#" role="button">Go Here! &raquo;</a></p>
        </div>
        <!-- Clearfix Div -->
        <!-- $index is 0-based -->
        <div ng-if="$odd" class="clearfix"></div>
    </div>
    <!-- /.columns -->
</div>
<!-- /.row -->

As you can see, within an ng-repeat there is a property called $odd. There are others in the docs. By creating a surrounding div and accessing the $odd property with ng-if I was able to add the clearfix at an appropriate time.

Thanks again to all of you!

Collectives™ on Stack Overflow

AngularJS + Bootstrap: Two col-xs-6 columns will not align

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related