'Select Dropdown going out of screen in mobile view

I got select dropdown which is going out of screen in mobile view. I'm using bootstrap class form-control. My code is as below

<select name="service" formControlName="service" class="form-control shadow-none" style="width:100%">
      <option value="Select" selected>Select</option>
      <option value="Sedan" selected>Sedan</option>
      <option value="SUV" selected>SUV</option>
      <option value="Mini" selected>Mini</option>
</select>

enter image description here

Any kind of help will be appreciated...

htmlcssbootstrap-4


Solution 1:[1]

Since you are using a select element then each phone operating system will render the list of items using its default styling.

iOS example link

Android example link

Solution 2:[2]

This is only because of you are check the mobile view in Desktop browser.

In real devices this is not causing any problem and adjust width as per the device width.

and the select options list opens differently as per the OS means in android devices it opens as a drop-down list and in IOs devices it open like a pop-over.

try to open this page in real device not in mobile view of desktop browser.

I hope this answer will clear your all doubts.

Thank you...

Solution 3:[3]

You can try using media-queries for mobile devices and give fixed width for form elements when loaded below certain resolutions: @mediaonlyscreenand(max-width:600px){select{width:200px!important;}}

Solution 4:[4]

Sometimes these occurences happen if you're working on responsive web applications. These is likely caused by browser incompatibility that results to an abnormal behavior.

I suggest use the property auto

<select name="service" formControlName="service" class="form-control shadow-none" style="width:auto">
      <option value="Select" selected>Select</option>
      <option value="Sedan" selected>Sedan</option>
      <option value="SUV" selected>SUV</option>
      <option value="Mini" selected>Mini</option>
</select>

Edit: Try putting position: absolute with width: 100%. should pull that div outside of the container. You're asking an element to stretch wider than its parent, which is generally not recommended practice.

Solution 5:[5]

This is normal. When you view the browser's moblie mode, there is a mechanism that clearly shows your selection and drop-down menu. These sections look different when you open them with a real mobile device.

There is another way you can manage this. That is, you will manually create a selection or drop-down menu not with the select tag but with other tags.

Solution 6:[6]

try another browser then chrome the error will be solved.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andreas Traganidas
Solution 2 KuldipKoradia
Solution 3 Kumar Abhishek
Solution 4 E_net4 - Krabbe mit Hüten
Solution 5 Vương Hữu Thiện
Solution 6 user18782865

Related Questions