Problema
Ho un punto in <select>cui uno dei suoi <option>valori di testo è molto lungo. Voglio <select>ridimensionare in modo che non sia mai più largo del suo genitore, anche se deve tagliare il testo visualizzato. max-width: 100%dovrebbe farlo.
Prima di ridimensionare:
Cosa voglio dopo il ridimensionamento:
Ma se carichi questo esempio di jsFiddle e ridimensioni la larghezza del pannello dei risultati in modo che sia più piccola di quella di <select>, puoi vedere che la selezione all'interno della <fieldset>scala non riesce a ridimensionarla.
Quello che vedo dopo il ridimensionamento:
Tuttavia, la pagina equivalente con a <div>anziché a<fieldset> viene ridimensionata correttamente. Puoi vederlo e testare le tue modifiche più facilmente se hai una <fieldset>e una <div>accanto all'altra su una pagina . E se elimini i <fieldset>tag circostanti , il ridimensionamento funziona. Il <fieldset>tag sta causando l'interruzione del ridimensionamento orizzontale.
Gli <fieldset>atti è come se ci fosse una regola CSS fieldset { min-width: min-content; }. ( min-contentsignifica, all'incirca, la larghezza più piccola che non fa traboccare un bambino.) Se lo sostituisco <fieldset>con un <div>conmin-width: min-content , sembra esattamente lo stesso. Eppure non esiste alcuna regola min-contentnei miei stili, nel foglio di stile predefinito del browser o visibile in Inspector CSS di Firebug. Ho provato a sovrascrivere tutti gli stili visibili <fieldset>in CSS Inspector di Firebug e nel foglio di stile di Firefox Form.css predefinito , ma questo non ha aiutato. Soprattutto scavalcando min-widthe widthnon ha fatto nulla.
Codice
HTML del fieldset:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>
Il mio CSS che dovrebbe funzionare ma non è:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
Il ripristino delle widthproprietà ai valori predefiniti non fa nulla:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Ulteriori CSS in cui provo e non riesco a risolvere il problema :
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}
Più dettagli
Il problema si verifica anche in questo esempio jsFiddle più completo e complicato , che è più simile alla pagina Web che sto effettivamente cercando di risolvere. Da ciò si può vedere che <select>non è questo il problema: anche un blocco inline divnon riesce a ridimensionare. Sebbene questo esempio sia più complicato, suppongo che la correzione per il caso semplice sopra risolverà anche questo caso più complicato.
[Modifica: vedi i dettagli del supporto del browser di seguito.]
Una cosa curiosa di questo problema è che se si impostadiv.wrapper { width: 50%; } , gli <fieldset>arresti si ridimensionano automaticamente nel punto in cui il full-size <select>avrebbe colpito il bordo della finestra. Il ridimensionamento avviene come se <select>fosse width: 100%, anche se <select>sembra che abbia width: 50%.
Se dai lo <select>stessowidth: 50% , quel comportamento non si verifica; la larghezza è semplicemente impostata correttamente.
Non capisco il motivo di quella differenza. Ma potrebbe non essere pertinente.
Ho anche trovato la domanda molto simile HTML fieldset consente ai bambini di espandersi indefinitamente . Il richiedente non è stato in grado di trovare una soluzione e indovina che non esiste una soluzione oltre alla rimozione di <fieldset>. Ma mi chiedo, se è davvero impossibile rendere <fieldset>giusto il display, perché? Ciò che in <fieldset>'s spec o CSS predefinito ( a partire da questa domanda ) fa sì che questo comportamento? Questo comportamento speciale è probabilmente documentato da qualche parte, poiché più browser funzionano in questo modo.
Obiettivo e requisiti di base
Il motivo per cui sto provando a farlo è parte della scrittura di stili mobili per una pagina esistente con una grande forma. Il modulo ha più sezioni e una parte è racchiusa in a <fieldset>. Su uno smartphone (o se si riduce la finestra del browser), la parte della pagina con il <fieldset>è molto più ampia rispetto al resto del modulo. La maggior parte del modulo ne limita la larghezza, ma la sezione <fieldset>non lo fa, costringendo l'utente a ridurre o scorrere verso destra per vedere tutta quella sezione.
Sono cauto nel rimuovere semplicemente il <fieldset>, poiché viene generato su molte pagine in una grande app, e non sono sicuro da quali selettori in CSS o JavaScript potrebbero dipendere da esso.
Posso usare JavaScript se necessario, e una soluzione JavaScript è meglio di niente. Ma se JavaScript è l'unico modo per farlo, sarei curioso di sentire una spiegazione del perché questo non è possibile usando solo CSS e HTML.
Modifica: supporto browser
Sul sito, devo supportare Internet Explorer 8 e versioni successive (abbiamo appena abbandonato il supporto per IE7), l'ultima versione di Firefox e l'ultima versione di Chrome. Questa pagina particolare dovrebbe funzionare anche su smartphone iOS e Android. Un comportamento leggermente degradato ma comunque utilizzabile è accettabile per Internet Explorer 8.
Ho riprovato il mio fieldsetesempio rotto su diversi browser. In realtà funziona già in questi browser:
- Internet Explorer 8, 9 e 10
- Cromo
- Chrome per Android
Si rompe in questi browser:
- Firefox
- Firefox per Android
- Internet Explorer 7
Pertanto, l'unico browser a cui tengo che il codice corrente si interrompa è Firefox (sia su desktop che su dispositivo mobile). Se il codice fosse corretto in modo che funzionasse in Firefox senza romperlo in nessun altro browser, ciò avrebbe risolto il mio problema.
Il modello di sito HTML utilizza Internet Explorer commenti condizionali per aggiungere classi, .ie8e .oldieal <html>elemento. Puoi usare quelle classi nel tuo CSS se hai bisogno di aggirare le differenze di stile in IE. Le classi aggiunte sono le stesse di questa vecchia versione di HTML5 Boilerplate .
<fieldset>(o div.wrapper) la larghezza necessaria e select { width:100% }. max-widthsembra dare all'elemento una percentuale della larghezza originale del suo genitore , quindi non si ridimensiona, mentre widthsi ridimensiona con il suo genitore. Penso che farà quello che vuoi (ma avrei potuto fraintendere). Nel violino più complesso, prova a dare ai campi nella colonna di sinistra una larghezza% e una larghezza minima del pixel. Quindi dai i campi a destra 100 - (campi a sinistra -% - larghezza)% larghezza.