Results 1 to 5 of 5

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

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    32
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,421
    Answers
    3900
    Vote Rating
    1271
      0  

    Default

    Try iconAlign config on the button?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,421
    Answers
    3900
    Vote Rating
    1271
      0  

    Default

    I'm sure some CSS would help with that.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •