Results 1 to 2 of 2

Thread: Button Icon Alignment not working, AND missing a "center" option?

  1. #1
    Sencha User
    Join Date
    Jan 2015
    Location
    Southern NH
    Posts
    4

    Default Answered: Button Icon Alignment not working, AND missing a "center" option?

    Hi all,

    I tried searching for this before posting and couldn't find an answer, so I apologize if it's a repeat.

    According to the docs, "button" xtype allows you to use an image on the button. I chose to use the "iconCls" property and "setIconCls" method to put an image on a button I intend to use as a toggle button. The property seems to work, but the method does not seem to allow me to switch between the two CSS classes. So I'm curious to know why that doesn't seem to work.

    But beyond that, I found a property called "iconAlign" which gave me hope that I could center the icon because nothing I tried in the CSS seems to have an effect on where the image shows up on the button. And the documentation says there are four possible values for that property: "top", "right", "bottom", and "left". No centering option. I was further confused because the property doesn't seem to work no matter what value I put in.

    So: How do I switch between icon classes for my toggle button? And how do I center the image in the button?

    The button docs I'm using.

  2. Hi-

    To toggle the iconCls, add a listener for the "toggle" event, and in the handler set the iconCls using "setIconCls" based on the "pressed" argument.

    To center the icon, you can do a bit of CSS to handle that. Please see the Fiddle below for an example.

    Thanks!
    Joel


  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi-

    To toggle the iconCls, add a listener for the "toggle" event, and in the handler set the iconCls using "setIconCls" based on the "pressed" argument.

    To center the icon, you can do a bit of CSS to handle that. Please see the Fiddle below for an example.

    Thanks!
    Joel


Tags for this Thread

Posting Permissions

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