How to define maximum label width while autoFit is set to TRUE

[aliska]

Hi,
I am not able to find a solution how to limit width of Label (or any Button) while property autoFit is set to TRUE.
I like autofit possibility.
But if I set really too long title to Label, then label is enlarged as much as possible to be the title completely visible and it could lead to unexpected layout.
I want to limit it to some maximum width => do not enlarge more than some "px" width or "%" of parent container.
If necessary then text should be clipped with "...".

For example if I set "isGroup" property on Canvas, then a frame with label is shown around the canvas contents.
But if group title is too long, it is not clipped, it does not respect canvas width and title is rendered in full length over the next widgets.
Layout is completely corrupted.

I need something similar also for menu ... if a title of menu item is too long, clip it from some specified maximum width (or something like this).
But if it is short enough, let's consume only as much space as necessary.

Do you have some hint how to limit it?
I can't find a solution :-(

Thanks,
Ales

[Isomorphic]

It sounds like you haven't found the maxWidth property at all. Go ahead and try that out. Also next time, remember to post what product and version you are using.

[aliska]

Maximum width is not respected, even if property "maxWidth" is set. Two examples:

DynamicForm with group label:

HLayout tmpMain = new HLayout();
tmpMain.setWidth(500);
tmpMain.setHeight(300);
tmpMain.setBackgroundColor("white");
tmpMain.setBorder("1px solid black");
tmpMain.setMargin(50);

TextItem tmpT1 = new TextItem();
tmpT1.setTitle("text 1");

final DynamicForm tmpForm = new DynamicForm() {{
Map tmpDefaults = getAttributeAsMap("groupLabelDefaults");
tmpDefaults.put("maxWidth", 250);
setAttribute("groupLabelDefaults", tmpDefaults, true);
}};
tmpForm.setWidth("50%");
tmpForm.setHeight100();
tmpForm.setItems(tmpT1);
tmpForm.setBackgroundColor("cyan");
tmpForm.setIsGroup(true);
tmpForm.setGroupLabelBackgroundColor("yellow");
tmpForm.setGroupBorderCSS("2px solid green");
tmpForm.setGroupTitle("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua");
//tmpForm.setGroupTitle("Normal title");

Canvas tmpCnv = new Canvas();
tmpCnv.setWidth("50%");
tmpCnv.setHeight100();
tmpCnv.setBackgroundColor("magenta");

tmpMain.addMember(tmpForm);
tmpMain.addMember(tmpCnv);

And example of Label within Layout:

HLayout tmpMain = new HLayout();
tmpMain.setWidth(500);
tmpMain.setHeight(300);
tmpMain.setMaxWidth(500);
tmpMain.setBackgroundColor("white");
tmpMain.setBorder("1px solid black");
tmpMain.setMargin(50);

Label tmpLbl = new Label();
tmpLbl.setAutoFit(true);
tmpLbl.setWrap(false);
tmpLbl.setMaxWidth(250);
tmpLbl.setBackgroundColor("cyan");
tmpLbl.setContents("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua");
//tmpLbl.setGroupTitle("Normal title");

Canvas tmpCnv = new Canvas();
tmpCnv.setWidth("50%");
tmpCnv.setHeight100();
tmpCnv.setBackgroundColor("magenta");

tmpMain.addMember(tmpLbl);
tmpMain.addMember(tmpCnv);

Check attached images for results.

Thanks,
Ales

[Isomorphic]

So again, you've totally forgotten to mention product and version. maxWidth used to only effect dragging.

[aliska]

Sorry, I forgot to mention it. I used the latest SmartGWT 5.1.
SmartClient Version: v10.1p_2017-02-13/LGPL Development Only (built 2017-02-13)
Browser: IE11 + FF51

[Isomorphic]

Take a look at the docs for maxWidth between 5.1 and 6.0 - in 6.0 maxWidth will affect treatment in a Layout, in 5.1 and earlier it didn't have this feature. Also, an overflow:visible widget (which is the default for Label) will never clip, so autoFit and maxWidth cannot be directly combined, however, you can draw an autofitting Label offscreen to find out the autofit size, then set that as the width.