New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect border radius for buttons in first/last <li> of listviews #7670

Closed
jhogervorst opened this Issue Sep 15, 2014 · 4 comments

Comments

Projects
None yet
5 participants
@jhogervorst
Contributor

jhogervorst commented Sep 15, 2014

Issue description

The border radius for button within the first/last <li> of a listview is incorrect. This seems to be an undesirable effect of a CSS rule.

Test page

http://jsbin.com/huvoraba/121/edit?html,output

Steps to reproduce

Place a button with rounded corners within the first or last <li> of a listview.

Expected outcome

The button has four equally rounded corners.

Actual outcome

Two of the button's corners are less rounded than expected.

Platforms/browsers and devices tested

N/A, but to be complete: Safari 7.0.6 (9537.78.2) on Mac OS X 10.9.4 (13E28).

jQuery Mobile and jQuery core version used

jQuery Mobile: latest (from Git)
jQuery core: 1.11.1

Other relevant information

The problem is caused by these two CSS rules.

Manually re-applying border-radius: 1em is a workaround.

@jaspermdegroot jaspermdegroot added this to the 1.5.0 milestone Sep 17, 2014

@jaspermdegroot jaspermdegroot self-assigned this Sep 17, 2014

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 17, 2014

Member

The problem is that .ui-listview > li.ui-first-child > a.ui-btn does also target buttons inside static (read-only) list items and list dividers.

One possible fix would be adding .ui-listview > .ui-li-static.ui-first-child > a.ui-btn and .ui-listview > .ui-li-divider.ui-first-child > a.ui-btn to the rule in theme.css that sets the border radius. Because the selectors are more specific it will override the rule in listview.css that sets inherit.

Another solution is to add the ui-li class again in 1.5. In that case we can change the selector to .ui-listview > ui-li.ui-first-child > a.ui-btn and the problem will be solved. I think there was another reason why we considered using that class again. Maybe this ticket #6680.

Member

jaspermdegroot commented Sep 17, 2014

The problem is that .ui-listview > li.ui-first-child > a.ui-btn does also target buttons inside static (read-only) list items and list dividers.

One possible fix would be adding .ui-listview > .ui-li-static.ui-first-child > a.ui-btn and .ui-listview > .ui-li-divider.ui-first-child > a.ui-btn to the rule in theme.css that sets the border radius. Because the selectors are more specific it will override the rule in listview.css that sets inherit.

Another solution is to add the ui-li class again in 1.5. In that case we can change the selector to .ui-listview > ui-li.ui-first-child > a.ui-btn and the problem will be solved. I think there was another reason why we considered using that class again. Maybe this ticket #6680.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Sep 17, 2014

Member

@jaspermdegroot as part of the classes option every element of a widget will need a class name in 1.5 so I think that will solve this?

Member

arschmitz commented Sep 17, 2014

@jaspermdegroot as part of the classes option every element of a widget will need a class name in 1.5 so I think that will solve this?

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Sep 25, 2014

Contributor

Let's make sure that adding a class to each list item does not cause massive reflows.

Contributor

gabrielschulhof commented Sep 25, 2014

Let's make sure that adding a class to each list item does not cause massive reflows.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 5, 2015

Member

@arschmitz - Yeah, that will make it possible to change the selector and solve this.

@gabrielschulhof - You were working on listview classes option in branch 7692-listview-classes-option. I think the class that will be added to each list item will be ui-listview-item. If you can change the selector to .ui-listview > ui-listview-item.ui-first-child > a.ui-btn this issue will be fixed.

Member

jaspermdegroot commented Jun 5, 2015

@arschmitz - Yeah, that will make it possible to change the selector and solve this.

@gabrielschulhof - You were working on listview classes option in branch 7692-listview-classes-option. I think the class that will be added to each list item will be ui-listview-item. If you can change the selector to .ui-listview > ui-listview-item.ui-first-child > a.ui-btn this issue will be fixed.

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Jul 17, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Aug 4, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Aug 13, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Aug 28, 2015

gabrielschulhof added a commit that referenced this issue Sep 16, 2015

@apsdehal apsdehal closed this May 8, 2016

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Jul 4, 2016

@apsdehal apsdehal self-assigned this Aug 3, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment