3 Replies Latest reply on Nov 10, 2006 6:00 AM by peterent

    Resizing a TextInput

    kofiaddaquay
      Hi, i have been through the documentation for the TextInput class. i dont see anything that changes the size of this field. i am working on a app that require smaller textinput field. about a height of 15. my attempts to use CSS have failed soo far. but when i apply it inline, as in height = 15. it resizes BUT the text is CHOPPED about half way.

      there is a textHeight property. but its read only so i cant modify it. how can i customize my textInput field??
        • 1. Re: Resizing a TextInput
          peterent Level 2
          You can change the size of the TextInput component - and any component for that matter - by using its setActualSize(w,h) method.

          For text, you have to make a couple of allowances. There is a 2 pixel margin between the TextInput border and the actual TextField.

          Personally, I'd let the height default to whatever fits best for the font you are using and adjust the width only using the TextInput's width property:

          <mx:TextInput id="input" ... />
          ...
          input.setStyle("fontSize",8)'; // or put this into the <mx:TextInput> tag if you are using MXML
          input.width = 20;

          There are ways of getting the TextLineMetric to determine the actual space required to hold a string of characters, but it is pretty rare that you need to be so precise. But if you do, check the Flex 2 documentation for that.
          • 2. Re: Resizing a TextInput
            kofiaddaquay Level 1
            hello sir, i am unable to follow how to use setStyle. where do i define this property. is an mx:script tag? the input dropdowns are not giving me a property of setstyle. and i am getting a undefined property in the mx:script block. sorry, but i have giving this alot of effort before replying back to this post. Thanks
            • 3. Re: Resizing a TextInput
              peterent Level 2
              The code, input.setStyle("fontSize",8) is mean to be in an ActionScript block, in a function (most likely in the creationComplete handler of the <mx:TextInput> tag itself. But you can also set the style right in the tag:

              <mx:TextInput id="input" fontSize="8" />

              If you decide to do it in ActionScript, then you need some event to trigger the code. For example:

              <mx:TextInput id="input" creationComplete="initTextInput()" />
              <mx:Script>
              private function initTextInput() : void {
              input.setStyle("fontSize",8);
              }
              </mx:Script>

              You can also set it in a style:

              <mx:Style>
              TextInput { font-size:8; }
              </mx:Style>

              This will make ALL TextInput instances use a font size of 8.