March 17th, 2017
12:36 pm
Ionic Styling issues with Menu button on an ion-navbar

Posted under Ionic
Tags , ,

When adding a menu button to an ion-navbar, there is a styling issue whereby the menu toggle gets the wrong styling.
This depends on whether the menuToggle attribute is present.

If the attribute is present and the toggle is placed inside an ion-buttons group, it gets the wrong styling via a special case for menu toggles (flex rather than inline-block like the rest). This (incorrectly) puts it on a separate line above the others. Putting it separately above the ion-buttons group, with an explicit left on the button, fixes the problem.

If the menuToggle attribute is NOT present, then the button needs to go inside the ion-buttons group as otherwise for example for a left group the other left buttons go to its left. The rules for all this styling seem a bit quirky and not clearly defined.

This post discusses this issue.

No Comments »

Comments RSS

Leave a Reply

You must be logged in to post a comment.