React-Select, Multi Select e Text Overflow

Sto utilizzando il componente React-Select con selezione multipla. Uno dei problemi che sto affrontando è che se l'utente seleziona 3 o 4 opzioni l'interfaccia utente sembra piuttosto male perché il testo inizia a traboccare e questo fa crescere il componente sia in orizzontale che in verticale.React-Select, Multi Select e Text Overflow

Voglio un comportamento in cui la dimensione del componente rimane la stessa e se l'utente seleziona più opzioni, mostra semplicemente "..." (puntini di sospensione) anziché provare a mostrare le nuove opzioni selezionate.

Il comportamento che voglio è più in linea con questa componente

http://instructure-react.github.io/react-select-box/

vedere come si gestisce la selezione multipla.

Non voglio scambiare componenti ora perché abbiamo eseguito molti test con React-Select.

Potete darmi alcune linee guida su come ottenere questo risultato senza rimuovere la selezione della reazione.

fonte

2016-02-02 Knows Not Much

reagire di selezione Si dovrebbe aggiungere un po 'di CSS per confinare reagire-select withing contenitore principale. per esempio 'max-width: 100%' e dai una certa larghezza al suo contenitore genitore. – WitVault

Non so quale CSS dovrei aggiungere per ottenere il comportamento desiderato. l'idea è che invece di crescere all'infinito dovrebbe mostrare solo i puntini di sospensione dopo che sono stati selezionati 3 (o x) elementi. –

@Knows Not much Qualsiasi soluzione per questo? – ApurvG

Questo è il codice HTML generato per il dato elemento

. react-select-box-container { 
 
    position: relative; 
 
    width: 240px; 
 
    display: inline-block; 
 
    background-color: #fff; 
 
    border-radius: 4px; 
 
    text-align: left; 
 
    box-shadow: 0 0 2px rgba(0, 0, 0, .3); 
 
} 
 

 
.react-select-box { 
 
    padding: 15px 0; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    border: none; 
 
    width: 100%; 
 
    text-align: left; 
 
    background-color: transparent; 
 
} 
 

 
.react-select-box:focus { 
 
    outline: 0; 
 
    box-shadow: 0 0 4px #0493D1; 
 
} 
 

 
.react-select-box:before { 
 
    content: ' '; 
 
    z-index: 1; 
 
    position: absolute; 
 
    height: 20px; 
 
    top: 15px; 
 
    right: 34px; 
 
    border-left: 1px solid #CBD2D7; 
 
} 
 

 
.react-select-box:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 23px; 
 
    right: 13px; 
 
    border-top: 6px solid #7B8E9B; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
} 
 

 
.react-select-box-label, 
 
.react-select-box-option { 
 
    line-height: 16px; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    color: #7B8E9B; 
 
} 
 

 
.react-select-box-label { 
 
    padding: 0 40px 0 20px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    color: #0493D1; 
 
} 
 

 
.react-select-box-empty .react-select-box-label { 
 
    color: #7B8E9B; 
 
} 
 

 
.react-select-box-click-outside-layer { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 2; 
 
} 
 

 
.react-select-box-clear { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 0; 
 
    width: 35px; 
 
    height: 20px; 
 
    background-color: #fff; 
 
    text-indent: -9999em; 
 
    z-index: 3; 
 
    border: none; 
 
} 
 

 
.react-select-box-clear:before { 
 
    content: 'Ã—'; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 10px; 
 
    z-index: 1; 
 
    background-color: #7B8E9B; 
 
    border-radius: 100%; 
 
    font-size: 13px; 
 
    color: #fff; 
 
    line-height: 1; 
 
    width: 15px; 
 
    height: 15px; 
 
    text-indent: 0; 
 
    text-align: center; 
 
} 
 

 
.react-select-box-clear:hover, 
 
.react-select-box-clear:focus { 
 
    outline: 0; 
 
} 
 

 
.react-select-box-clear:hover:before, 
 
