Label.setIcon forces left alignment

[dbscott525]

SmartGwt version: 5.1-p20160131.

When setIcon is called on Label then the alignment is forced to LEFT no matter what setAlign is passed.

Here is the code to demonstrate this:

[B]public[/B] [B]class[/B] IconLabelTest [B]extends[/B] HLayout {
 
    [B]static[/B] [B]private[/B] String [I]LOTS_OF_TEXT[/I] = "Now is the time for all good men to come to the aid of their party";
 
    [B]public[/B] IconLabelTest() {
        setWidth(300);
        addMember([B]new[/B] IconLabel([B]false[/B]));
        addMember([B]new[/B] IconLabel([B]true[/B]));
        setMembersMargin(3);
    }
 
    [B]private[/B] [B]class[/B] IconLabel [B]extends[/B] Label {
 
        [B]public[/B] IconLabel([B]boolean[/B] useIcon) {
            [B]super[/B]([I]LOTS_OF_TEXT[/I]);
            setWidth("*");
            setBorder("3px solid red");
            setAutoHeight();
            setAlign(Alignment.[B][I]CENTER[/I][/B]);
 
            [B]if[/B] (useIcon) {
                setIcon("ConversationGuide/RedDot.png");
            }
        }
 
    }
 
}

Additionally, I would like to know if there is a way to have the icon displayed aligned with the first line of the text rather than vertically centered on the text.

[Isomorphic]

We're not reproducing this problem. It may be that you are perceiving the text as left aligned because it simply fills the widget horizontally.

There is no option, currently, to place the icon adjacent only to the first line of text. You could do that with multiple widgets or custom HTML.

[dbscott525]

We're not reproducing this problem. It may be that you are perceiving the text as left aligned because it simply fills the widget horizontally .

I have attached a screen shot of my results. My screen shot shows left justification when and icon is included and center justification when an icon is not included.

There is no option, currently, to place the icon adjacent only to the first line of text. You could do that with multiple widgets or custom HTML.

In regards achieving this with other widgets this is what I am trying to accomplish:

• I have an outside fixed width HLayout.
• The outside layout contains one or more layouts. Each of these layouts are to take up their proportional space. For example, if there are three layouts each layout would take up 33% of the width of the outside layout.
• In each of these contained layouts I want to have an image follow by a label.

For the text in the label I would like it to behave in the following way:

• The image and the text are centered in their containing layout
• If the text cannot fit all on one line then it should wrap and be centered
• When wrapping it should expand as much as possible to fill the containing layout.

Here is the code I have tried so far to achieve this:

[B]public[/B] [B]class[/B] WrappingLabelPrototype [B]extends[/B] HLayout {
 
    [B]private[/B] [B]static[/B] String[] [I]labels[/I] = [B]new[/B] String[] {
            "short",
            "The Alarming Truth About Brad Pitt",
            "I will work for an America where highly-paid lobbyists and corporate executives cannot make a mockery of our iPhones." };
 
    [B]public[/B] WrappingLabelPrototype() {
        setWidth(500);
        setBorder("3px solid black");
        [B]for[/B] ([B]int[/B] i = 0; i < [I]labels[/I].length; i++) {
            addMember([B]new[/B] LabelContainer([I]labels[/I][i]));
        }
    }
 
    [B]private[/B] [B]class[/B] LabelContainer [B]extends[/B] VLayout {
 
        [B]public[/B] LabelContainer(String label) {
            setWidth("*");
            setBorder("3px solid red");
            addMember([B]new[/B] IconContainer(label));
            setDefaultLayoutAlign(Alignment.[B][I]CENTER[/I][/B]);
        }
 
    }
 
    [B]private[/B] [B]class[/B] IconContainer [B]extends[/B] HLayout {
 
        [B]public[/B] IconContainer(String labelContent) {
            setWidth("10");
            setBorder("3px solid blue");
            setMembersMargin(3);
            addMember([B]new[/B] Img("ConversationGuide/RedDot.png", 18, 18));
            addMember([B]new[/B] CenterLabel(labelContent));
        }
 
    }
 
    [B]private[/B] [B]class[/B] CenterLabel [B]extends[/B] Label {
 
        [B]public[/B] CenterLabel(String contents) {
            [B]super[/B](contents);
            setAlign(Alignment.[B][I]CENTER[/I][/B]);
            setValign(VerticalAlignment.[B][I]TOP[/I][/B]);
            setAutoWidth();
        }
    }
}

This is almost working, but the text is not expanding to fill the containing layout.

I have attached an image of my results.

[Isomorphic]

Ah so for the previous report you meant that the text is left-justified not left-aligned. We'll look at that.

Your problem with the new code is that you have setWidth("10") for your IconContainer class. You want it to fill it's container, which is the default, so just remove that setting entirely.

