1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    32
    Vote Rating
    0
    afleming is on a distinguished road

      0  

    Default Unanswered: Button: How to left align text, and right align an icon

    Unanswered: Button: How to left align text, and right align an icon


    Hello,

    I'm needing to create buttons that have the text left aligned inside the button, and have the icon (a check mark) right aligned to the button - life if you have a button left aligned, a span in the middle to fill out the space, then an image(icon) on the right.

    Is this possible with just the Button class + some scss trickery, or will I need to create a new panel with button-like listeners and such?

    Thanks!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Try iconAlign config on the button?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    32
    Vote Rating
    0
    afleming is on a distinguished road

      0  

    Default


    I did indeed - it does as expected, it aligns the icon to the right side of the text, not to the right side of the button.

    I was hoping it would allow the text to be left-aligned to the button, then the icon to the right-aligned to button, so there would be space between the text and button, but the more I think about it, the less likely that seems.

    I'm bulding this list using a dataview, and was hoping to not have to figure out how to make a button with the different components inside >.<

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm sure some CSS would help with that.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    32
    Vote Rating
    0
    afleming is on a distinguished road

      0  

    Default


    I'm going to continue working with that, see if I can come up with something, just not sure.

    I'm thinking of trying out using a Disclosure Button, and perhaps causing it to not have an event attached - that would allow the right align. Problem is, the icon is to be a checkmark, that is transparent when the button is 'inactive' and opaque when the button is 'active', which is done by a tap on the button which houses it... should be an interesting challenge.

Thread Participants: 1