Select options not shown on mobile devices Options

[Eddy mulder]

I am trying to make a small website with user accounts.
What I want to establish is that i can assign groups to a user account.
When I open a user profile you don’t see the assigned groups in the select form. When you click on it you do see them.
When opening the same page on a pc ,you see the options directly.

[pandy]

There's more than HTML involved here, isn't it?

[Eddy mulder]

There's more than HTML involved here, isn't it?

To fill the options, I use some php/ Java scripts but that is not the issue.
Even a simple example like below doesn’t display the options in the select field.
<h3> Select an Option:</h3>
<select>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Pineapple">Pineapple</option>
<option value="Papaya">Papaya</option>
</select>

[Christian J]

When I open a user profile you don’t see the assigned groups in the select form. When you click on it you do see them.

Do you mean you want the SELECT menu to open by itself? That might be done with the SIZE atribute.

If using the SELECTED attribute on more than one OPTION elements, you might use the MULTIPLE attribute on the SELECT element.

CODE

<select name="accounts[]" size="3" multiple>
<option>foo</option>
<option selected>bar</option>
<option>baz</option>
<option>lorem</option>
<option selected>ipsum</option>
<option>dolor</option>
</select>

When opening the same page on a pc ,you see the options directly.

Not sure what you meant here. Do you mean when opening HTML files directly from your local file system? Then PHP will not run, and maybe not javascript either.
Sorry, missed the part about mobile devices. Do you mean the SELECT menu doesn't open when you tap on it on a touch screen? Or doesn't the SIZE attribute work?

This post has been edited by Christian J: May 2 2023, 04:49 PM

[Eddy mulder]

When I open a user profile you don’t see the assigned groups in the select form. When you click on it you do see them.

Do you mean you want the SELECT menu to open by itself? That might be done with the SIZE atribute.

If using the SELECTED attribute on more than one OPTION elements, you might use the MULTIPLE attribute on the SELECT element.

CODE

<select name="accounts[]" size="3" multiple>
<option>foo</option>
<option selected>bar</option>
<option>baz</option>
<option>lorem</option>
<option selected>ipsum</option>
<option>dolor</option>
</select>

When opening the same page on a pc ,you see the options directly.

Not sure what you meant here. Do you mean when opening HTML files directly from your local file system? Then PHP will not run, and maybe not javascript either.
Sorry, missed the part about mobile devices. Do you mean the SELECT menu doesn't open when you tap on it on a touch screen? Or doesn't the SIZE attribute work?

The attached picture is from an test page which I used previously for testing.
See the what I see on a mobile device/ tablet..doesn’t matter if it is android or iOS based.
Looks like I have to find an other way to show the selectable options. Not sure then how I can manipulate the assignments

[Christian J]

To fill the options, I use some php/ Java scripts but that is not the issue.
Even a simple example like below doesn’t display the options in the select field.
<h3> Select an Option:</h3>
<select>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Pineapple">Pineapple</option>
<option value="Papaya">Papaya</option>
</select>

It must be something else. I tested in Brave browser, and a SELECT menu worked fine, even with SIZE and MULTIPLE attributes.

[Christian J]

The attached picture is from an test page which I used previously for testing.

Where does the text "0 onderdelen" come from?

[Eddy mulder]

The attached picture is from an test page which I used previously for testing.

Where does the text "0 onderdelen" come from?

That is what you see on android tablet / phone or iOS device (iPhone/iPad). It doesn’t matter then which browser I use so not sure where limits are caused.
If you select 1 option this will be shown ,but if you select 2 options you don’t see both selected directly in the window, you need to click on it.

[pandy]

How about an URL to the page in question, or to a test page that displays the problem?

[Eddy mulder]

How about an URL to the page in question, or to a test page that displays the problem?

Url is a local site/ web server so I can’t share this.
I have the issue also on the website https://www.w3schools.com/tags/tryit.asp?fi...=tryhtml_option
On the pc I see the available options directly but not on mobile devices.

[Christian J]

Where does the text "0 onderdelen" come from?

That is what you see on android tablet / phone or iOS device (iPhone/iPad). It doesn’t matter then which browser I use so not sure where limits are caused.
If you select 1 option this will be shown ,but if you select 2 options you don’t see both selected directly in the window, you need to click on it.

What I meant to say was that the text "0 onderdelen" isn't part of your code example:

Even a simple example like below doesn’t display the options in the select field.
<h3> Select an Option:</h3>
<select>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Pineapple">Pineapple</option>
<option value="Papaya">Papaya</option>
</select>

...so there must be something else going on.

[Christian J]

I have the issue also on the website https://www.w3schools.com/tags/tryit.asp?fi...=tryhtml_option
On the pc I see the available options directly but not on mobile devices.

For me it works the same on both mobile and desktop. To make the SELECT menu display fully opened, it needs a SIZE attribute (with the same value as the number of OPTION elements you want visible).

[Eddy mulder]

I have the issue also on the website https://www.w3schools.com/tags/tryit.asp?fi...=tryhtml_option
On the pc I see the available options directly but not on mobile devices.

For me it works the same on both mobile and desktop. To make the SELECT menu display fully opened, it needs a SIZE attribute (with the same value as the number of OPTION elements you want visible).

I found a demo which works better for me.
https://demo.mobiscroll.com/jquery/select/multiple-select#
There I see all selected values in 1 view so,will adjust my test script and test

[pandy]

I have the issue also on the website https://www.w3schools.com/tags/tryit.asp?fi...=tryhtml_option
On the pc I see the available options directly but not on mobile devices.

For me it works the same on both mobile and desktop. To make the SELECT menu display fully opened, it needs a SIZE attribute (with the same value as the number of OPTION elements you want visible).

Yeah, works for me too. You don't mean the different ways mobile browsers handle select, do you? I get a dropdown in a desctop browser and in FF mobile I get a "popup window" with radio buttons.

[Eddy mulder]

I have the issue also on the website https://www.w3schools.com/tags/tryit.asp?fi...=tryhtml_option
On the pc I see the available options directly but not on mobile devices.

For me it works the same on both mobile and desktop. To make the SELECT menu display fully opened, it needs a SIZE attribute (with the same value as the number of OPTION elements you want visible).

Yeah, works for me too. You don't mean the different ways mobile browsers handle select, do you? I get a dropdown in a desctop browser and in FF mobile I get a "popup window" with radio buttons.

That was perhaps a better way of explaining the ‘issue’ I have .
Is it possible to have the same view/ user experience on mobile devices and for example windows pc ?
Or is it not as simple as it looks.

[Christian J]

That was perhaps a better way of explaining the ‘issue’ I have .
Is it possible to have the same view/ user experience on mobile devices and for example windows pc ?
Or is it not as simple as it looks.

Perhaps not with the SELECT element. Maybe you could use checkboxes or radio buttons inside a DETAILS element: https://developer.mozilla.org/en-US/docs/We...Element/details or maybe create the entire thing with ordinary HTML, CSS and javascript (similar to a nav menu).

[Eddy mulder]

That was perhaps a better way of explaining the ‘issue’ I have .
Is it possible to have the same view/ user experience on mobile devices and for example windows pc ?
Or is it not as simple as it looks.

Perhaps not with the SELECT element. Maybe you could use checkboxes or radio buttons inside a DETAILS element: https://developer.mozilla.org/en-US/docs/We...Element/details or maybe create the entire thing with ordinary HTML, CSS and javascript (similar to a nav menu).

I want to have the nr of groups and its assignment to the user to be flexible so that when a new group is needed/ created i dont have to adjust any web page ...
The next issue i have is to update the mysql table (which has the mapping between the groups and users) after i have changed the group assignment for the selected user.

I am fairly new in web-design and programming... so struggeling a lot and maybe asking the incorrect questions

[Christian J]

I want to have the nr of groups and its assignment to the user to be flexible so that when a new group is needed/ created i dont have to adjust any web page ...
The next issue i have is to update the mysql table (which has the mapping between the groups and users) after i have changed the group assignment for the selected user.

That sounds like the HTML for the SELECT menus is generated by a server-side script (e.g. PHP, that in turn pulls data from a MySQL database)? If so the server-side script can create more OPTION elements for each new group/user in the database.