textarea with scrollbar and inline icon aligned to the right

[gedri]

Hello Isomorphic,

We have a textarea with an inline icon aligned to the right.
We have an issue that when the textarea scrollbar appears, the icon is placed over the scroll bar.
I would like the icon to be placed to the left of the scrollbar when the scrollbar appears - can you suggest a way to achieve that?

The problem can be reproduced with this showcase example by setting the form item to type: "textarea" and typing multiple lines in the text area until the scrollbar appears:

var form = isc.DynamicForm.create({
    autoDraw: false,
    items: [{
        name: "search",
[B] type: "textarea",[/B]
        title: "Search Term",
        width: 200,
        suppressBrowserClearIcon:true,
        icons: [{
            name: "view",
            src: "[SKINIMG]actions/view.png",
            hspace: 5,
            inline: true,
            baseStyle: "roundedTextItemIcon",
            showRTL: true,
            tabIndex: -1
        }, {
            name: "clear",
            src: "[SKINIMG]actions/close.png",
            width: 10,
            height: 10,
            inline: true,
            prompt: "Clear this field",

            click : function (form, item, icon) {
                item.clearValue();
                item.focusInItem();
            }
        }],
        iconWidth: 16,
        iconHeight: 16
    }]
});

isc.VStack.create({
    width: "100%",
    members: [form]
});

We are using v12.0p_2020-02-13.

Thanks
Gil

[Isomorphic]

This kind of thing is, unfortunately, really difficult for us to do, since the means of testing whether a textarea is scrolling differs by platform and has several bugs, and the appearance (especially width) of the textArea scrollbar differs by both browser and OS platform.

What we would suggest is to instead just not inline the icon,. Then it will appear to the right of the scrollbar, and you can get the same simple "x" appearance.

This burns the same amount of space, since if the "x" were in there with the text, you would need to leave a bunch of white pad to avoid the text running into the "x".

And it wouldn't even really work, since long lines in a textarea create h-scrolling on some platforms, and on some platforms, long lines don't wrap and so would run under the "x".