FormItemIcon with Button-Style?

[SimonF]

Hi there,
Is it possible to style a FormItem-Icon with the same style as a Button?
Currently it is possible to set the baseStyle of the formItem-Icon and this does come close to the solution, but the height of the FormItemIcon does not fit the height of the TextItem


The alternative would be to add a additional Button to the DynamicForm. But using this workaround would lead to a lot of "colspan" usages in large forms.

isc.HStack.create({
    "membersMargin": 10,
    "padding": 10,
    "members": [
        isc.DynamicForm.create({
            "ID": "statusForm_4",
            "selectOnFocus": true,
            "fields":
            [{
                    "name": "statusTextItem",
                    "title": "Status",
                    "type": "text",
                    "width": 200,
                    "icons":
                    [{
                            "click": function (p1, p2) {console.log("saved")},
                            "src": "https://cdn1.iconfinder.com/data/icons/prettyoffice9/16/edit-validated.png",
                            "baseStyle": "button"
                        }
                    ],
                    "selectOnClick": true,
                    "readOnlyDisplay": "static",
                    "showIcons": true
                }
            ],
            "values": {
                "statusTextItem": "Text"
            }
        }),
        isc.Button.create({
            "icon": "https://cdn1.iconfinder.com/data/icons/prettyoffice9/16/edit-validated.png",
            "title": "Button",
            "prompt": "test"
        })]
});

Best Regards

[Isomorphic]

FormItemIcons normally have a smaller height than their adjacent field because this is what looks right for things like calendar icons. But the height and width are settable if you are trying for a different, more button-like appearance.

[SimonF]

Thanks for the hints.

Setting the height of the FormItemIcon does indeed set the height, but not only from the surrounding button (blue part) but also from the icon itself.
Nontheless it it possible to set the right height for the FormItemIcon, but the button itself is shifted to the bottom and the formitem and the formItemIcon (styled as a button) are not on the same baseline. Note: I'm working with isc.TextItem.getInstanceProperty("height") to get the correct height of the TextItem when using different densities. For this example I had to add -4 to get the right height.


Is there any other suggestion how to archive this? The workaround with the button on the side of a FormItem is also not working, because the button is also not on the same baseline but shifted to the top.

Canvas.resizeControls(4);Canvas.resizeFonts(2);
isc.HStack.create({
    "membersMargin": 10,
    "padding": 10,
    "members": [
        isc.DynamicForm.create({
            "ID": "statusForm_4",
            "selectOnFocus": true,
            "fields":
            [{
                    "name": "statusTextItem",
                    "title": "Status",
                    "type": "text",
                    "width": 200,
                    "icons":
                    [{
                            "click": function (p1, p2) {console.log("saved")},
                            "src": "https://cdn1.iconfinder.com/data/icons/prettyoffice9/16/edit-validated.png",
                            "baseStyle": "button",                          
                            height: isc.TextItem.getInstanceProperty("height")-4
                        }
                    ],
                    "selectOnClick": true,
                    "readOnlyDisplay": "static",
                    "showIcons": true
                }
            ],
            "values": {
                "statusTextItem": "Text"
            }
        }),
        isc.Button.create({
            "icon": "https://cdn1.iconfinder.com/data/icons/prettyoffice9/16/edit-validated.png",
            "title": "Button",
            "prompt": "test"
        })]
});

Best Regards

[Isomorphic]

It looks as though you have not noticed formItem.iconVAlign. You want "center".