Change style of a dropdown in mobile view

hi all,

I understand how to change the style of my dropdowns when viewing on a laptop bu when I access the same dropdowns on a mobile phone it views in a style that I would like to change but dont know how to - screenshot of how the dropdown looks on mobile phone below - which I belive is the standard view for dropdowns whenviewed on mobile, I would be surprised if there is no way to change the style of this mobile dropdown. Any help apprecatied. Thanks.

Is there a way to configure a different style of mobile dropdown?

set a conditional formatting in the element editor based on when current page width is…

set to numbers you want to use for page breaks

1 Like

thanks for that. But how do change from this standard “radio button” dropdown view. Would refer to have it look like any other dropdown would look where it just views line ietms to select

image

but as I say it displays in a radio button type dropdown on mobile

So use what you know about formatting for a laptop view and re-format for a mobile view in the conditional settings for when the page width is a certain width.

Or just create a second drop down that is formatted for mobile and set the conditionals to hide / show based on the page width

I don’t have any issues with width on the page. Maybe it looks that way by the screenshots I’ve taken. The issue I have is…I don’t want to have radio button drop downs when viewing on mobile devices…that’s it. I have standard dropdowns when viewing on a PC but when I view my dropdowns on a mobile device…the are dropdowns with a radio button select…

I don’t know. I never need the standard drop down element had an option to show radio buttons…looking at the drop down element I don’t see any indication that there is a way to choose the style for radio buttons.

You might want to contact bubble to find out if they automatically change the style to a radio button on mobile, based on device and not screen width because when I test on a desktop for mobile responsiveness by making the browser width smaller, I’ve never noticed a change of drop down styling.

So I am not sure why that is happening to you, could be something to do with the browser, but I believe bubble could give you an accurate answer and solution.

OK, ya it’s strange alright. I can see from your screenshots that your dropdows are the same for both desktop and mobile views. Whereas Im getting the same as you for desktop but Im seeing dropdowns with radio buttons for mobile.

When a dropdown contains a lot of listed items, I need to scroll down through them to get to see all of them. There is no arrow or indicator at the bottom of dropdown items to tell me that there are more items further down. Is there a way I can have an arrow or some other type of indicator appear at the bottom of a dropdown, when there are more items to view that are not currently in view. If you know what I mean?

btw, can I test how it should look on a mobile device from a desktop?

I can ask Bubble about the radio button dropdown being visible in mobile view for me and not being able to change it. How would I direct question to them?

Yes, you can create your own custom drop down menu using the elements in bubble like a repeating group. Or use custom code.

As far as I know it is as simple as making your browser window smaller…alternatively you can use the responsive editor…but I am not 100% sure if there is something that bubble does to collect the type of device and thus a desktop browser set to width of 360px is recognized differently than a mobile phone.

Email them or post in the forum and tag them and hope they respond to the post.

Do you or anyone else in the forum provide advice on how that is done? I can use a gif of a down arrow I guess but how do I get it to appear when required is the question here ?

Any email address in particular or username ?

I’m not going to search for you and then post it here…search the internet, or the site…

Cheers. Thought there would be over this recommend over the others.