Also, when calling setWidth() with a numeric value, don't use quotes, just pass a Number.

[dbscott525]

Ah so for the previous report you meant that the text is left-justified not left-aligned.

I’m probably confused due the name of the method, setAlign

At this point, I’m happy enough with the layout approach so you don’t need to pursue the label icon approach.

Your problem with the new code is that you have setWidth("10") for your IconContainer class. You want it to fill it's container, which is the default, so just remove that setting entirely.

I removed setWidth and the label does fill the width. Unfortunately, it also fills the width even when the text doesn’t fill the width. It pads the text with white space. This has the unfortunate result of putting too much space between the image and the text for short labels.

I have attached a screenshot of results of the new code.

Hopefully, there is a combination of settings where I get the best of both worlds:

• When the label can fit on one line it doesn’t fill with white space pushing the image to the left corner
• When the label can’t fit on one line it wraps and is center justified. In this case, it’s OK if the image is pushed all the way to the left.

Here’s the modified code:

[B]public[/B] [B]class[/B] WrappingLabelPrototype [B]extends[/B] HLayout {
 
    [B]private[/B] [B]static[/B] String[] [I]labels[/I] = [B]new[/B] String[] {
            "short",
            "The Alarming Truth About Brad Pitt",
            "I will work for an America where highly-paid lobbyists and corporate executives cannot make a mockery of our iPhones." };
 
    [B]public[/B] WrappingLabelPrototype() {
        setWidth(500);
        setBorder("3px solid black");
        [B]for[/B] ([B]int[/B] i = 0; i < [I]labels[/I].length; i++) {
            addMember([B]new[/B] LabelContainer([I]labels[/I][i]));
        }
    }
 
    [B]private[/B] [B]class[/B] LabelContainer [B]extends[/B] VLayout {
 
        [B]public[/B] LabelContainer(String label) {
            setBorder("3px solid red");
            addMember([B]new[/B] IconContainer(label));
            setDefaultLayoutAlign(Alignment.[B][I]CENTER[/I][/B]);
        }
 
    }
 
    [B]private[/B] [B]class[/B] IconContainer [B]extends[/B] HLayout {
 
        [B]public[/B] IconContainer(String labelContent) {
            setBorder("3px solid blue");
            setMembersMargin(3);
            addMember([B]new[/B] Img("ConversationGuide/RedDot.png", 18, 18));
            addMember([B]new[/B] CenterLabel(labelContent));
        }
 
    }
 
    [B]private[/B] [B]class[/B] CenterLabel [B]extends[/B] Label {
 
        [B]public[/B] CenterLabel(String contents) {
            [B]super[/B](contents);
            setAlign(Alignment.[B][I]CENTER[/I][/B]);
            setValign(VerticalAlignment.[B][I]TOP[/I][/B]);
        }
    }
}

[Isomorphic]

You've got an ambiguously-defined sizing algorithm here - the problem is that whether a given piece of text "fits" is related to how big the other items are. For example, if you have a short piece of text somewhere, and that particular IconContainer shrinks to fit, another IconContainer, possibly earlier in the layout, might now have room for text to occupy one line - with room to spare.

There are ways to "solve" all of this, with offscreen rendering to measure all of the text lengths up front, and heuristics similar to the legacy heuristics that <table> elements apply in the absence of specified sizes. This is a pretty complicated deep-dive, so the first question is, is this particular presentation of data extremely high value for your application, such that it's worse diving into offscreen measurement and such? Because this doesn't seem like a particularly good use of space even if you can implement a sizing algorithm that does what you're hoping for: you'll still have a bunch of blank space underneath the items that have shorter text, burning all the space that is required for the longest text, but displaying nothing in the empty space below the shorter text.

[dbscott525]

is this particular presentation of data extremely high value for your application, such that it's worse diving into offscreen measurement and such?

The answer to this question is no.

So I’m going to go back to using an label with an icon. This does everything I want except have the correct justification.

Can you please help get the right settings so that I get:

• A label with an icon
• The label wraps text when it can’t fit in the space
• The text is center justified

The code that attempts to do this is in a previous posting.

[Isomorphic]

As we mentioned, we'll be looking at the issue where text becomes left-justified when an icon is present.

Note that the issues with auto fitting that we mentioned still apply to a set of Label elements, just as they do to a set of compound components consisting of a Label and separate Img.

[Isomorphic]

We've now made a change to branches 5.1 and above to ensure that wrapped text within a center-aligned Label shows up in the center of the label and center-justified (so each row of text appears centered under the previous row) when an icon is present.

This will be in the next nightly build (dated April 30 or above)

Regards
Isomorphic Software

[dbscott525]

Thank you very much. I will try this out soon.