Results 1 to 4 of 4

Thread: Aligning text and icons in button

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Len, Spain
    Posts
    77
    Answers
    2
    Vote Rating
    3
      0  

    Default Answered: Aligning text and icons in button

    Hi, i need some advice to solve my problem

    I need for my application buttons with icons and text, so far i have

    Code:
     {
    xtype:'button',
    iconMask:'true',
    iconAlign:'top',
    ui:'light'
    iconCls:'maps',
    ui:'black',
    text:'Locate hotspot',
    ,cls:'transparentbutton'
    },
    which render the icon and the text just below.

    How can i change the size of the text without changing the size of the icon?
    If in my css i change the font-size property to 0.7em, it makes the icon smaller too.

    How can i align the text of the button to the bottom of the button?
    Now the text allways shows just below the icon

    How can i break the text in a button in multiple lines?
    So "Locate Hotspot" shows with a line break.

    I dont know if the best way to do this is via css or sencha templating, but for now i'm not able to template my buttons the way i like. I was thinking of using a standard panel with an image and text (html template) and then try to capture the onclick on the panel, but the sencha touch documentation doesn't shows a tap ot click event in a panel

    Some advice?

  2. Quote Originally Posted by diesalher View Post
    How can i change the size of the text without changing the size of the icon?
    If in my css i change the font-size property to 0.7em, it makes the icon smaller too.
    Ensure you are targeting .x-button-label when setting the font-size.

    Quote Originally Posted by diesalher View Post
    How can i align the text of the button to the bottom of the button?
    Now the text allways shows just below the icon
    You will need to manually adjust the CSS for this. I suggest you inspect it using Web Inspector and work from there.

    Quote Originally Posted by diesalher View Post
    How can i break the text in a button in multiple lines?
    So "Locate Hotspot" shows with a line break.
    Set the 'text' of the button to "Locate<br />Hotspot".

  3. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      0  

    Default

    Quote Originally Posted by diesalher View Post
    How can i change the size of the text without changing the size of the icon?
    If in my css i change the font-size property to 0.7em, it makes the icon smaller too.
    Ensure you are targeting .x-button-label when setting the font-size.

    Quote Originally Posted by diesalher View Post
    How can i align the text of the button to the bottom of the button?
    Now the text allways shows just below the icon
    You will need to manually adjust the CSS for this. I suggest you inspect it using Web Inspector and work from there.

    Quote Originally Posted by diesalher View Post
    How can i break the text in a button in multiple lines?
    So "Locate Hotspot" shows with a line break.
    Set the 'text' of the button to "Locate<br />Hotspot".
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Len, Spain
    Posts
    77
    Answers
    2
    Vote Rating
    3
      0  

    Default

    Quote Originally Posted by rdougan View Post
    Ensure you are targeting .x-button-label when setting the font-size.
    Thanks, it's working now.

    Quote Originally Posted by rdougan View Post
    You will need to manually adjust the CSS for this. I suggest you inspect it using Web Inspector and work from there.
    .
    This is a great advice to someone who is pretty new to web development. Web Inspector helped me a lot to see the hierarchy in the web page Sencha is generating. I fine tuned my css to get the desired result.

    Quote Originally Posted by rdougan View Post
    Set the 'text' of the button to "Locate<br />Hotspot".
    This is not working for me. The text is showing "Locate<br />Hotspot" without line feed

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    Len, Spain
    Posts
    77
    Answers
    2
    Vote Rating
    3
      0  

    Default

    Quote Originally Posted by diesalher View Post
    This is not working for me. The text is showing "Locate<br />Hotspot" without line feed
    Ok, works now.

    The trick is overriding the css property
    white-space:nowrap
    with
    white-space:normal

    and keeping the text without </br> (the text is insede an span in the button).

Posting Permissions

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