3. Platform-specific styling classes?

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.

Platform-specific styling classes?


  • While I’ve looked through docs and resources, I haven’t quite managed to find an answer to this.
    Does ONSEN UI contain some informational platform-specific classes? Like class “ios” when on running on iOS? Or is this problem solved only by using platform=“ios” in HTML?

    I have found the automatic styling helpful but definitely in need of alteration.

    0 1 Reply
  • Onsen UI

    @Saloniq-David Everything looks like iOS by default. Autostyling is adding a modifier="material" attribute to every component basically. At the same time, modifiers add custom classes like page--material or toolbar--material (elementName--modifierName). Therefore, you can easily select an element in CSS with .page.page--material for MD or .page:not(.page--material) for iOS. Alternatively, [modifier~=material] and :not([modifier~=material] would also work.

    ons.platform contains methods to change platform styling or detect the current platform.

    0