-1

I have a set of 70 square div elements within a container box (and 10 containers). I want to have a breakpoint at every 7th div element so i end up with 10 rows of 7 divs. The squares should have a thin margin. I have set the element width to 13.68571428571429% reseving the rest for the margin.

How can i achieve that the height adjusts to the width so i always get 7 squares in a row equal in width and height based on percentage?

Have tried Javascript but it renders too long with 700 squares. Flexbox seems to be compatible only on newer browsers (we still have decent amount of users on older browses).

Here is my html:

            <div class="wrapper">                   
                <div data-ng-repeat="square in [] | rangeFilter:1:70">
                    <div dir-square current-wrapper="{{wid}}" current-square="{{sid}}" class="square">
                        {{square}}
                    </div>
                    <div class="clearfix" ng-show="square % ctrl.Breakpoint == 0"></div>
                </div>      
            </div>
Yolo
  • 1,569
  • 1
  • 11
  • 16
  • how did the js look? You cannot do what you want with CSS only. – tribe84 May 01 '15 at 18:53
  • var width = element.width(); element.css('height', width); This would done within a angular directive on every of the 700 div squares – Yolo May 01 '15 at 18:55
  • see, that already would kill performance. You only really need to calc the size once and apply for all. I think in your scenario, you are calling the element.width 700 times, which is pretty expensive. – tribe84 May 01 '15 at 19:09

1 Answers1

0

If you have set breakpoints for the container (the width will not change). I suggest you calculate the px beforehand and set it using media queries. If that is not possible (you are using a fluid container) then you will need to use js. If you post the javascript code you have, there might be ways to optimize it.

tribe84
  • 5,432
  • 5
  • 28
  • 30