Sélection d'une liste déroulante qui sort de l'écran en vue mobile

Question

J'ai sélectionné une liste déroulante qui sort de l'écran en vue mobile. J'utilise la classe bootstrap form-control . Mon code est le suivant

<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>

Toute forme d'aide sera appréciée...

Answer 1

C'est uniquement parce que vous vérifiez la vue mobile dans le navigateur de bureau.

Dans les appareils réels, cela ne pose aucun problème et la largeur est ajustée en fonction de la largeur de l'appareil.

et la liste des options de sélection s'ouvre différemment selon le système d'exploitation : dans les appareils Android, elle s'ouvre comme une liste déroulante et dans les appareils IOs, elle s'ouvre comme un pop-over.

essayez d'ouvrir cette page dans un appareil réel et non dans la vue mobile du navigateur de bureau.

J'espère que cette réponse éclaircira tous vos doutes.

Merci...

Answer 2

Comme vous utilisez un élément de sélection, chaque système d'exploitation de téléphone rendra la liste d'éléments en utilisant son style par défaut.

Exemple iOS lien

Exemple Android lien

Answer 3

Ces situations se produisent parfois si vous travaillez sur des applications Web réactives. Ils sont probablement dus à une incompatibilité de navigateur qui entraîne un comportement anormal.

Je suggère d'utiliser la propriété 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>

Edita: Essayez de mettre position : absolute avec width : 100%. Cela devrait faire sortir la div du conteneur. Vous demandez à un élément de s'étendre plus largement que son parent, ce qui n'est généralement pas une pratique recommandée.

Answer 4

Vous pouvez essayer d'utiliser des media-queries pour les appareils mobiles et donner une largeur fixe aux éléments de formulaire lorsqu'ils sont chargés en dessous de certaines résolutions : @mediaonlyscreenand(max-width:600px){select{width:200px!important;}}