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

Button: Add helper class to make icons float #8145

Closed
jaspermdegroot opened this Issue Jun 5, 2015 · 7 comments

Comments

Projects
None yet
2 participants
@jaspermdegroot
Member

jaspermdegroot commented Jun 5, 2015

Class names: ui-widget-icon-floatbeginning and ui-widget-icon-floatend. (First investigate if it's possible to do this with one class: ui-widget-icon-float)

See http://jsbin.com/muceye/1/edit?html,output

Also add a demo.

@jaspermdegroot jaspermdegroot self-assigned this Jun 5, 2015

@jaspermdegroot jaspermdegroot added this to the 1.5.0 milestone Jun 5, 2015

@jaspermdegroot jaspermdegroot changed the title from Button: Add demo to illustrate how you can make icons float with custom CSS to Button: Add helper class to make icons float Jul 16, 2015

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 23, 2015

Member

We should be able to do this with one class:

.ui-widget-icon-float { float: right; }
.ui-widget-icon-float:first-child { float: left; }
.ui-widget-icon-float.ui-widget-icon-block { float: none; }

Update: negating block icons (top/bottom) is not really necessary.... just don't add the helper class to those.

Member

jaspermdegroot commented Jul 23, 2015

We should be able to do this with one class:

.ui-widget-icon-float { float: right; }
.ui-widget-icon-float:first-child { float: left; }
.ui-widget-icon-float.ui-widget-icon-block { float: none; }

Update: negating block icons (top/bottom) is not really necessary.... just don't add the helper class to those.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 26, 2015

Member

@arschmitz

I think we shouldn't add a class for this, but make icons float by default. That's what people are used to in all previous versions and it also looks better IMHO.

.ui-button > .ui-icon { float: right; }
.ui-button > .ui-icon:first-child { float: left; }
.ui-button > .ui-icon.ui-widget-icon-block { float: none; }

What do you think?

Member

jaspermdegroot commented Jul 26, 2015

@arschmitz

I think we shouldn't add a class for this, but make icons float by default. That's what people are used to in all previous versions and it also looks better IMHO.

.ui-button > .ui-icon { float: right; }
.ui-button > .ui-icon:first-child { float: left; }
.ui-button > .ui-icon.ui-widget-icon-block { float: none; }

What do you think?

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Jul 26, 2015

Member

So i think your right as long as by default we have block buttons vs inline float should be the default. I would really like to see us move towards inline by default, however i think this should wait for chassis.

Member

arschmitz commented Jul 26, 2015

So i think your right as long as by default we have block buttons vs inline float should be the default. I would really like to see us move towards inline by default, however i think this should wait for chassis.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 27, 2015

Member

@arschmitz

as long as by default we have block buttons vs inline float should be the default

I don't really get this.

What does block vs. inline buttons have to do with this?

Member

jaspermdegroot commented Jul 27, 2015

@arschmitz

as long as by default we have block buttons vs inline float should be the default

I don't really get this.

What does block vs. inline buttons have to do with this?

@jaspermdegroot jaspermdegroot changed the title from Button: Add helper class to make icons float to 1.5 Icons: Make icons in block buttons float to end/beginning Jul 27, 2015

@jaspermdegroot jaspermdegroot changed the title from 1.5 Icons: Make icons in block buttons float to end/beginning to Button: Add helper class to make icons float Jul 28, 2015

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jul 28, 2015

Member

And we are back at the beginning .... using two helper classes (ui-widget-icon-floatbeginning and ui-widget-icon-floatend).

The reason is that the solution should also work with CSS-only buttons (no Button widget) where you can omit the space span and just add a space between icon span and text. In that case the icon span is always :first-child no matter if you put the span before or after the button text. Hence the solution I mentioned in my previous comments won't work.

Member

jaspermdegroot commented Jul 28, 2015

And we are back at the beginning .... using two helper classes (ui-widget-icon-floatbeginning and ui-widget-icon-floatend).

The reason is that the solution should also work with CSS-only buttons (no Button widget) where you can omit the space span and just add a space between icon span and text. In that case the icon span is always :first-child no matter if you put the span before or after the button text. Hence the solution I mentioned in my previous comments won't work.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 2, 2015

Member

@arschmitz

I tried to add a demo for this, but how to add the class to the icon if you use the button widget? In other words, when you don't add the icon span to the markup yourself.

You can't change the classes of the icon with the classes option, right?

See http://view.jquerymobile.com/1.5-css-and-demos/demos/icons/#Floaticons

Update: This was a markup problem. It works now!

Member

jaspermdegroot commented Aug 2, 2015

@arschmitz

I tried to add a demo for this, but how to add the class to the icon if you use the button widget? In other words, when you don't add the icon span to the markup yourself.

You can't change the classes of the icon with the classes option, right?

See http://view.jquerymobile.com/1.5-css-and-demos/demos/icons/#Floaticons

Update: This was a markup problem. It works now!

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Aug 21, 2015

Member

Landed in 1.5-dev

Member

jaspermdegroot commented Aug 21, 2015

Landed in 1.5-dev

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

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