How to display when a dropdown selection is too long?

Question

I am working with a dropdown that has a longer option included. When the long option is selected, the selection is cut off when the user is on mobile.

Ideally I would like to keep this as a dropdown to reduce vertical scroll since there are several other questions on the same page. I understand that I could go the route of swapping dropdown for radio selection, but I'm curious if there are other options or ways to improve this that I'm not aware of?

Answer 1

For the closed dropdown, you have only two options: either make the dropdown wider or use a smaller font. The behavior you are seeing is the native behavior of the browser, so it will always be displayed like that.

Regarding the open dropdown (the list view), you can present it as you currently have it with two rows, or you can make the list wider instead of narrower as you have it now, or alternatively, you can use a smaller font.

This is a general guide, and it's possible that instead of using a <select> element, you may need to use just a <div> element with JavaScript for the dropdown effect.

Now, for your specific case, I notice that the toggle takes up a lot of space and seems a bit redundant. So, I think you can use something like this:

<label>Allow Virtual Appointments</label>
  <select>
    <option>Yes, in-person and virtual appointments</option>
    <option>Virtual appointments only</option>
    <option>No, do not allow virtual appointments</option> 
  </select>

This way, you still have the user selection, just getting rid of an additional element, improving usability and pattern recognition, which reduces cognitive load.