Icon resize within bottom bar item

Icon resize within bottom bar item

  

Hi all,

Currently working on a Mobile (Tablet) application and have created a bottom bar with five bottom bar items...

My issue is that I can't get the icons to resize to any larger than font size, which is too small for a tablet.

I have tired :

  • Changing the size of the icon using the icon properties (font size, 2x font size, ....)
  • Placing the icon in a container and resizing it

These don't change the the size of the icon.

My guess it is something to do with the bottom bar item, maybe the way I set it up??? Because I can resize icons in other parts of the application without any issues.

Does any one know what my be the cause of the issue??

Many Thanks 

Peter

Solution

Hi Peter,

If I recall correctly, there's some CSS styling that restricts the size (though I would've expected them to be larger on a tablet). You can check the styling when emulating the App in the browser, and see where it is styled (and why) by using the browser's developer tools.

Solution

Kilian Hekhuis wrote:

Hi Peter,

If I recall correctly, there's some CSS styling that restricts the size (though I would've expected them to be larger on a tablet). You can check the styling when emulating the App in the browser, and see where it is styled (and why) by using the browser's developer tools.

Hi Killian,

Had a look at the CSS in the browser and yes the browser has the icon size defaulted to 16px (font size). How would I go about overwriting this, as I can increase in using the developer tools but when I publish the app again it reverts back to 16px.

Many Thanks

Peter


Hi Peter,

You need to override the styling with your own (in the Theme, or Screen, depending on what you want to achieve).

Kilian Hekhuis wrote:

Hi Peter,

You need to override the styling with your own (in the Theme, or Screen, depending on what you want to achieve).

Hi,

Yes, found the issue, I was changing the style within the web block that the bottom bar was created and placing it onto a screen. The style of this screen had a default icon size of 16px which as overwriting any icon sizes I had made.

Thanks for your help, it was driving me mad!


Hi Peter,

Glad I could be of help, and great you found the solution! Happy coding :)