Sto usando lo flexbox layout per stilare un elenco di attività passate. La descrizione del compito e il tempo saranno sempre di lunghezza molto variabile.flexbox | elemento flessibile che viene espulso dal div contenente (fuori dallo schermo)
Tutto sembra perfetto finché non viene immessa una descrizione dell'attività che è abbastanza lunga da avvolgere su una seconda riga e quindi l'elemento "orario" (all'estrema destra dello schermo) viene leggermente spostato verso destra - fuori dallo schermo - nascondendo alcuni dei contenuti.
Si può vedere la descrizione breve visualizza perfettamente sotto, ma quella lunga spinge quello che dovrebbe essere '00: 08 'fuori dallo schermo E la descrizione dell'attività si sposta anche a sinistra !!
Ecco a fiddle per il codice (che è al di sotto come da regolamento di StackOverflow). Se si modifica il riquadro ridimensionando il risultato, il '00: 08 'non cade dalla pagina ma si sposta chiaramente troppo verso destra.
Lo screenshot precedente è in Chrome o Safari (i due browser che stavo utilizzando) quando si riduce la larghezza della finestra finché la descrizione non si inserisce su una seconda riga.
Vorrei che tutto fosse visualizzato secondo la prima riga (breve descrizione) se possibile! E anche per capire perché questo si comporta come è attualmente.
P.S. Ho provato a usare i float e ad usare un layout di visualizzazione da tavolo, ma entrambe queste tecniche hanno causato alcuni bug, principalmente a causa del contenuto di lunghezza variabile (quindi per favore non suggerirli come alternative :)).
ul {
margin:0;
padding: 0;
}
#tasklist{
width: 100%;
}
.task-one-line{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
align-item: baseline; /*flex-end*/
display: -webkit-flex;
-webkit-flex-direction:row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
-webkit-align-item: baseline;
border-bottom: 1px solid #d3d3d3;
width: 100%;
}
.task-one-line i{
width:1.5em;
padding: 0.5em 0.3em 0.5em 0.3em;
/*border: 1px solid green;*/
}
span.task-desc{
flex-grow: 5;
-webkit-flex-grow: 5;
text-align:left;
padding: 0.3em 0.4em 0.3em 0.4em;
/*border: 1px solid red;*/
}
span.task-time{
flex-grow: 1;
-webkit-flex-grow: 1;
flex-basis:4em;
-webkit-flex-basis:4em;
text-align:right;
padding: 0.3em 0.5em 0.3em 0.5em;
/*border: 1px solid blue ;*/
}<ul id="tasklist">
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">And a short one</span>
<span class="task-time">00:01</span>
</li>
<li class="task-one-line">
<i class="fa fa-check-circle-o"></i>
<span class="task-desc">Here's a super long long long long long long description that might wrap onto another line</span>
<span class="task-time">00:08</span>
</li>
</ul>
Grazie per questo @ Adamo - questo funziona in quel il timer ora viene visualizzato sullo schermo ma riporta il testo all'icona, causando un brutto problema di formattazione y il testo è disallineato da una riga a quella successiva: http://imgur.com/VtsaujO Conosci un modo per impedirlo? (Solo una breve nota, il tempo deve essere flessibile in quanto può arrivare fino a 9 caratteri, ma a partire da 5!). Grazie per il tuo aiuto finora. – iteles
Hai un link al tuo codice? Questa linea: '.task-one-line i.fa {flex: 0 0 auto; } 'avrebbe dovuto impedire che si verificasse un problema specifico. In Safari, è necessario anteporre il codice flexbox in modo che 'display: flexbox' diventi' display: -webkit-flexbox' e 'flex: 0 0 auto' diventa' -webkit-flex: 0 0 auto' (e così via). – Adam
Urrà! Sembrerebbe che la mia cache non sia stata cancellata correttamente, quindi l'ho cancellata 3 volte e ora sembra funzionare come previsto. Fantastico, grazie mille per il tuo aiuto. – iteles