<ons-list> expandable not working !!
-
hey guys…
I found out that this code:
<ons-list-header>Expandable</ons-list-header>
<ons-list-item expandable>
Tap to expand
<div class=“expandable-content”>Expandable content</div>
</ons-list-item>(copied from onsenui website) is not working. Could you guys help me please?
-
That code looks correct. Make sure that code is inside an
ons-listelement.What version of Onsen UI are you using? Expandable list items were introduced in 2.10.0.
You can also test the code in https://onsen.io/playground/ . If it works in the playground then it is a problem with your environment.
If it is not working in the playground, then click Export to Codepen and link it here.
-
I know this is an old topic, and you most probably found a solution already.
But I will reply anyway because I just run into the same problem, and others might as well.
After lots of different tests, I figured the issue was with a fixed height for the ons-list-item. In my case, I don’t really know where it is coming from, but I managed to solve it adding “height: auto”.
Adapting the code would be something like this:
<ons-list-item expandable style=“height: auto”>
Tap to expand
<div class=“expandable-content”>Expandable content</div>
</ons-list-item>