Forum | Appery.io

I've put a navigation bar inside the header of a page in my project. There are no icons in the components of nav bar. Please see first screenshot on how it looks within Appery UI screen. When I run the test, the nav bar components become wider (second screen shot) with space above the text. This was not the case with old libraries but with upgrade to V2.0 this issue has surfaced up: so this is a bit frustrating.

What would you suggest to resolve this?

Hello Cody,

I can not reproduce.
Have you tried to run app as native? Do you have the same behavior?

Hi Alena,

I'll next send an email to support with details to log on and reproduce the issue. Yes, I have the same behavior on two different iOS devices I've tested it on.

Look forward to your feedback.
Thank you.

Cody,

It happens because you set Icon to None, you will need to add style to prevent showing that part above:

You can use padding-top property. For example:
pre.ui-btn {
padding-top: 5px;}/pre

Alena,

Thanks. There are however undesirable border effects due to this padding, no matter how much I play with number of padding pixels: please see screenshot. What I was looking to get shown instead is as in the second screenshot view (no borders), which was the case with old libs.

What do you suggest?
Thanks.

Hi Cody,

Please add this CSS code:pre[name=mobilenavbarName] a{
padding: 12px;
}/pre

Hi Katya,

Thanks for your feedback on this. I did not change anything, but the issue seems to have disappeared - perhaps due to new version of builder or update.

In any case, thanks for looking into it.

Hello Cody,

Thank you for update, glad it works!