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.

OnSen UI <ons-if> component

  • Hello OnSen Team.

    I am developing an app; i would like to make the ui layout of the app responsive for phones and tablets.
    I want to create a responsive 2-column row layout for phones and 3-column row layout for tablet.
    I was hoping this could be done simply and neatly using the <ons-if></ons-if> web component; unfortunately, the component does not have a ‘device’ attribute which can be set to ‘either phone’ OR ‘tablet’.
    Please how can i achieve this type of responsive layout design with OnSen (something similar to how bootstrap allows responsive design).

    Also, it would be lovely if my suggested ‘device’ attribute could be added to the ons-if component in future updates.

    Thanks for the awesome work.

  • Onsen UI

    @writeosahon For responsive design, you can just use traditional CSS with media queries. They are powerful enough so there is no need to replace them with any custom element in my opinion :no_mouth:

  • @Fran-Diox Yeah. ok. I’ll have to use media queries. But i was hoping to have something quick and simple without having to write my own bunch of rules to create responsiveness.

    Thanks for your response though, I appreciate it 👍