4 Replies Latest reply on Jun 2, 2010 3:11 AM by David_F57

    How to align label text to the left in Spark Button (no "textAlign" style)?

    JabbyPandaUA Level 3

      Hi all,

       

      "textAlign" style is excluded for Spark Button, and probably for a good reason.

       

       

      [Exclude(name="textAlign", kind="style")]
      

       

       

        If I want to align Spark Button text label to the left, should I create custom skin to accomplish that?

       

      Something e.g:

       

       

       

      
      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx"
              minWidth="21" minHeight="21" 
              alpha.disabled="0.5">
      .......
      
      
      
      <s:Label
              id="labelDisplay"        
              textAlign="left"                
              left="2" right="2" top="2" bottom="2"/>
      </s:Skin>
      
      
      
        • 1. Re: How to align label text to the left in Spark Button (no "textAlign" style)?
          JabbyPandaUA Level 3

          I think, the answer is YES, one should create a custom skin to align label text for Spark Button accordingly to the reasoning provided at

           

          textAlign in PI doesn't do anything for s:Button

          https://bugs.adobe.com/jira/browse/SDK-24101

          • 2. Re: How to align label text to the left in Spark Button (no "textAlign" style)?
            David_F57 Level 5

            hi,

             

            if you only have a couple of buttons you can be lazy and in the button declaration and do this, or you create a skin, or you create an extended button class so that you can set the style at the begining of the app.

             

             

            <s:Button id="btn_login" width="150" label="Login" creationComplete="btn_login.labelDisplay.setStyle('textAlign','left')"/>

             

            David.

             

            [updated - typo]

            1 person found this helpful
            • 3. Re: How to align label text to the left in Spark Button (no "textAlign" style)?
              JabbyPandaUA Level 3

                  Right, I though about this approach vith setStyle too, but this is not that convenient.

               

                  I looked into source code and find out that spark.components.Button class adds to the spark.components.supportClasses.ButtonBase only one public property "emphasized".

               

                Because I do not need this property in my project, I've extended my custom LinkButton component from ButtonBase to allow setting "textAlign" style in MXML for this component.

               

              import spark.components.supportClasses.ButtonBase;
              
              public class LinkButton extends ButtonBase {
              }
              
              

                 

                 Also,  inside custom Skin from my Button component I do not set explicitly "textAlign" style value to the button label, I let button label to inherit style value specified in MXML for the style textAlign of my ListButton component.

               

               

              <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      minWidth="21" minHeight="21" 
                      alpha.disabled="0.5">        
                  <fx:Metadata>
                      [HostComponent("component.LinkButton")]
                  </fx:Metadata>    
              ...
              
              <s:Label
                      id="labelDisplay"
                      textDecoration="underline"
                      maxDisplayedLines="1"
                      verticalAlign="middle"
                      color="{getStyle('color')}"
                      color.over="{getStyle('textRollOverColor')}"        
                      color.down="{getStyle('textSelectedColor')}"        
                      left="10" right="10" top="2" bottom="2"/>
              </s:Skin>
              
              • 4. Re: How to align label text to the left in Spark Button (no "textAlign" style)?
                David_F57 Level 5

                hi,

                 

                The extended component is by far the better way to go, and with a property in the extended component you can then bind to it in the skin so if you have

                 

                [Bindable] public var textalign:string = "middle";

                 

                 

                then in the skin

                 

                textAlign={hostcomponent.textalign}

                 

                so now in the source/ mxml

                 

                <comp:CustButton id="mybtn" textalign="left"/>

                 

                David.

                1 person found this helpful