0

I am using Angular-materialize to load and populate my materialize collapsible and everything is showing fine, and here is my code:

<div class="row">
    <ul class="collapsible popout" data-collapsible="accordion" ng-cloak>
        <li ng-repeat="issuedTicket in issuedTickets">
            <div class="collapsible-header" ng-cloak>
                <div class="col m2">
                    <p>{$ issuedTicket.full_name $}</p>
                </div>
                <div class="col m2">
                    <p>{$ issuedTicket.email $}</p>
                </div>
                <div class="col m1">
                    <p>{$ issuedTicket.total_amount $}</p>
                </div>
                <div class="col m3">
                    <p>{$ issuedTicket.purchace_time $}</p>
                </div>
             </div>
            <div class="collapsible-body" ng-cloak>
                <div class="col s12">
                    <div class="row">
                        <div class="col m4">Ticket Type</div>
                        <div class="col m4">Ticket Price</div>
                        <div class="col m4">Discount</div>
                    </div>
                </div>
                <div class="col s12" ng-repeat="ticket in issuedTicket.tickets">
                    <div class="row">
                        <div class="col m4">{$ ticket.type $}</div>
                        <div class="col m4">{$ ticket.price $}</div>
                        <div class="col m4">{$ ticket.discounted $}</div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

The problem is that I have another ng-repeat inside my "collapsible-body", and when I click to expand to see the data, the data is there but the "collapsible-body" has a height of 0 and the data is not inside the "collapsible-body".

Data loaded inside the collapsible shows fine

enter image description here

But when I click to expand this happens: enter image description here

Can anyone explain to me why is this happening and if there are any solutions to this problem?

Thank you

Emad
  • 346
  • 1
  • 6
  • 17
  • So is the problem that the expanded data is showing outside the .collapsible-body? – Siavas Oct 18 '16 at 08:06
  • @Siavas yeah basically that, when I click to expand, it shows the collapsible body animate and expand and then once the animation is finished the hight just goes to 0 – Emad Oct 18 '16 at 08:19
  • Can you put your snippet in a fiddle (or even SO snippet) so that I can see exactly what happens and give you an answer when the solution is working? – Siavas Oct 18 '16 at 12:29

0 Answers0