Select options not shown on mobile devices |
Select options not shown on mobile devices |
Eddy mulder |
May 1 2023, 12:11 PM
Post
#1
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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. Attached thumbnail(s) |
pandy |
May 1 2023, 12:37 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
There's more than HTML involved here, isn't it?
|
Eddy mulder |
May 2 2023, 12:28 AM
Post
#3
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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 |
May 2 2023, 04:52 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
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> QUOTE When opening the same page on a pc ,you see the options directly. 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 |
May 3 2023, 11:24 AM
Post
#5
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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> QUOTE When opening the same page on a pc ,you see the options directly. 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 Attached thumbnail(s) |
Christian J |
May 3 2023, 05:07 PM
Post
#6
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
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 |
May 3 2023, 05:09 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
|
Eddy mulder |
May 7 2023, 07:36 AM
Post
#8
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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 |
May 7 2023, 07:47 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
How about an URL to the page in question, or to a test page that displays the problem?
|
Eddy mulder |
May 7 2023, 12:28 PM
Post
#10
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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 |
May 7 2023, 12:37 PM
Post
#11
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
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: QUOTE 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 |
May 7 2023, 12:40 PM
Post
#12
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
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 |
May 7 2023, 01:36 PM
Post
#13
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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 |
May 8 2023, 01:40 AM
Post
#14
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,735 Joined: 9-August 06 Member No.: 6 |
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 |
May 8 2023, 11:49 PM
Post
#15
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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 |
May 9 2023, 07:02 AM
Post
#16
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
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 |
May 10 2023, 07:08 AM
Post
#17
|
Group: Members Posts: 8 Joined: 1-May 23 Member No.: 28,919 |
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 |
May 10 2023, 10:40 AM
Post
#18
|
. Group: WDG Moderators Posts: 9,679 Joined: 10-August 06 Member No.: 7 |
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. |
Lo-Fi Version | Time is now: 5th June 2024 - 12:35 AM |