Problem
Mam <select>gdzie jedna z jego <option>wartości tekstowych jest bardzo długa. Chcę <select>zmienić rozmiar, aby nigdy nie był szerszy niż element nadrzędny, nawet jeśli musi odciąć wyświetlany tekst. max-width: 100%powinien to zrobić.
Przed zmianą rozmiaru:
Co chcę po zmianie rozmiaru:
Ale jeśli załadujesz ten przykład jsFiddle i zmienisz szerokość panelu Wynik na mniejszą niż szerokość <select>, możesz zobaczyć, że zaznaczenie wewnątrz <fieldset>nie przeskalowuje jego szerokości w dół.
Co właściwie widzę po zmianie rozmiaru:
Jednak odpowiednik strony z <div>zamiast zamiast<fieldset> nie skaluje się poprawnie. Możesz to zobaczyć i przetestować zmiany łatwiej, jeśli masz jeden <fieldset>i jeden <div>obok siebie na jednej stronie . A jeśli usuniesz otaczające <fieldset>tagi , zmiana rozmiaru będzie działać. <fieldset>Znacznik jest w jakiś sposób powoduje poziome skalowanie do złamania.
Te <fieldset>akty jakby istnieje reguła CSS fieldset { min-width: min-content; }. ( min-contentŚrodki, z grubsza, najmniejsza szerokość, która nie powoduje dziecka do przelewu). Jeśli mogę wymienić <fieldset>z <div>omin-width: min-content , wygląda dokładnie tak samo. Jednak min-contentw moich stylach, w domyślnym arkuszu stylów przeglądarki lub w Inspektorze CSS Firebug nie ma żadnej reguły . Próbowałem zastąpić każdy styl widoczny <fieldset>w Inspektorze CSS Firebuga i domyślnym arkuszu stylów forms.css Firefoksa , ale to nie pomogło. Szczególnie nadpisujące min-widthi też widthnic nie zrobiły.
Kod
HTML zestawu pól:
<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>Mój CSS, który powinien działać, ale nie jest:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}Resetowanie widthwłaściwości do wartości domyślnych nic nie robi:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}Dalszy CSS, w którym próbuję rozwiązać problem :
/* 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;
}Więcej szczegółów
Problem występuje również w tym bardziej kompleksowym, bardziej skomplikowanym przykładzie jsFiddle , który jest bardziej podobny do strony internetowej, którą próbuję naprawić. Widać z tego, że <select>to nie jest problem - blok wbudowany divrównież nie zmienia rozmiaru. Chociaż ten przykład jest bardziej skomplikowany, zakładam, że poprawka do powyższego prostego przypadku również naprawi ten bardziej skomplikowany przypadek.
[Edycja: zobacz szczegóły wsparcia przeglądarki poniżej.]
Ciekawą rzeczą w tym problemie jest to, że jeśli ustawiszdiv.wrapper { width: 50%; } , <fieldset>zatrzyma się zmiana rozmiaru w punkcie, a następnie pełny rozmiar <select>uderzy o krawędź rzutni. Zmiana rozmiaru odbywa się tak, jakby <select>miała width: 100%, mimo że <select>wygląda tak width: 50%.
Jeśli dasz z <select>siebiewidth: 50% , takie zachowanie nie występuje; szerokość jest po prostu poprawnie ustawiona.
Nie rozumiem przyczyny tej różnicy. Ale to może nie mieć znaczenia.
Znalazłem również bardzo podobne pytanie zestaw pól HTML pozwala dzieciom rozwijać się w nieskończoność . Pytający nie mógł znaleźć rozwiązania i zgaduje, że nie ma innego rozwiązania oprócz usunięcia <fieldset>. Ale zastanawiam się, czy naprawdę nie jest możliwe <fieldset>poprawne wyświetlanie, dlaczego? Co w <fieldset>„s specyfikacji lub domyślnego CSS ( w tej kwestii ) powoduje takie zachowanie? To specjalne zachowanie jest prawdopodobnie gdzieś udokumentowane, ponieważ wiele przeglądarek działa w ten sposób.
Cel i wymagania w tle
Powodem, dla którego próbuję to zrobić, jest pisanie stylów mobilnych dla istniejącej strony o dużej formie. Formularz ma wiele sekcji, a jedna jego część jest owinięta w <fieldset>. Na smartfonie (lub jeśli okno przeglądarki jest małe) część strony z rozszerzeniem <fieldset>jest znacznie szersza niż reszta formularza. Większość postaci ogranicza swoją szerokość, ale sekcja z <fieldset>nie, co zmusza użytkownika do pomniejszenia lub przewinięcia w prawo, aby zobaczyć całą tę sekcję.
Obawiam się po prostu usunąć <fieldset>, ponieważ jest generowany na wielu stronach w dużej aplikacji, i nie jestem pewien, od czego mogą zależeć selektory w CSS lub JavaScript.
W razie potrzeby mogę używać JavaScript, a rozwiązanie JavaScript jest lepsze niż nic. Ale jeśli JavaScript jest jedynym sposobem, aby to zrobić, byłbym ciekawy wyjaśnienia, dlaczego nie jest to możliwe przy użyciu tylko CSS i HTML.
Edycja: obsługa przeglądarki
Na stronie muszę obsługiwać Internet Explorera 8 i nowsze (właśnie zrezygnowaliśmy z obsługi IE7), najnowszego Firefoksa i najnowszego Chrome. Ta konkretna strona powinna również działać na smartfonach z systemem iOS i Android. Nieco obniżone, ale nadal użyteczne zachowanie jest dopuszczalne w Internet Explorerze 8.
Ponownie przetestowałem mój zepsuty fieldsetprzykład w różnych przeglądarkach. W rzeczywistości działa już w tych przeglądarkach:
- Internet Explorer 8, 9 i 10
- Chrom
- Chrome na Androida
Uszkadza się w tych przeglądarkach:
- Firefox
- Firefox na Androida
- Internet Explorer 7
Tak więc jedyną przeglądarką, na której mi zależy, że obecny kod się włamuje, jest Firefox (zarówno na komputerze, jak i telefonie komórkowym). Jeśli kod zostałby naprawiony, aby działał w przeglądarce Firefox bez uszkodzenia go w innych przeglądarkach, rozwiązałoby to mój problem.
Szablon strona HTML używa Internet Explorer warunkowe komentarze dodać takie zajęcia .ie8i .oldiedo <html>elementu. Możesz użyć tych klas w swoim CSS, jeśli chcesz obejść różnice stylów w IE. Dodane klasy są takie same jak w starej wersji HTML5 Boilerplate .
<fieldset>(lub div.wrapper) dowolną potrzebną szerokość oraz select { width:100% }. max-widthwydaje się dawać elementowi pewną% pierwotnej szerokości elementu nadrzędnego , a następnie nie jest skalowany, podczas widthgdy skaluje się z rodzicem. Myślę, że zrobi to, co chcesz (ale mogłem źle zrozumieć). W bardziej złożonym skrzypciu spróbuj nadać polom w lewej kolumnie% szerokości i szerokość min. Piksela. Następnie podaj pola po prawej stronie 100 - (lewe pola -% - szerokość)% szerokości.