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

Collapsible Content: Info Icon Issue #4801

Closed
mdevera opened this Issue Aug 3, 2012 · 4 comments

Comments

Projects
None yet
3 participants
@mdevera

mdevera commented Aug 3, 2012

Hi guys,

Building a mobile web app and am using the collapsible content feature. We would like to use the "info" icon as the custom icon, for both the expanded and collapsed version of the content block.

The "info" icon displays for the collapsed version, but when clicked on, the icon changes to a plus icon, despite having a value of "info" for the data-expanded-icon attribute. Not sure if I'm missing something ..

I haven't tested to see if this is happening for any other icon, but thought I should bring it up.

Here's a jsbin link - http://jsbin.com/orucec/66/

Thanks,
M

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Aug 4, 2012

Contributor

Hi @mdevera,

no, you missed nothing. Good catch btw!
Having the same non standard icon for collapsed and expanded state is not possible this time.
I'll try to land a fix for this issue that will pass the tests.

Maurice

Contributor

MauriceG commented Aug 4, 2012

Hi @mdevera,

no, you missed nothing. Good catch btw!
Having the same non standard icon for collapsed and expanded state is not possible this time.
I'll try to land a fix for this issue that will pass the tests.

Maurice

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Aug 4, 2012

Contributor

@mdevera

I've created a PR to fix this issue, but I don't know, if it will get in.

Another solution to achieve same icons for expanded and collapsed state is to use a CSS-rule like this:
div.ui-collapsible[data-expanded-icon="info"] span.ui-icon { background-position: -540px 50%; }
for the info icon.
Here is a fiddle to demonstrate that http://jsfiddle.net/MauriceG/Ga4Jj/

I don't use jsbin because a second css rule like that above (eg using grid-icon) does not work there ...

Maurice

Contributor

MauriceG commented Aug 4, 2012

@mdevera

I've created a PR to fix this issue, but I don't know, if it will get in.

Another solution to achieve same icons for expanded and collapsed state is to use a CSS-rule like this:
div.ui-collapsible[data-expanded-icon="info"] span.ui-icon { background-position: -540px 50%; }
for the info icon.
Here is a fiddle to demonstrate that http://jsfiddle.net/MauriceG/Ga4Jj/

I don't use jsbin because a second css rule like that above (eg using grid-icon) does not work there ...

Maurice

@mdevera

This comment has been minimized.

Show comment
Hide comment
@mdevera

mdevera Aug 5, 2012

Hey @MauriceG

Thank you for the reply and clarification. I'll give the CSS-rule a shot for now. :)

Much appreciated! :)

M

mdevera commented Aug 5, 2012

Hey @MauriceG

Thank you for the reply and clarification. I'll give the CSS-rule a shot for now. :)

Much appreciated! :)

M

gseguin added a commit that referenced this issue Aug 23, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 16, 2012

Member

Closing as fixed by merging PR #4803.

Member

jaspermdegroot commented Sep 16, 2012

Closing as fixed by merging PR #4803.

arschmitz added a commit to arschmitz/jquery-mobile that referenced this issue Oct 16, 2012

srsgores pushed a commit to srsgores/jquery-mobile that referenced this issue Feb 27, 2013

Collapsible: Add support for same expanded/collapsed non default icon
Fixes #4801 Collapsible Content: Info Icon Issue.
Having the same non standard icon for expanded and collapsed state, toggleClass removes the ui-icon-x class for collapsed state.
Tests: Passed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment