HTML SELECT on iOS Chrome doesnโ€™t show Finish

We have a problem displaying user interfaces in Chrome on iOS, especially with the HTML SELECT Drop Down element.

Example:

Using Safari, when you press SELECT, the spinner opens at the bottom of the screen, and you can click Finish to select your choice and return to the form.

But when you load the same page in Chrome on iOS, Finish does not appear. The user must select his choice, and then click elsewhere in the user interface to return to the form. Very unintuitive, and the user feels that SELECT is not working.

Does anyone have a solution for this?

(I would post photos to illustrate, but this is my first question, and I do not have enough "reputation" for this :-()

+7
source share
4 answers

I experienced the same thing, and it seems to me that there is a choice without the usual form tag and submit button. Without a selection, displays "X" to close the selection, and with the form / submit, the text "Finish" is displayed.

+1
source

The comment from howlee is certainly true for the link provided, but if you take the time to add another select element, it again displays X instead of the button you made.

So, I think that for 1 element it shows Done, for more than 1 it clicks from Done to X.

Maybe this is the functionality that they want to show, and we should leave it consistent?

: - S

+1
source

This seems to be a Chrome feature for iOS. I guess for Material Design reasons, they want to cover the regular iOS style.

It seems that X works just like the Finish button, and anyone using Chrome for iOS should be familiar with how it behaves.

I'm sure there are ways around, but they would be pretty hacks.

I have a feeling that it does not appear on the w3schools website, something is connected with all iframes.

0
source

For those who are still struggling with this issue, I found a fix for older versions of iOS.

Try to put the input field in a separate html file located in a different domain (there may also be a subdomain) and request this HTML code inside the frame on your web page. The button has the same functionality as another (more intuitive) name.

This workaround works for all other html inputs as well.

0
source

All Articles