3. <ons-list> expandable not working !!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

<ons-list> expandable not working !!

  • B

    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?

    0
  • E
    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.

    0
  • P

    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>

    0