Icon position in 12.1

[pavo123]

Hi Isomorphic,

using "SNAPSHOT_v12.1d_2018-08-30/PowerEdition Deployment (built 2018-08-30)" position of validator icon and FormItemIcon does not look good.


Using "v11.1p_2018-08-04/PowerEdition Deployment (built 2018-08-04)" it looks like it should look.



If you don't succeed reproduce it, I can create a test case.

Best regards
Pavo

[Isomorphic]

If you can post the definition of the item in your images, that will be sufficient

[pavo123]

Oh sorry, it's LinkItem.

[pavo123]

Hi Isomorphic,

the same problem using v12.0p_2018-09-12/PowerEdition Deployment (built 2018-09-12) for SelectItem.






Best regards
Pavo

[Isomorphic]

Again, if you can post the definition of the items in your images, that is, the actual settings you're applying, we can take a look.

[pavo123]

Hi Isomorphic,

sorry again. I see three problems you can see on gif:
1) On validator error if using icon, "Field1" becomes wider.
2) Border on "Field1" missing all the time.
3) Border on "Field2" missing just on hover.

package com.smartgwt.sample.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.i18n.shared.DateTimeFormat;
import com.google.gwt.i18n.shared.DateTimeFormatInfo;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.DateDisplayFormatter;
import com.smartgwt.client.util.DateParser;
import com.smartgwt.client.util.DateUtil;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter() {
            public String format(Date date) {
                if (date == null)
                    return null;
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                String format = dateFormatter.format(date);
                return format;
            }
        });

        DateUtil.setDateParser(new DateParser() {
            public Date parse(String dateString) {
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat format = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                Date date = format.parse(dateString);
                return date;
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {

        public MyWindow() {

            setWidth(800);
            setHeight(600);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            SC.logWarn(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            TestHL testHL = new TestHL();

            addItem(testHL);
        }

        private class TestHL extends VLayout {
            public TestHL() {

                FormItemIconTest formItemIconTest = new FormItemIconTest();

                SelectItemTest selectItemTest1 = new SelectItemTest("commonName");
                selectItemTest1.setIcons(formItemIconTest);

                SelectItemTest selectItemTest2 = new SelectItemTest("lifeSpan");

                final DynamicForm df = new DynamicForm();
                df.setWidth(300);
                df.setDataSource("animals");

                df.setFields(selectItemTest1, selectItemTest2);

                Button saveButton = new Button("save");
                saveButton.addClickHandler(new ClickHandler() {
                    @Override
                    public void onClick(ClickEvent event) {
                        df.saveData();
                    }
                });

                setMembers(df, saveButton);
            }
        }

        private class FormItemIconTest extends FormItemIcon {
            public FormItemIconTest() {
                setSrc("http://127.0.0.1:8888/builtinds/tools/images/database_gear.png");
                setInline(true);
                setTabIndex(-1);
            }
        }

        private class SelectItemTest extends SelectItem {
            public SelectItemTest(String name) {
                super(name);
                setAllowEmptyValue(true);
                setCanEdit(true);
                setRequired(true);
            }
        }
    }
}

Regards, Pavo

[pavo123]

Problem 1) (On validator error if using icon, "Field1" becomes wider.) is also happening for SpinnerItem and ComboBoxItem with the same applying settings .

[pavo123]

For TextItem and LinkItem:
1) forms are moving and becomes zoomed
2) forms changing height and width

