5 Replies Latest reply on Jun 10, 2009 10:49 AM by Handycam

    Why is my text getting truncated?

    Handycam Level 1

      I have a button bar with a modified button class (below).  It's generally working great, except that some buttons are truncated the text with ellipses, even when it would seem the text will fit.

       

      See the attached screenshot of the two buttons with these strings:

       

      "2 load-bearing walls replaced with beams below ceiling","1–2 load-bearing walls replaced with beams above ceiling"

       

      One truncates, the other doesn't.  Basically, I'd be happy with disabling the truncation altogether. Searching the docs shows there is a method for this, but I can't seem to figure out how to apply it...

       

      Here's the button class I am overriding the toggle button bar via:

      <mx:ToggleButtonBar dataProvider="{kitchenAccess}"  id="tbb1" initialize="tbb1.mx_internal::navItemFactory = new ClassFactory(MultilineButton)" buttonWidth="{colWidth}" buttonHeight="{rowHeight}" textAlign="left" itemClick="clickHandler(event)"/>

       

      class file:

       

      package tools
      {
      import flash.text.*;
      import mx.controls.Button;
      import mx.controls.buttonBarClasses.ButtonBarButton;
      import mx.core.mx_internal;

      use namespace mx_internal;

      public class MultilineButton extends ButtonBarButton
      {

      public function MultilineButton()
      {
      super();
      }

      override protected function createChildren():void
      {
      super.createChildren();
      textField.multiline = true;
      textField.wordWrap = true;
      textField.autoSize = TextFieldAutoSize.LEFT;
      textField.ignorePadding = true;
      textField.selectable = false;
      }

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      textField.y = (this.height-textField.height)>>1;
      }
      }
      }


        • 1. Re: Why is my text getting truncated?
          dzeikei Level 2

          The styles paddingLeft and paddingRight's default value for a Button control is 10.

          I believe, by setting them both to 0, you will get your labels to go to the left and right edge without getting ellipsis.

          • 2. Re: Why is my text getting truncated?
            Handycam Level 1

            Further research and experimentation makes it look like the truncation only occurs if I apply css to the toggle button bars. Which is odd, since you would think more text would fit at the smaller font size.

             

            ToggleButtonBar {
            buttonStyleName: "mytoggleButtonBarButtonStyle";
            firstButtonStyleName: "mytoggleButtonBarFirstButtonStyle";
            lastButtonStyleName: "mytoggleButtonBarLastButtonStyle";
            selectedButtonTextStyleName: "mytoggleButtonBarSelectedButtonStyle";
            }

            .mytoggleButtonBarButtonStyle, .mytoggleButtonBarFirstButtonStyle,.mytoggleButtonBarLastButtonStyle,.mytoggleButtonBarSe lectedButtonStyle   {
            fontFamily: Arial;
            fontSize: 10;
            fontWeight: normal;
            textAlign: left;
            highlightAlphas: 0, 0;
            fillAlphas: 1, 1, 1, 1;
            fillColors: #ffffff, #ffffff, #ffffcc, #ffff99;
            color: #666666;
            textSelectedColor: #000000;
            borderColor: #666666;
            borderThickness: 3;
            themeColor: #ff9900;
            paddingTop:0;
            paddingBottom:0;
            paddingLeft: 5;
            paddingRight:0;
            }

            .mytoggleButtonBarFirstButtonStyle, .mytoggleButtonBarLastButtonStyle {
            cornerRadius: 0;
            }

            .mytoggleButtonBarSelectedButtonStyle {
            color: #cc0000;
            fontWeight: bold;
            fontStyle: normal;

            }


            Any suggestions much appreciated.

            • 3. Re: Why is my text getting truncated?
              Handycam Level 1

              Thanks, but when the css is applied, it truncates on or more at random.  No, css, it all fits (but doesn't match the specs for the project, hence the css).

               

              See attached screen shots of the same buttons with and without css.

              • 4. Re: Why is my text getting truncated?
                dzeikei Level 2

                This not at all elegant but in the overridden updateDisplayList(), you could trying adding:

                textField.text = label;

                after call to super.updateDisplayList() so it will set the textField's text back to the full String of the label instead of showing the truncated String.

                • 5. Re: Why is my text getting truncated?
                  Handycam Level 1

                  Inelegant, I'll take your word for it.   But it does work, thanks!