5 Replies Latest reply on Jul 10, 2009 9:05 AM by Hillel Coren

    TextInput borderStyle in Flex 4

    Hillel Coren Level 1

      In Flex 3 this worked but in Flex 4 the border is still shown. Does anyone know if this is a bug (and if so where do I report it).

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
         
          <mx:TextInput borderStyle="none"/>
         
      </mx:Application>

       

      Thanks

        • 1. Re: TextInput borderStyle in Flex 4
          CoreyRLucier Adobe Employee

          In the daily build of the Flex 4 SDK things seem to be working, e.g. the Halo TextInput with borderStyle="none" shows no border.

           

          To lose the border of a Spark TextInput you'd need to provide an alternative skin for it.

           

          e.g. For me the Halo TextInput in this example has no visible border:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:p="*"
                         xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/halo">
             
              <s:layout>
                  <s:VerticalLayout/>
              </s:layout>
             
              <mx:TextInput borderStyle="none"/>
              <s:TextInput />
             
          </s:Application>

           

          -C

          • 2. Re: TextInput borderStyle in Flex 4
            CoreyRLucier Adobe Employee

            Note also that if you input has focus you'll of course still see a focus ring (expected).

             

            -C

            • 3. Re: TextInput borderStyle in Flex 4
              Hillel Coren Level 1

              Thanks for the reply.

               

              I just tried the latest nightly build (4.0.0.8500) and I'm still see the border.

               

              Any thoughts, which version did you test against?

              • 4. Re: TextInput borderStyle in Flex 4
                CoreyRLucier Adobe Employee

                Evidently the wrong one... I can repro your issue now.

                 

                I was originally testing with the halo theme, that's the reason why it worked.  borderStyle is honored by Halo theme but not the Spark theme.

                 

                e.g.

                 

                -theme=${flexlib}/themes/Halo/halo.swc

                 

                So if you check out defaults.css for the framework project TextInput styles now look like:

                 

                TextInput
                {
                        backgroundColor: #FFFFFF;
                        backgroundDisabledColor: #DDDDDD;
                        borderSkin: ClassReference("mx.skins.spark.TextInputBorderSkin");
                        paddingTop: 2;
                        paddingLeft: 2;
                        paddingRight: 2;
                }

                 

                So I think you can do something like:

                 

                <mx:TextInput borderSkin="{null}"/>  or provide your own custom border skin.

                 

                Regards,

                 

                Corey

                • 5. Re: TextInput borderStyle in Flex 4
                  Hillel Coren Level 1

                  You rock!! Thanks very much for your help, setting borderSkin to null worked great.