14 Replies Latest reply on Jun 14, 2008 9:14 AM by JcFx.Eu

    How to reduce label estate

    mabian
      Hello,

      I'm trying to have labels with opaque background almost exactly as big as the text in it but I get labels much bigger than the text (especially in height, about 1.5 x font height).

      I've tried forcing height, but the text is clipped and the border remains; is there some property that can help?

      Thanks,
      Mario
        • 1. Re: How to reduce label estate
          atta707 Level 2
          Look at the paddingTop and paddingBottom styles for the Label component.
          • 2. Re: How to reduce label estate
            mabian Level 1
            Thanks, already tried, both as SetStyle or directly in the mxml object declaration; seems having no effect.
            • 3. Re: How to reduce label estate
              slaingod Level 1
              You can use negative values for the padding, if you hadn't tried that.
              • 4. Re: How to reduce label estate
                mabian Level 1
                Thanx slaingod, already been there as well, setting padding to negative values change the label position inside its container, it doesn't seem to affect the label appearance.

                I find it incredible that you cannot alter in any way the margins between the label edges and the text in it.

                - Mario
                • 5. Re: How to reduce label estate
                  slaingod Level 1
                  Keep in mind that Flex is ultimately based on Flash, which does an amazing amount of work considering it is a 1.5MB download. For instance, text justification was just recently added. Buy comparison Silverlight requires something like 10MB, and may even require .NET to be installed on top of that, not sure.

                  Reminds me of .Net Compact Framework which *doesn't* support text justification, which may reduce the size of the ROM, but requires everyone who needs it to go without or do a custom implementation.

                  Have you tried using getBounds() or getRect() to see if they return something different that you can then fill yourself in AS3?
                  • 6. Re: How to reduce label estate
                    mabian Level 1
                    I agree with you mostly but... according to the docs (Flex Builder 3.0), the paddingTop and paddingBottom properties of Label control should really do what I expect them to do.

                    They just don't...

                    - Mario
                    • 7. Re: How to reduce label estate
                      VarioPegged Level 2
                      Could you post some of your code? Reading your initial post, you mention using an opaque background for your label control, but <mx:Label> doesn't have backgrounds or borders.

                      TS
                      • 8. Re: How to reduce label estate
                        mabian Level 1
                        Fair.

                        <mx:HBox horizontalGap="0">
                        <mx:Label width="5"/>
                        <mx:Label id="lbPrice2" width="150" opaqueBackground="0x000088" text="THIS IS A TEST"/>
                        <mx:Label width="5"/>
                        </mx:HBox >

                        Try reducing the height of the blue label without having text clipped vertically (I mean, I haven't managed to decrease the amount of "blue" above and below the text).

                        Thanks,
                        Mario
                        • 9. How to reduce label estate
                          VarioPegged Level 2
                          I think you have a valid gripe with the inability of the Label control to adjust to the exact size of the text within it, meaning true zero padding. The label's child, TextField is the culprit.

                          It seems impossible to force the TextField (part of flash.text) to ignore its gutter values, so it forms a permanent padding around the TF, even if you try to get the true height of the TF via textHeight. These values are part of the overall edge metrics calculations of the label, so setting paddingTop and paddingBottom to 0 doesn't do squat. I always use text with a little room around it, so it's never even crossed my mind to have a true 0 padding.

                          Flash Player 10 provides much better text control, but until it is more main stream you may have to hack it ...

                          TS

                          Hack follows:
                          • 10. Re: How to reduce label estate
                            mabian Level 1
                            Now THIS is what I call a complete answer!

                            Thanks a lot for taking the time to try and help, even though it's really sad one has to do this kind of workaround due to the padding properties not behaving as expected and documented...

                            - Mario
                            • 11. Re: How to reduce label estate
                              slaingod Level 1
                              Lol, that's like saying 'it's really sad browser X doesn't work exactly to HTML/CSS specification' or 'any API docs anywhere ever made aren't exactly correct?' Sorry, just tickled my funny bone. I've always found that's what separates the more productive programmers from those less so: the ability to quickly recognize a those undocumented features and workaround them quickly. (Not saying you aren't: one of the ways to 'work around' them is to ask questions in the right places, while you keeping making forward progress.)
                              • 12. Re: How to reduce label estate
                                mabian Level 1
                                Well, CSS is a standard, a dev tool or an app can adhere to it from 0% to 100%; here is Flex not adhering to ..mmm... Flex documentation... why not just saying it's an ugly bug or half baked feature?

                                BTW, the workaround suggested works great (actually, it's not even needed to propagate opaquebackground to the inner label since setting opaquebackground on the outer Canvas object does the trick).
                                Also, messing with the textfield is not needed; a Label wrapped in a Canvas is more than enough to get the job done. If you wish I can publish the code fragment for the component.

                                Thanks again (soon back to the forum due to an awful VBox limitation; stay tuned...) ;)

                                - Mario
                                • 13. Re: How to reduce label estate
                                  VarioPegged Level 2
                                  You're very welcome ... glad that worked for you.

                                  Re the opaqueBackground: The opaque color property on the canvas didn't take for me when setting it on the canvas alone, hence the propagation to the label instead. My workarounds are not always final solutions, they're meant to get you going and I expect them to be adapted by you to fit your needs.

                                  I guess I'm somewhat more forgiving towards these types of issues in the API. I've been working with Flash and its idiosyncrasies for 11 years and over the past two years with Flex, so I've come to expect workarounds. Each evolution of the Flash Player is a step in the right direction, though, as can be seen in FP 10.

                                  TS
                                  • 14. How to reduce label estate
                                    JcFx.Eu Level 1
                                    In case it's any use, I've found textHeight * 0.1 for the y Position and textHeight * 0.01 for the xPosition (yes, height both times!) to be good shim values across a range of fonts.

                                    Very frustrating that this issue exists, has existed for several player releases and has not been addressed.