Masalah
Saya punya tempat di <select>mana salah satu <option>nilai teksnya sangat panjang. Saya ingin <select>mengubah ukuran sehingga tidak pernah lebih luas dari induknya, bahkan jika harus memotong teks yang ditampilkan. max-width: 100%harus melakukan itu.
Sebelum mengubah ukuran:
Apa yang saya inginkan setelah mengubah ukuran:
Tetapi jika Anda memuat contoh jsFiddle ini dan mengubah ukuran lebar panel Hasil menjadi lebih kecil dari itu <select>, Anda dapat melihat bahwa pilih di dalam <fieldset>gagal untuk skala lebar ke bawah.
Apa yang sebenarnya saya lihat setelah mengubah ukuran:
Namun, halaman yang setara dengan skala <div>bukannya<fieldset> skala yang benar. Anda dapat melihat itu dan menguji perubahan Anda lebih mudah jika Anda memiliki sebuah <fieldset>dan <div>di samping satu sama lain pada satu halaman . Dan jika Anda menghapus <fieldset>tag di sekitarnya , ukurannya berfungsi. The <fieldset>tag entah bagaimana menyebabkan Resize horisontal untuk istirahat.
The <fieldset>bertindak seolah-olah ada aturan CSS fieldset { min-width: min-content; }. ( min-contentBerarti, kira-kira, lebar terkecil yang tidak menyebabkan anak meluap.) Jika saya mengganti <fieldset>dengan <div>denganmin-width: min-content , tampilannya persis sama. Namun tidak ada aturan min-contentdalam style saya, di stylesheet default browser, atau terlihat di Firebug's CSS Inspector. Saya mencoba untuk mengesampingkan setiap gaya yang terlihat <fieldset>di Firebug's CSS Inspector dan di stylesheet forms.css default Firefox , tetapi itu tidak membantu. Khususnya mengesampingkan min-widthdan widthtidak melakukan apa pun juga.
Kode
HTML dari 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>CSS saya yang seharusnya berfungsi tetapi tidak:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}Mengatur ulang widthproperti ke default tidak menghasilkan apa-apa:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}CSS lebih lanjut di mana saya mencoba dan gagal untuk memperbaiki masalah :
/* 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;
}Keterangan lebih lanjut
Masalahnya juga terjadi pada contoh jsFiddle yang lebih komprehensif dan lebih rumit ini , yang lebih mirip dengan halaman web yang sebenarnya saya coba perbaiki. Anda dapat melihat bahwa itu <select>bukan masalahnya - blok inline divjuga gagal untuk mengubah ukuran. Meskipun contoh ini lebih rumit, saya berasumsi bahwa perbaikan untuk kasus sederhana di atas juga akan memperbaiki kasus yang lebih rumit ini.
[Edit: lihat detail dukungan browser di bawah ini.]
Satu hal yang aneh tentang masalah ini adalah bahwa jika Anda mengaturdiv.wrapper { width: 50%; } , <fieldset>berhenti mengubah ukuran dirinya sendiri pada titik maka ukuran penuh <select>akan menyentuh tepi viewport. Mengubah ukuran terjadi seolah-olah <select>telah width: 100%, meskipun <select>sepertinya sudah width: 50%.
Jika Anda memberikan <select>dirinya sendiriwidth: 50% , perilaku itu tidak terjadi; lebar hanya diatur dengan benar.
Saya tidak mengerti alasan perbedaan itu. Tapi itu mungkin tidak relevan.
Saya juga menemukan pertanyaan HTML yang sangat mirip, memungkinkan anak-anak berkembang tanpa batas . Penanya tidak dapat menemukan solusi dan menebak bahwa tidak ada solusi selain menghapus <fieldset>. Tapi saya bertanya-tanya, jika benar-benar tidak mungkin membuat <fieldset>tampilan menjadi benar, mengapa begitu? Apa yang di <fieldset>'s spesifikasi atau standar CSS ( sebagai pertanyaan ini ) menyebabkan perilaku ini? Perilaku khusus ini mungkin didokumentasikan di suatu tempat, karena beberapa browser berfungsi seperti ini.
Tujuan dan persyaratan latar belakang
Alasan saya mencoba melakukan ini adalah sebagai bagian dari penulisan gaya seluler untuk halaman yang ada dengan bentuk besar. Formulir ini memiliki beberapa bagian, dan satu bagian dibungkus dengan a <fieldset>. Pada ponsel cerdas (atau jika Anda membuat jendela peramban Anda kecil), bagian halaman dengan jendela <fieldset>jauh lebih lebar daripada bagian lainnya. Sebagian besar bentuk membatasi lebar dengan baik, tetapi bagian dengan <fieldset>tidak, memaksa pengguna untuk memperkecil atau gulir ke kanan untuk melihat semua bagian itu.
Saya khawatir hanya menghapus <fieldset>, karena dihasilkan pada banyak halaman di aplikasi besar, dan saya tidak yakin apa yang pemilih tergantung pada CSS atau JavaScript.
Saya dapat menggunakan JavaScript jika perlu, dan solusi JavaScript lebih baik daripada tidak sama sekali. Tetapi jika JavaScript adalah satu-satunya cara untuk melakukan ini, saya ingin tahu penjelasan mengapa ini tidak mungkin hanya menggunakan CSS dan HTML.
Edit: dukungan browser
Di situs tersebut, saya perlu mendukung Internet Explorer 8 dan yang lebih baru (kami baru saja menjatuhkan dukungan untuk IE7), Firefox terbaru, dan Chrome terbaru. Halaman khusus ini juga dapat berfungsi di iOS dan Android smartphone. Perilaku yang sedikit terdegradasi tetapi masih dapat digunakan dapat diterima untuk Internet Explorer 8.
Saya menguji ulang contoh rusak sayafieldset di browser yang berbeda. Ini sebenarnya sudah berfungsi di browser ini:
- Internet Explorer 8, 9, dan 10
- Chrome
- Chrome untuk Android
Itu rusak di browser ini:
- Firefox
- Firefox untuk Android
- Internet Explorer 7
Jadi, satu-satunya peramban yang saya pedulikan tentang kode saat ini adalah Firefox (pada desktop dan seluler). Jika kodenya diperbaiki sehingga berfungsi di Firefox tanpa merusaknya di peramban lain, itu akan menyelesaikan masalah saya.
Templat HTML situs menggunakan komentar bersyarat Internet Explorer untuk menambahkan kelas tersebut .ie8dan .oldieke <html>elemen. Anda dapat menggunakan kelas-kelas itu di CSS Anda jika Anda perlu mengatasi perbedaan gaya dalam IE. Kelas yang ditambahkan sama dengan versi HTML5 Boilerplate yang lama ini .
<fieldset>(atau div.wrapper) lebar apa pun yang dibutuhkan, dan select { width:100% }. max-widthtampaknya memberikan elemen beberapa% dari lebar asli induknya , kemudian tidak menskala, sedangkan widthskala dengan induknya. Saya pikir itu akan melakukan apa yang Anda inginkan (tapi saya bisa salah paham). Di biola yang lebih kompleks, coba beri bidang di kolom kiri% -width, dan lebar min-pixel. Kemudian berikan bidang di sebelah kanan 100 - (bidang kiri -% - lebar)% lebar.