package com.smartgwt.sample.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.i18n.shared.DateTimeFormat;
import com.google.gwt.i18n.shared.DateTimeFormatInfo;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.DateDisplayFormatter;
import com.smartgwt.client.util.DateParser;
import com.smartgwt.client.util.DateUtil;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter() {
            public String format(Date date) {
                if (date == null)
                    return null;
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                String format = dateFormatter.format(date);
                return format;
            }
        });

        DateUtil.setDateParser(new DateParser() {
            public Date parse(String dateString) {
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat format = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                Date date = format.parse(dateString);
                return date;
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {

        public MyWindow() {

            setWidth(800);
            setHeight(600);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            SC.logWarn(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            TestHL testHL = new TestHL();

            addItem(testHL);
        }

        private class TestHL extends VLayout {
            public TestHL() {

                FormItemIconTest formItemIconTest = new FormItemIconTest();

                SelectItemTest selectItemTest1 = new SelectItemTest("commonName");
                selectItemTest1.setIcons(formItemIconTest);

                SelectItemTest selectItemTest2 = new SelectItemTest("lifeSpan");

                final DynamicForm df = new DynamicForm();
                df.setWidth(300);
                df.setDataSource("animals");

                df.setFields(selectItemTest1, selectItemTest2);

                Button saveButton = new Button("save");
                saveButton.addClickHandler(new ClickHandler() {
                    @Override
                    public void onClick(ClickEvent event) {
                        df.saveData();
                    }
                });

                setMembers(df, saveButton);
            }
        }

        private class FormItemIconTest extends FormItemIcon {
            public FormItemIconTest() {
                setSrc("http://127.0.0.1:8888/builtinds/tools/images/database_gear.png");
            }
        }

        private class SelectItemTest extends TextItem {
            // private class SelectItemTest extends LinkItem {
            public SelectItemTest(String name) {
                super(name);
                setCanEdit(true);
                setRequired(true);
            }
        }
    }
}

[pavo123]

One more problem for LinkItem:
1) the right icon moves to the right

package com.smartgwt.sample.client;

import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.i18n.shared.DateTimeFormat;
import com.google.gwt.i18n.shared.DateTimeFormatInfo;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.util.DateDisplayFormatter;
import com.smartgwt.client.util.DateParser;
import com.smartgwt.client.util.DateUtil;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.FormItemIcon;
import com.smartgwt.client.widgets.form.fields.LinkItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        DateUtil.setShortDatetimeDisplayFormatter(new DateDisplayFormatter() {
            public String format(Date date) {
                if (date == null)
                    return null;
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat dateFormatter = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                String format = dateFormatter.format(date);
                return format;
            }
        });

        DateUtil.setDateParser(new DateParser() {
            public Date parse(String dateString) {
                DateTimeFormatInfo ddtfi = LocaleInfo.getCurrentLocale().getDateTimeFormatInfo();
                final DateTimeFormat format = DateTimeFormat.getFormat(ddtfi.formatYearMonthAbbrevDay());
                Date date = format.parse(dateString);
                return date;
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new MyWindow().show();
            }
        });
        addMember(recreateBtn);
        new MyWindow().show();
        draw();
    }

    private class MyWindow extends Window {

        public MyWindow() {

            setWidth(800);
            setHeight(600);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            SC.logWarn(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            TestHL testHL = new TestHL();

            addItem(testHL);
        }

        private class TestHL extends VLayout {
            public TestHL() {

                FormItemIconTest formItemIconTest1 = new FormItemIconTest(true);
                FormItemIconTest checkIcon = new FormItemIconTest(false);

                LinkItemTest selectItemTest1 = new LinkItemTest("commonName");
                selectItemTest1.setIcons(formItemIconTest1, checkIcon);

                final DynamicForm df = new DynamicForm();
                df.setWidth(300);
                df.setDataSource("animals");

                df.setFields(selectItemTest1);

                Button saveButton = new Button("save");
                saveButton.addClickHandler(new ClickHandler() {
                    @Override
                    public void onClick(ClickEvent event) {
                        df.saveData();
                    }
                });

                setMembers(df, saveButton);
            }
        }

        private class FormItemIconTest extends FormItemIcon {
            public FormItemIconTest(Boolean positionLeft) {
                setSrc("http://127.0.0.1:8888/builtinds/tools/images/database_gear.png");
                if (positionLeft) {
                    setInline(true);
                    setTabIndex(-1);
                }
            }
        }

        private class LinkItemTest extends LinkItem {
            public LinkItemTest(String name) {
                super(name);
                setCanEdit(true);
                setRequired(true);
            }
        }
    }
}

[pavo123]

Hi Isomorphic,

have you been able to reproduce these 4 bugs?

Best regards
Pavo

[Blama]

Hi Isomorphic,

any update on this one?

Best regards
Blama

[Blama]

Hi Isomorphic,

any update on this one? This sat now a while and is the one stopping us from moving to 12.0, as validation errors are quite common.

Best regards
Blama

[Isomorphic]

Apologies, this one slipped through the net - these seem like a couple of missing/innacurate error (over)-related styles in the skin, since over styles were new to 12.0 for FormItems - we'll take a look in the next day and get back to you when they're fixed.

[Isomorphic]

Digging into this logic, we've made a couple of internal skin changes - but there's another aspect to it.

Can you confirm that simply applying width:"*" to each of the misbehaving formItems fixes most of the sizing issues?

[Isomorphic]

Ok, we've made a bunch of changes here to address all of these reported issues.

The fixes include a missing css selector, a couple of skin-level settings and a couple of framework changes, all related to the items being in an error'd state, and all affecting all text-based items, not just LinkItem.

Please retest with a build dated October 13 or later.