web-dev-qa-db-fra.com

Comment corriger la largeur de la zone de recherche dans le composant de liste déroulante réagit-sélect?

J'utilise le composant de liste déroulante réagit-sélectif dans mon application réactif. j'ai trouvé un problème étrange qui, lorsque l'utilisateur commence à taper pour rechercher un élément dans la liste déroulante de réaction-sélection, la zone de texte de recherche devient extensible et que ce n'est pas une liste déroulante fixe.

S'il vous plaît voir ci-dessous l'image. Comment puis-je corriger la largeur de la zone de texte de recherche pour réagir-sélectionner la largeur?

 enter image description here

reactjsreact-select
5
Kamlesh Shirbhate

Il suffit de mettre

autosize={false}

sur le composant.

9
nixxblu

J'ai eu le même problème. J'ai inspecté le navigateur et découvert que si je définissais une largeur de 82%, mon problème serait résolu. J'ai donc ajouté cela dans la balise "Select" et ça marche

  <Select

      value={this.state.passwordExpire}
      onChange={this.updatepasswordExpire.bind(this)}
      options={optionsDays}
      style={{width: '82%'}}  
 />
0
Himura Da Battosuai

Vous pouvez essayer avec ce css. 

.Select-input {  
  position: absolute !important; 
  width: calc(~'100% - 0px');
}

.Select-value-label {
  display: none !important;
}

.Select-value {
  position: relative !important;
}

.Select-menu-outer {
  width: auto;
  min-width: 100%;
  text-align: left;
}

.Select-option {
  white-space: nowrap;
}

.Select-control {
  min-width: 100%;
  width: auto;
  text-align: left;
}
0
Namish
.Select-control {
    table-layout: fixed;
}

.Select-input {
    overflow: hidden;
    max-width: 100%;
}

Voici la solution ..

0
Gaurav Bansal