Select and Listview CSS:
Added/adjusted padding and absolute position rules for count bubble (fullsize and mini) and mini listview (all types of lists).
Fixed: The padding left and right used for header/footer buttons with icon top or bottom should not apply to mini inline buttons and mini controlgroup buttons. Also, mini inline buttons had same padding as fullsize inline buttons at the side where the icon is.
When data-icon="false" is used on a select button it still gets the default data-iconpos="right". The small change I made set data-iconpos to false. This fixes the issue: no class ui-btn-icon-right anymore, which means no unwanted padding right.
Looking at the Selectmenu widget and ButtonMarkup I didn't see a solution to completely remove the data attribute, since there is a default value.
[Update: removed note about same happening for listview items with data-icon false]
These changes are only applicable when mini listviews are going to be used. Added data-mini as option to the data attribute reference. Added thumb size info in the Thumbnails & icons section on the List basics & API page.
I created a test page with all types of buttons that are affected. One version where you can see the results and one version how buttons currently look for comparison.
To keep overview I made an Excel file with a schematic representation of the buttons and the values of padding and absolute positioning. The XLS and PDF prints of it can be found at the test page as well.
Link to test page: [edit: removed this link; link to new test page will be added to new PR]
This PR fixes #3979 (Count Bubble position problem) and #4114 (Listview data-mini="true")
This PR replaces #4017 and #4018
Fixed count bubble postion/padding problems (select and listview) and…
… made all types of listviews compatible with data-mini="true"
Fixes incorrect padding left and right for mini inline buttons and mi…
…ni controlgroup buttons
Fixed: select button with data icon false still had class ui-btn-icon…
Docs: added data-mini to attr ref for listview, added 60px square siz…
…e for mini version thumb list in List basics
Something that just crossed my mind...
When a custom select button has data-mini="true" it would be nice when the modal/dialog that opens is also mini version.
Next project :-)
Wow, this is incredibly detailed. Nice work @uGoMobi!
I just asked @Wilto to review this.
Man oh man.
I’ll review this first thing Monday. Great work.
@Wilto See @toddparker his comment on issue #4114 about probably not supporting mini listviews. I have a version of the Listview CSS file without the additions/changes for mini listviews. So just let me know if you prefer that one.
Looks like this PR might need an update.
Yes it does indeed. I think it's better to close this PR and split it up. One new PR to remove the mini listview option from the JS and all the other changes to a new PR for "standardize buttons and forms".
New PR for disabling option mini listview: #4464
I am closing this PR now and will move the other changes - without mini listview CSS - to the new PR for buttons and form.