CODEWITHSUNDEEP
angularjsflexbox
bomba6
bomba6

Reputation: 579

Flexbox with AngularJS 1.5 components

I have components created with ng-repeat and I want them to be flex children:

<div style="display:flex; flex-wrap: wrap">
    <div ng-repeat="item in data" style="flex-basis: 30%">
        <my-component item="item"></my-component>
    </div>
<div>

Where my component's template is:

<div class="c">
    ...
</div>

It is kind of working, but the my-component items are not all in the same height as they would have been if they were simply divs.

I can workaround this by setting .c{height: 100%} but it messes up with the wrapping.

Can I acheive this behaviour with AngularJS 1.5 at all?

Attached codepen for repro: http://codepen.io/anon/pen/ENqvvO

Thanks!

Upvotes: 1

Views: 1144

Answers (1)

lenilsondc
lenilsondc

Reputation: 9800

The problem is that when using the component you have a new element wraping the div.c element, so that the flex behaviour doesn't bound the two elements of your css. Your example (from plunkr) without the component works because it doesn't have the my-component in between.

div.flex-container
    my-component // <- this guy is breaking off the flex connection
        div.c

In order to fix it you can style the tag my-component instead of .c so that the flex can be applied directly between div.flex-container and my-component.

Actually I recommend you to create a container component and an item component so that things are kept clear and solid.

For example:

<list>
    <list-item>Item 1</list-item>
    <list-item>Item 2</list-item>
    <list-item>Item 3</list-item>
    <list-item ng-repeat="item in items"> {{ item }} </list-item>
</list>

And also:

<gallery>
    <gallery-item ng-repeat="photo in photos">
        <photo img="photo "></photo>
    </gallery-item>
</galery>

Beautiful, isn't it? :{D

Upvotes: 1

Related Questions