JQuery Mobile - Memiliki input dan label pada baris yang sama di dalam tabel, berapa pun lebar layarnya

Saya menggunakan jquery seluler. Saya ingin memiliki label dan masukan pada baris yang sama di dalam sel tabel. Tabel dan sel memiliki lebar tetap sehingga, menurut saya, tata letak di dalam sel tidak bergantung pada lebar jendela. Namun, jika saya menggunakan kode di jsfiddle ini dan mempersempit jendela hasil, label dan inputnya ditampilkan pada baris yang berbeda dan jika saya membuat jendela hasilnya lebar, hasilnya akan ditampilkan pada baris yang sama. Ini kelihatannya aneh, karena lebar sel tidak berubah ketika saya mengubah ukuran jendela hasil. Adakah pemikiran tentang apa yang sedang terjadi dan bagaimana menampilkannya pada baris yang sama, meskipun jendelanya sempit?

HTML:

<table>
    <tbody>
        <tr>
            <td>
                <div data-role="fieldcontain">
                    <label for="cost1">$</label>
                    <input type="text" name="cost1" id="cost1" value=""/>
                </div>
            </td>
            <td>
                <div data-role="fieldcontain">
                    <label for="cost2">$</label>
                    <input type="text" name="cost2" id="cost2" value=""/>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS:

td {
    width: 10em;
    border: 0.1em solid black;
}
table {
    table-layout: fixed;
    width: 20em;
}

Ngomong-ngomong... Saya telah melihat pertanyaan serupa di SO dan di tempat lain, tapi saya tidak yakin bagian penting apa yang memungkinkan pertanyaan ini berada pada jalur yang sama dalam berbagai skenario. Dalam kasus saya, saya pada akhirnya akan memiliki tampilan "$" atau tidak berdasarkan beberapa javascript dan ingin input diubah ukurannya berdasarkan sisa ruang yang tersedia.


person corbin    schedule 18.02.2015    source sumber


Jawaban (2)


Itu karena itu adalah perilaku default fieldcontain. Jika Anda menggunakan konsol untuk melihat perubahan CSS saat kueri media muncul, Anda akan melihat sesuatu terjadi. Anda dapat membuat kelas Anda sendiri untuk penampung ini, atau menggantinya di CSS Anda:

Contoh biola: http://jsfiddle.net/ks7201ov/

.ui-field-contain>label {
    float: left;
    width: 20%;
}
.ui-field-contain>label~[class*=ui-] {
    float: left;
    width: 78%;
}
.ui-field-contain:before, .ui-field-contain:after {
    content: "";
    display: table;
}
.ui-field-contain {
    padding: 0;
    margin: 1em 0;
}

Kelas khusus mungkin lebih baik karena pendekatan override terkadang menyusahkan (perhatikan bahwa label versi sempit dari biola melonjak).

person Bitwise Creative    schedule 19.02.2015
comment
Kedua jawaban yang diberikan sejauh ini mungkin akan sesuai dengan kebutuhan saya. Saya mengevaluasi mereka untuk melihat mana yang akan saya pilih. - person corbin; 19.02.2015
comment
Yang ini menjawab bagian alasannya, jadi saya memilihnya. Keduanya bekerja. Saya sebenarnya menyelesaikan ini dengan cara yang berbeda. jsfiddle.net/1k2mds31/10 - person corbin; 19.02.2015

Bitwise Creative telah memberikan jawaban yang bagus. Sebagai alternatif, jika Anda tetap menggunakan tabel, mengapa tidak menghilangkan fieldcontain dan cukup menggunakan 4 sel tabel, bukan 2?

<table>
    <tbody>
        <tr>
            <td class="labelcell"><label for="cost1">$</label></td>
            <td class="inputcell"><input type="text" name="cost1" id="cost1" value=""/></td>
            <td class="labelcell"><label for="cost2">$</label></td>
            <td class="inputcell"><input type="text" name="cost2" id="cost2" value=""/></td>
        </tr>
    </tbody>
</table>

CSS:

table {
    table-layout: fixed;
    width: 20em;
    border-collapse: collapse;
}
td{
    border: 0.1em solid black; 
    vertical-align: middle;
}
td.inputcell {
    width: 9em;    
    border-left: 0;
    padding-right: 4px;
}
td.labelcell {
    width: 1em;
    border-right: 0;
    padding-left: 2px;
}

FIDDLE diperbarui

person ezanker    schedule 19.02.2015
comment
Kedua jawaban yang diberikan sejauh ini mungkin akan sesuai dengan kebutuhan saya. Saya mengevaluasi mereka untuk melihat mana yang akan saya pilih. - person corbin; 19.02.2015