3. Scaling Toolbar and Images for Different Devices

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.

Scaling Toolbar and Images for Different Devices

  • C

    Hello,

    How do I increase the size (height) of the toolbar and scale images to become larger if the resolution increases (going from iphone 8 to ipad pro)?

    I’m presently trying to write a script that identifies the display and assigns size values for small, medium, large displays. Is there a more streamlined approach to scaling?

    Thank you,
    Christopher

    0
  • E
    administrators

    Onsen should scale components automatically to look good on whatever size of device.

    You might be able to do it directly in CSS, or you could check if the device is an iPad with ons.platform.isIpad and apply your own CSS classes accordingly.
    https://onsen.io/v2/api/js/ons.platform.html#method-isIPad

    0
  • C

    Thank you for responding so quickly.

    The toolbar still looks larger on the phone than on the tablet. Is this the correct scaling on the toolbar or is it being determined by the logo image size?

    Is it possible to assign percentage values to div containers to scale images or elements such as cards for each device rather than defining exact values (ie. 64px64px)?

    I’ve included a picture to show the difference. Screenshot

    Thank you!

    0
  • E
    administrators

    Hmmm… I think both the toolbars from your screenshot might actually be the same size, but the iPad one is overlapping with the device status bar. You can see the blue icon on the right is overlapping.

    By the way, that overlapping behaviour shouldn’t happen. Does it still happen if you remove the icon and just have a text in the toolbar? I’m guessing that the problem is because the icon height is larger than the toolbar height and the toolbar is not automatically resizing.

    From the OnsenUI source code, it looks like the height is set to 46px. It should be possible to override this by applying your own CSS class to the toolbar.
    https://github.com/OnsenUI/OnsenUI/blob/master/css-components/src/components/toolbar.css#L6

    0