Skip to content
This repository

Better handling of iconpos on navbars #5374

Closed
ucavus opened this Issue · 5 comments

3 participants

ucavus Jasper de Groot Whip74
ucavus

Currently, the icon position for every button in a navbar must be in the same position. This seems clunky and it is unnecessary to have this restriction. The current CSS can render a mixture of left, right and not set, or top and bottom, perfectly well without any changes. The attached images show the result of manually switching and removing ui-btn-icon-* classes in the DOM.

The enhancement functions could be changed to allow such overrides per navbar item. A little extra CSS you could even have a mix of horizontal and vertical positions, though I can't imagine that looking very good.

Even if this improvement is not implemented, it would be good if the classes ui-btn-icon-right or ui-btn-icon-left were not added to items that have no icon. The classes make the text-only buttons look misaligned because of the extra padding.

navbar-multiple-iconpos-1
navbar-multiple-iconpos-2

Jasper de Groot
Collaborator

@ucavus

Thanks for your post. I agree that we can improve the way icon position is handled in the navbar widget.
For the 1.4 release we are planning on re-factoring the code and will look into this issue as well.

Jasper de Groot
Collaborator

We should also make it possible to have navbar buttons with icons only. http://jsbin.com/exigay/5/edit

Whip74
Whip74 commented

@uGoMobi

Are there any temporary solutions to icon positioning within the navbar widget until jquery version 1.4 is released? I have a simple two button navbar and need the icons to fall to the left on both buttons.

ucavus
ucavus commented

Just attach a function to pageinit and change the css classes manually.

Jasper de Groot
Collaborator

Closing as duplicate of #6337.

Jasper de Groot jaspermdegroot referenced this issue
Open

Navbar Review #7359

0 of 12 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.