.react-select-box-clear:focus:before { 
 
    background-color: #0493D1; 
 
} 
 

 
.react-select-box-hidden { 
 
    display: none 
 
} 
 

 
.react-select-box-options { 
 
    margin: 2px 0 0; 
 
    position: absolute; 
 
    padding: 10px 0; 
 
    width: 240px; 
 
    top: 100%; 
 
    left: 0; 
 
    z-index: 4; 
 
    background-color: #fff; 
 
    border-radius: 4px; 
 
    box-shadow: 0 0 2px rgba(0, 0, 0, .3); 
 
} 
 

 
.react-select-box-options-list { 
 
    list-style: none outside; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.react-select-box-option { 
 
    padding: 10px 20px; 
 
    margin: 0; 
 
    cursor: pointer; 
 
    display: block; 
 
    line-height: 1.2; 
 
    text-decoration: none; 
 
} 
 

 
.react-select-box-option:hover { 
 
    color: #0493D1; 
 
    background-color: #f4f4f4; 
 
} 
 

 
.react-select-box-option-selected { 
 
    color: #CBD2D7; 
 
} 
 

 
.react-select-box-multi .react-select-box-option { 
 
    padding-left: 42px; 
 
    position: relative; 
 
} 
 

 
.react-select-box-multi .react-select-box-option:before { 
 
    content: ' '; 
 
    position: absolute; 
 
    line-height: 1; 
 
    text-align: center; 
 
    left: 20px; 
 
    top: 9px; 
 
    border-radius: 3px; 
 
    height: 12px; 
 
    width: 12px; 
 
    margin-right: 10px; 
 
    border: 1px solid #7B8E9B; 
 
    background: #f9f9f9; 
 
    vertical-align: middle; 
 
} 
 

 
.react-select-box-multi .react-select-box-option-selected:before { 
 
    content: 'âœ“'; 
 
} 
 

 
.react-select-box-multi .react-select-box-option-selected { 
 
    color: #1F3344; 
 
} 
 

 
.react-select-box-option:focus, 
 
.react-select-box-option-focused { 
 
    color: #0493D1; 
 
    outline: 0; 
 
    background-color: #DDE2E5; 
 
} 
 

 
.react-select-box-close { 
 
    color: #0493D1; 
 
    text-transform: uppercase; 
 
    background-color: transparent; 
 
    border: none; 
 
    padding: 5px 0; 
 
    display: block; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
    outline: none; 
 
} 
 

 
.react-select-box-close:hover, 
 
.react-select-box-close:focus { 
 
    text-decoration: underline; 
 
} 
 

 
.react-select-box-empty .react-select-box-close { 
 
    color: #CBD2D7; 
 
} 
 

 
.react-select-box-native { 
 
    position: absolute; 
 
    left: -99999em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div class="react-select-box-container react-select-box-multi react-select-box-empty"> 
 
    <button id="react-select-box-2" class="react-select-box" tabindex="0" aria-hidden="true"> 
 
     <div class="react-select-box-label"> 
 
      Favorite Colors 
 
     </div></button> 
 

 
    <div class="react-select-box-options react-select-box-hidden" aria-hidden="true" tabindex="0"> 
 
    <div class="react-select-box-off-screen"> 
 
     <a id="react-select-box-2-0" href="#" class="react-select-box-option" tabindex="-1">Red</a> 
 
     <a id="react-select-box-2-1" href="#" class="react-select-box-option" tabindex="-1">Green</a> 
 
     <a id="react-select-box-2-2" href="#" class="react-select-box-option" tabindex="-1">Blue</a> 
 
    </div> 
 
    <button class="react-select-box-close">Close</button> 
 
    </div> 
 

 
    <div class="react-select-box-native"> 
 
    <label for="react-select-box-2-native-select">Favorite Colors</label> 
 
    <select id="react-select-box-2-native-select" multiple="multiple"> 
 
      <option value="red"> 
 
       Red 
 
      </option> 
 
    
 
      <option value="green"> 
 
       Green 
 
      </option> 
 
    
 
      <option value="blue"> 
 
       Blue 
 
      </option> 
 
      </select> 
 
    </div> 
 
</div>

fonte

2016-02-03 08:45:09 WitVault

fammi fare un tentativo –

Non cambia il comportamento per me –

@ ryan4888 usa alcuni stili di css in linea quindi – WitVault

React-Select, Multi Select e Text Overflow

risposta

Problemi correlati