Resizing fonts/controls causes scrollbar to be displayed.

[stonebranch3]

Isomorphic,

I have a form with a TextAreaItem that expands to fill the height of the form. This works as expected when using the default font/control size, however, increasing the font/control size causes a scrollbar to be displayed.



The follow entry point can be used to reproduce the issue.

@Override
public void onModuleLoad() {
    Canvas.resizeFonts(2);
    Canvas.resizeControls(2);

    HLayout mainLayout = new HLayout();
    mainLayout.setWidth("50%");
    mainLayout.setHeight("50%");

    VLayout detailsLayout = new VLayout();

    CheckboxItem item1 = new CheckboxItem("Item1");
    item1.setLabelAsTitle(true);

    SelectItem item2 = new SelectItem("Item2");

    TextAreaItem item3 = new TextAreaItem("Item3");
    item3.setWidth("*");
    item3.setHeight("*");

    DynamicForm form = new DynamicForm();
    form.setNumCols(1);
    form.setHeight("*");
    form.setPadding(2);
    form.setCellPadding(3);
    form.setTitleOrientation(TitleOrientation.TOP);
    form.setItems(item1, item2, item3);

    VLayout formLayout = new VLayout();
    formLayout.setPadding(3);
    formLayout.setMembersMargin(15);
    formLayout.setCanHover(Boolean.FALSE);

    formLayout.addMember(form);

    TabSet tabSet = new TabSet();
    tabSet.setPaneMargin(3);
    Tab tab1 = new Tab("Tab1");
    tab1.setPane(formLayout);
    tabSet.addTab(tab1);
    detailsLayout.addMember(tabSet);

    mainLayout.addMember(detailsLayout);
    mainLayout.show();
}

SmartClient Version: v12.1p_2020-09-29/Pro Deployment (built 2020-09-29)

Thanks

[stonebranch3]

Hi Isomorphic,

Have you had a chance to review this?

Thanks

[Isomorphic]

Sorry for the delay, we have been able to reproduce the problem and we're looking at the best way to solve it.

[Isomorphic]

We've made a change to address this.

Please retest with a build dated June 12 or later.

[Isomorphic]

A quick update on this report - the change we applied on June 11 addresses this issue in 13.0, but doesn't fully work on 12.1.

We're revisiting the problem today and will update here shortly.

[Isomorphic]

It took some time to get back to this, but changes have been made and you should find things working as you expect as of today's 12.1/13.0 builds, dated June 21 or later.

[stonebranch3]

Hi Isomorphic,

Thanks for the fix; it resolved the issue with the scrollbar.

There is a spacing issue when specifying titles for some items on the form which can be reproduced with the following test code.

@Override
public void onModuleLoad() {
    Canvas.resizeFonts(2);
    Canvas.resizeControls(2);

    HLayout mainLayout = new HLayout();
    mainLayout.setWidth("50%");
    mainLayout.setHeight("50%");

    VLayout detailsLayout = new VLayout();

    CheckboxItem item1 = new CheckboxItem("item1", "Item 1");
    item1.setLabelAsTitle(Boolean.TRUE);

    SelectItem item2 = new SelectItem("item2", "Item 2");

    TextAreaItem item3 = new TextAreaItem("item3", "Item 3");
    item3.setWidth("*");
    item3.setHeight("*");

    DynamicForm form = new DynamicForm();
    form.setNumCols(1);
    form.setHeight("*");
    form.setPadding(2);
    form.setCellPadding(3);
    form.setTitleOrientation(TitleOrientation.TOP);
    form.setItems(item1, item2, item3);

    VLayout formLayout = new VLayout();
    formLayout.setPadding(3);
    formLayout.setMembersMargin(15);
    formLayout.setCanHover(Boolean.FALSE);

    formLayout.addMember(form);

    TabSet tabSet = new TabSet();
    tabSet.setPaneMargin(3);
    Tab tab1 = new Tab("Tab1");
    tab1.setPane(formLayout);
    tabSet.addTab(tab1);
    detailsLayout.addMember(tabSet);

    mainLayout.addMember(detailsLayout);
    mainLayout.show();
}

The form will now look like below with extra space below Item 1 and Item 3.



Thanks!

[Isomorphic]

Thanks for the report - this one's been fixed for tomorrow's builds, dated July 23 and later.

If you're interested, the problem was that we weren't propagating wrapTitle/wrapItemTitles to the element we use to measure and reserve space for the title-height with top-orientation - so, in this case, it wrapped at the space and reserved space for two lines, but correctly only output one.

[stonebranch3]

Hi Isomorphic,

I'm using the July 24 build and I noticed that a CheckboxItem still has extra space when using longer titles.

For example,

CheckboxItem item1 = new CheckboxItem("item1", "This is the title for Item 1");
item1.setLabelAsTitle(Boolean.TRUE);

It seems to be related to the width of the CheckboxItem since explicitly setting the width can resolve it, however, I didn't expect the width to matter when using the label as title option.

Thanks

[stonebranch3]

Hi Isomorphic

We're still seeing a gap with the CheckBoxItem when the title exceeds a certain length as you can see below.




I'm calling setWrapTitle(false) on the CheckboxItem as a work-around for now.

public void onModuleLoad() {
        Canvas.resizeFonts(2);
        Canvas.resizeControls(2);

        VLayout layout = new VLayout();
        layout.setWidth(220);
        layout.setHeight(300);
        layout.setBorder("1px solid #6a6a6a");
        layout.setLayoutMargin(5);

        final DynamicForm form = new DynamicForm();
        form.setNumCols(1);
        form.setTitleOrientation(TitleOrientation.TOP);
        form.setHeight("*");

        CheckboxItem item1 = new CheckboxItem();
        item1.setLabelAsTitle(Boolean.TRUE);
        item1.setTitle("Item 1");

        TextItem item2 = new TextItem();
        item2.setTitle("Item 2");
        item2.setWidth("*");

        CheckboxItem item3 = new CheckboxItem();
        item3.setLabelAsTitle(Boolean.TRUE);
        item3.setTitle("Long Title For Item Three");

        TextItem item4 = new TextItem();
        item4.setTitle("Item 4");
        item4.setWidth("*");

        form.setFields(item1, item2, item3, item4);

        layout.addMember(form);
        layout.draw();
    }

SmartClient Version: v12.1p_2022-04-05/Pro Deployment (built 2022-04-05)
Stratus Theme
Chrome
Windows

Thanks

[stonebranch2]

Hi Isomorphic,

We are still seeing odd spacing.

For example, you can see there is inconsistent spacing between these checkbox items.



Any thoughts?

Thanks

[stonebranch2]

FYI, the checkbox.setWrapTitle(Boolean.FALSE); workaround still works, but curious why that is needed.

[stonebranch2]

We are currently using SmartClient Version: v12.1p_2022-12-29/Pro Deployment (built 2022-12-29).

[Isomorphic]

Thanks for the bump - we'll take another look at this sizing issue and update here when we have more information.

[Isomorphic]

We have a fix in for this issue in 13.1 - assuming nothing unexpected, we'll port back for tomorrow's builds.