1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    León, Spain
    Posts
    77
    Answers
    2
    Vote Rating
    3
    diesalher is on a distinguished road

      0  

    Default Answered: Aligning text and icons in button

    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,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      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
    León, Spain
    Posts
    77
    Answers
    2
    Vote Rating
    3
    diesalher is on a distinguished road

      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
    León, Spain
    Posts
    77
    Answers
    2
    Vote Rating
    3
    diesalher is on a distinguished road

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

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar