Style and button alignment issues with list dividers on 1.0 RC1 #2571

Closed
begmandev opened this Issue Sep 30, 2011 · 1 comment

Comments

Projects
None yet
3 participants
@begmandev

With the latest 1.0 RC1 version, links in a list divider with a data-role of button and data-iconpos="notext" are displayed with a misaligned button image and background. If a link with a text value is used without the data-iconpos="notext" attribute, then the button icon and text seem to be properly aligned.

Following is a jsbin that exhibits the problem with the latest build. I don't see this same behavior with 1.0 Beta 3 and earlier releases.

http://jsbin.com/olomef

It also appears that the data theme is being removed from the list divider when mousing over the list divider for this particular example. The data theme appears to be maintained for the button but not for the list divider itself. I noticed this behavior in Firefox 3.6, Chrome 14, and Internet Explorer 8.

@anpsince83

This comment has been minimized.

Show comment
Hide comment
@anpsince83

anpsince83 Sep 30, 2011

I'm experiencing the same button alignment issue with icon only buttons placed anywhere inside a list view. This behavior definitely did not exist in Beta 3. The following CSS rule appears to be causing the issue:

.ui-li .ui-btn-text {
    position: relative;
    z-index: 1;
}

By default, the .ui-btn-text is position: absolute;, this rule is overriding it and causing the issue. If you add position: absolute; rule to the span.ui-btn-text for your button, it will make everything fall in place.

I'm not sure if this rule is intended or not, but as we both said, this behavior was not present in the previous releases.

I'm experiencing the same button alignment issue with icon only buttons placed anywhere inside a list view. This behavior definitely did not exist in Beta 3. The following CSS rule appears to be causing the issue:

.ui-li .ui-btn-text {
    position: relative;
    z-index: 1;
}

By default, the .ui-btn-text is position: absolute;, this rule is overriding it and causing the issue. If you add position: absolute; rule to the span.ui-btn-text for your button, it will make everything fall in place.

I'm not sure if this rule is intended or not, but as we both said, this behavior was not present in the previous releases.

@ghost ghost assigned toddparker Oct 3, 2011

Wilto added a commit to Wilto/jquery-mobile that referenced this issue Oct 5, 2011

Fixes #2571, Fixes #2590, Fixes #2576 — All three issues were caused…
… by improperly-scoped “position: relative;” on .ui-btn-text, within listviews.

Wilto added a commit to Wilto/jquery-mobile that referenced this issue Oct 5, 2011

Fixes #2571, Fixes #2590, Fixes #2576 — All three issues were caused…
… by improperly-scoped “position: relative;” on .ui-btn-text, within listviews.

Wilto added a commit to Wilto/jquery-mobile that referenced this issue Oct 5, 2011

Fixes #2571, Fixes #2590, Fixes #2576 — All three issues were caused…
… by improperly-scoped “position: relative;” on .ui-btn-text, within listviews.

@toddparker toddparker closed this in 772a479 Oct 5, 2011

@toddparker toddparker closed this in da2352a Oct 5, 2011

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