407
Views
5
Comments
Solved
Icon resize within bottom bar item
Question

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

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
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.

2018-12-04 15-40-41
Peter Travers

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


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Peter,

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

2018-12-04 15-40-41
Peter Travers

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!


2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Peter,

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.