Equal spacing div's in a container

Question

Here is my example: http://jsfiddle.net/rtCP3/62/

I have 3 (or more!) div's I want to space equally in one container. When using angular with ng-repeat the styles are not being picked up. When I hardcode the exact same elements it works just fine.

Angular output:

<div class="container ng-scope" ng-controller="ParentCtrl">
     <!-- ngRepeat: item in list -->
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item1</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item2</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item3</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item4</div>
     <span class="stretch"></span>
</div>

Hardcoded:

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <span class="stretch"></span>
</div>

I based this on this stackoverflow question: Fluid width with equally spaced DIVs

I was able to make the boxes much closer together (without any other obvious issues) by removing the text justification CSS. — James M, Feb 28 '13 at 16:38
That's not what I want though, see the link to the other stackoverflow question. — Mathew Berg, Feb 28 '13 at 16:51

James M · Accepted Answer · 2013-02-28T16:55:42.330

3

This works. I'm not sure why, but it spaces it the same:

 <div class="container" ng-controller="ParentCtrl">
     <span data-ng-repeat="item in list">
         <div class="box">{{ item.name }}</div>
     </span>
     <span class="stretch"></span>
 </div>

Maybe someone else can explain why that works, but in your fiddle repeating on the span element but with the box class inside made both implementations look the same.

edited Feb 28 '13 at 16:55

answered Feb 28 '13 at 16:46

James M

480
3
6

1

+1. I don't understand why this works / why it wasn't working to begin with but it solves the problem. – Jay Feb 28 '13 at 16:49
Matthew, remove your text justification CSS as well. Then it works: http://jsfiddle.net/wagedomain/wtWV6/ – James M Feb 28 '13 at 16:51
Here is the fiddle the I modified to test it out, http://jsfiddle.net/SC34z/ (Chrome Version 25.0.1364.97). – Jay Feb 28 '13 at 16:52
Ah, in the html you posted you didn't put the span class="Stretch" Can you add that in and i'll accept it? Thanks a ton! – Mathew Berg Feb 28 '13 at 16:54
Sure. I actually removed the span = stretch from my fiddle and changed the CSS for the same effect, but I can add it back in. – James M Feb 28 '13 at 16:55

score 1 · Answer 2 · answered Feb 28 '13 at 18:44

1

A comment in the SO question you reference says

It took me 3h to find that you should have spaces between each boxes in the html. 'Justify' extends spaces between the elements and if your content is <div/><div/><div/> it does not work. You need to have <div/> <div/> <div/>.

I believe ng-repeat doesn't put any spaces between its output, so all the divs are right up against each other, causing the problem.

You could create your own ng-repeat-like directive that would add a space.

answered Feb 28 '13 at 18:44

Mark Rajcok

362,217
114
495
492

Wow... I never even thought to look at that. In my inspections of the dom I just saw them in the correct order. I'll keep this idea in the future. – Mathew Berg Feb 28 '13 at 19:11

Equal spacing div's in a container

2 Answers2

Linked