Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Reducing with of SelectItem causes not great look

    (13.0-d20211002)
    Hello there fellow coders,

    I am using a SelectItem with a custom control, just like in your showcase example
    (https://www.smartclient.com/smartgwt...bobox_category)

    However, i am trying to reduce the width, and that gives the dropdown a suboptimal look, see screenshot. Basically the scrollview sticks out.

    Click image for larger version  Name:	Screenshot 2021-11-18 at 06.53.16.png Views:	0 Size:	59.7 KB ID:	266869

    Here's what i woud like to happen:

    1. Reduce the width of the dropdown to, say 200 pixels, and have it look "normal", i.e. the check/uncheck and the line under it to go the full width.
    2. Have the selectitem and the dropdown be the same width. In my code below i've tried setting the picklist, selectitem to the same width, 200, in vain.

    I guess it's something with some style, that if it's too narrow the rows don't fit or something? If i set the selectitem with large, it works.

    Pointers appreciated.

    EDIT!: I added Canvas.resizeControls(20) to emphasize another thing i found:
    I do not want to hide the dropdown when the user clicks on "Check none", so i removed the picklist.hide from the ClickHandler as you can see in the exxample.
    However if you do that, you'll notice that the entire dropdown jumps to become less wide when you click! Try it yourself, it happens even if you set no widths manually. It should be enough to just remove the picklist.hide from your example. This doesn't look great.

    My code example:
    Code:
    public void onModuleLoad() {
    
            Canvas.resizeControls(20);
            DataSource ds = new BananaDS();
            final DynamicForm form = new DynamicForm();
            form.setWidth(500);
    
            SelectItem multipleSelect = new SelectItem("multipleSelect");
            multipleSelect.setWidth(200);
            multipleSelect.setPickListWidth(200);
            multipleSelect.setTitle("Select items");
    
            multipleSelect.setDisplayField("name");
            multipleSelect.setValueField("id");
            multipleSelect.setMultiple(true);
    
            /*ListGridField name = new ListGridField("name", "Name");
            ListGridField desc = new ListGridField("desc", "Desc");
            multipleSelect.setPickListFields(name, desc);*/
            multipleSelect.setMultiple(true);
            multipleSelect.setOptionDataSource(ds);
    
            ToolStrip toolStrip = new ToolStrip();
            toolStrip.setHeight(30);
            toolStrip.setWidth100();
    
            ToolStripButton checkAllButton = new ToolStripButton();
            checkAllButton.setWidth("50%");
            checkAllButton.setTitle("Check");
            checkAllButton.addClickHandler(event -> {
                SelectItem selectItem = (SelectItem) form.getField("multipleSelect");
                ListGridRecord records[] = selectItem.getClientPickListData();
                String[] values = new String[records.length];
                for (int i = 0; i < records.length; i++) {
                    values[i] = records[i].getAttributeAsString("itemID");
                }
                selectItem.setValues(values);
                //PickListMenu pickList = (PickListMenu) selectItem.getCanvasAutoChild("pickList");
                //pickList.hide();
            });
            ToolStripButton checkNoneButton = new ToolStripButton();
            checkNoneButton.setWidth("50%");
            checkNoneButton.setTitle("Uncheck");
            checkNoneButton.addClickHandler(event -> {
                SelectItem selectItem = (SelectItem) form.getField("multipleSelect");
                selectItem.setValues(new String[0]);
                PickListMenu pickList = (PickListMenu) selectItem.getCanvasAutoChild("pickList");
                pickList.hide();
            });
            toolStrip.addMember(checkAllButton);
            toolStrip.addMember(checkNoneButton);
    
            ListGrid pickListProperties = new ListGrid();
            pickListProperties.setGridComponents(toolStrip, ListGridComponent.HEADER, ListGridComponent.BODY);
            multipleSelect.setPickListProperties(pickListProperties);
    
            form.setFields(multipleSelect);
            form.draw();
        }
    Last edited by mathias; 17 Nov 2021, 22:21.
Working...
X