Monaca Onsen UI Discord Chat Github Repo

<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?


  • administrators

    That code looks correct. Make sure that code is inside an ons-list element.

    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>