explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Quick Fix: FieldSet Title Truncation


While waiting to get my hands dirty on my new contract, I decided to fix the title issue with my FieldSet component. It now truncates the text if the text’s width tries to extend beyond the constraints of the border. There were a few house keeping tasks done inside as well. Get the latest from the Google Project here.


20 thoughts on “Quick Fix: FieldSet Title Truncation

  1. Did you get it?

    I’m having the “FieldSet Title Truncation” issue.


  2. I don’t quite follow you. Are you saying you are still experiencing the issues with the latest source?

    Let me know and I will quickly address this ASAP.


  3. Yes. I’m experiencing the issues. But it’s not always failing.

    An example of code failing:

  4. The comment system truncated the example code I inserted.

  5. shoot me an email with the code sample and I will plug it in and test it. And thanks for the input on this.


  6. I have sent you an email with an example, and a screenshot


  7. Hi!!!

    Did you get a solution?

  8. Hello Soknet,

    I did take a look at the issue. I have not been able to replicate it from compiling your code several times. Of course I was using FB2. Where you also using FB2? I have the issue logged on the project home along with you sample code.

    I really appreciate your patience with this. I just can’t get it to manifest on my machine.

    Has anyone else had this problem?


  9. Will this be able to be used as a Flex 3 component?

  10. I haven’t tried it in Flex 3. I have been rather lazy getting around to using FB3. Assuming that they haven’t radically changed the internal workings of the underlying classes utilized in this component, I don’t see why it wouldn’t work.

  11. Thank you for your response. Great component by the way…I find it very valuable since I have not come across anything like it. I’ve implemented it into a project and it works perfectly in Flex 2 but once it is compiled in Flex Beta 3 the container widths change which in turn causes scrollbars to appear around the container. Any idea why or any help would be appreciated…thanks!

  12. I can’t get this to work at all when specifying the styles in an external .css file. If I do nothing other than:



    the fieldset doesn’t render at all. Your default styles aren’t kicking in. So I copied all the styles (borderStyle most importantly) into the .css file… and now it renders, except the title is floating down inside the actual content.

    • Devin. Thanks for the feedback. Can you send me your sample application code so that I can test this. Also what version of Flex Builder are you using, which Flash player version. Just want to make sure I can recreate the problem. Thanks.

  13. Sure. I’m using SDK 3.2 along with FP10. I created a small test case with view source enabled at http://www.shinynet.com/fieldset/main.html

    This is what I see happening.

    If you add a FieldSet{} style declaration, the fieldset doesn’t render anything at all.

    If you add a minimum of border-style:solid, the border will render, but that’s it, no title.

    To get the title to render, you have add, at minimum, title-gap. However, that renders the title too far down into the content area.

    btw, your TileCanvas thing looks sweet. It might be what I’ve been looking for in a dashboard layout engine šŸ™‚

  14. Hi Devin.

    Thanks for posting the source. Since you are declaring a class style called FieldSet, you are overriding the default styling of the same name in the component. If you decide to still use this name, for now, you would have to set all styles on the FieldSet within the style declaration. This is what is happening inside the FieldSet:

    if (!StyleManager.getStyleDeclaration(‘FieldSet’))
    var tsn:CSSStyleDeclaration = new CSSStyleDeclaration();
    tsn.setStyle(‘fontWeight’, ‘bold’);

    var s:CSSStyleDeclaration = new CSSStyleDeclaration();
    s.setStyle(‘borderStyle’, ‘solid’);
    s.setStyle(‘borderSkin’, FieldSetBorder);
    s.setStyle(‘backgroundColor’, 0xFFFFFF);
    s.setStyle(‘backgroundAlpha’, 0.0);

    s.setStyle(‘paddingLeft’, 2);
    s.setStyle(‘paddingRight’, 2);
    s.setStyle(‘paddingTop’, 2);
    s.setStyle(‘paddingBottom’, 2);

    s.setStyle(‘titleAlign’, ‘left’);
    s.setStyle(‘titleGap’, 2);
    s.setStyle(‘titlePlacement’, ‘top’);
    s.setStyle(‘titleStyleName’, tsn);

    StyleManager.setStyleDeclaration(‘FieldSet’, s, true);

    I probably need to adjust that so that a user can use the class name and still retain values the user has decided to NOT declare. Thanks for pointing this out as it shows a flaw in my approach.

  15. Ok I have checked in the changes to the main trunk.

  16. ok added new download to project home – http://code.google.com/p/jwopitz-lib/downloads/list

    Let me know if there are any bugs or anything. I gave it a pretty good once-over.

  17. Works great. The main things I wanted to was override the padding, cornerRadius, and titleStyleName in a css declaration and leave rest defaulted. And no problems so far. Thanks!

    • Thanks for pointing the issue out. That was a major flaw in my default styling scheme. I guessed it never dawned on me that people might wanna override the default styling without having to assign every property. Glad it works for you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s