VLWEB REMOVE "X" ICON BESIDE A FIELD ON IE

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
ArnoldAvancena
Posts: 2
Joined: Wed Jan 18, 2017 10:10 pm

VLWEB REMOVE "X" ICON BESIDE A FIELD ON IE

Post by ArnoldAvancena » Wed Jan 10, 2018 5:29 pm

Is there a way to remove the "X" Icon on Fields?

I am only encountering this issue when I run my site on IE.
X ICON.PNG
X ICON.PNG (2.07 KiB) Viewed 2462 times
Chrome works fine. It doesn't show any X Icon beside the field.
Chrome.PNG
Chrome.PNG (1.55 KiB) Viewed 2462 times

jyoung
Posts: 667
Joined: Thu Jan 21, 2016 6:43 am
Location: Oklahoma City, OK USA

Re: VLWEB REMOVE "X" ICON BESIDE A FIELD ON IE

Post by jyoung » Thu Jan 11, 2018 1:16 am

What Field type are you using?

ArnoldAvancena
Posts: 2
Joined: Wed Jan 18, 2017 10:10 pm

Re: VLWEB REMOVE "X" ICON BESIDE A FIELD ON IE

Post by ArnoldAvancena » Thu Jan 11, 2018 11:17 am

It's a SIGNED(6,0) Type of Field
FIELD TYPE.PNG
FIELD TYPE.PNG (4.26 KiB) Viewed 2434 times

jyoung
Posts: 667
Joined: Thu Jan 21, 2016 6:43 am
Location: Oklahoma City, OK USA

Re: VLWEB REMOVE "X" ICON BESIDE A FIELD ON IE

Post by jyoung » Fri Jan 12, 2018 1:50 am

So this is kinda interesting but unfortunately I don't know how to fix it.
For some reason, LANSA seems to be rendering numeric types as telephone numbers.

If you look at the rendered HTML you for the input you see

Code: Select all

<input tabindex="0" style="background: rgba(0, 0, 0, 0); border-width: 0px; padding: 0px; left: 3px; top: 1px; width: 112px; height: 19px; text-align: left; color: rgb(48, 48, 48); font-family: verdana,verdana; font-size: 9pt; font-style: normal; font-weight: normal; text-decoration: none; white-space: normal; position: absolute; cursor: text; -ms-overflow-x: auto; -ms-overflow-y: auto; box-sizing: border-box;" spellcheck="false" type="tel">
Notice the type=tel. I've never noticed this before as I mostly use Chrome and it does not show the decorations, but it looks like every numeric type is rendered using this type.

Here is a STD_NUM Field rendered in Chrome

Code: Select all

<input spellcheck="false" type="tel" tabindex="0" style="padding: 0px; white-space: normal; background: rgba(0, 0, 0, 0); position: absolute; overflow: auto; box-sizing: border-box; border-style: none; outline: none; border-width: 0px; cursor: text; resize: none; left: 3px; width: 198px; height: 19px; text-align: left; font-family: verdana, verdana; font-size: 9pt; font-weight: normal; font-style: normal; text-decoration: none; top: 1px; color: rgb(48, 48, 48);">
And a STD_INT Field rendered in Chrome

Code: Select all

<input spellcheck="false" type="tel" tabindex="0" style="padding: 0px; white-space: normal; background: rgba(0, 0, 0, 0); position: absolute; overflow: auto; box-sizing: border-box; border-style: none; outline: none; border-width: 0px; cursor: text; resize: none; left: 3px; width: 93px; height: 17px; text-align: left; font-family: verdana, verdana; font-size: 9pt; font-weight: normal; font-style: normal; text-decoration: none; top: 1px; color: rgb(48, 48, 48);">
Browsers are now responding to these types in different ways by rendering a "decoration" when the field is focused. A type of "tel" will render the X, and a type of "number" will render the "up/down" arrows when it is focused.

To make matters, more confusing, some browsers will render the decorations and some will not, as you are experiencing with Chrome and IE.

Gotta love web development. ;)

https://developer.mozilla.org/en-US/doc ... /input/tel

The only way I know how to fix it is to not include the type on the input, but I don't think LANSA allows us to do that.
If its a really big issue for you, you could create a widget to display a normal input and use it in place of the Field on your UI.
There may be some other ways using Javascript to remove the type attribute, but that is likely more trouble than its worth.

Perhaps someone from LANSA can comment on this?

BTW: It would be really nice to tag someone on these forums, Danny Yoorburg may be able to shed some light on it.

dannyoorburg
Posts: 176
Joined: Mon Jan 04, 2016 9:50 am
Location: Australia

Re: VLWEB REMOVE "X" ICON BESIDE A FIELD ON IE

Post by dannyoorburg » Fri Jan 12, 2018 10:03 am

Hi,

Of course LANSA people look at the forum 😊

type="tel" gave us the correct keyboard on mobile without interfering with the UI.

The 'X' is not related to type="tel". It is just something that IE/EDGE do on input elements.

Danny
Last edited by dannyoorburg on Wed Jan 17, 2018 3:53 pm, edited 1 time in total.

User avatar
Stewart Marshall
Posts: 417
Joined: Thu Nov 05, 2015 5:25 pm

Re: VLWEB REMOVE "X" ICON BESIDE A FIELD ON IE

Post by Stewart Marshall » Wed Jan 17, 2018 2:28 pm

The "Clear" button on inputs in IE is miserable, but you're kinda stuck with it I think.

https://developer.mozilla.org/en-US/doc ... :-ms-clear
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

Post Reply