3. Full width dividers on ons-list expandable items?

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.

Full width dividers on ons-list expandable items?

  • A

    I’m trying to get full width dividers (the thin grey lines between menu items) on the sub items in an expandable ons-list. See red circled areas in attached pic. I know about the longdivider modifier (docs link) but it doesn’t seem to have an effect on subitems. Is there any CSS or other technique that might achieve this please? Thanks

    Menu HTML structure for reference is:

    <ons-list-item expandable="true">
   <div class="expandable-content">
      <ons-list>
         <ons-list-item tappable modifier="tappable longdivider">Menu subitem #1</ons-list-item>
         <ons-list-item tappable modifier="tappable longdivider">Menu subitem #2</ons-list-item>
         <ons-list-item tappable modifier="tappable longdivider">Menu subitem #3</ons-list-item>
      </ons-list>
   </div>
</ons-list-item>

    alt text

    0
  • G

    Hi,

    Please add the following to your page

    <style>
  .list-item__expandable-content {
    padding: 0 !important;
  } 
</style>

    Best Regards
    Gobi

    0