JQuery Mobile - มีอินพุตและป้ายกำกับในบรรทัดเดียวกันภายในตาราง โดยไม่คำนึงถึงความกว้างของหน้าจอ

ฉันใช้ jquery มือถือ ฉันต้องการให้ป้ายกำกับและอินพุตอยู่ในบรรทัดเดียวกันภายในเซลล์ตาราง ตารางและเซลล์มีความกว้างคงที่ ดังนั้น ฉันคิดว่าเค้าโครงภายในเซลล์จะไม่ขึ้นอยู่กับความกว้างของหน้าต่าง แต่ถ้าฉันใช้โค้ดใน jsfiddle นี้ และทำให้หน้าต่างผลลัพธ์แคบลง ป้ายกำกับและอินพุต จะแสดงบนบรรทัดที่แตกต่างกัน และถ้าฉันทำให้หน้าต่างผลลัพธ์กว้างขึ้น หน้าต่างผลลัพธ์เหล่านั้นก็จะแสดงในบรรทัดเดียวกัน ดูเหมือนว่าจะแปลก เนื่องจากความกว้างของเซลล์ไม่เปลี่ยนแปลงเมื่อฉันเปลี่ยนขนาดของหน้าต่างผลลัพธ์ มีความคิดเห็นเกี่ยวกับสิ่งที่เกิดขึ้นและจะแสดงข้อมูลเหล่านั้นในบรรทัดเดียวกันได้อย่างไร แม้ว่าหน้าต่างจะแคบก็ตาม

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>

ซีเอสเอส:

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

ยังไงซะ... ฉันเคยเห็นคำถามที่คล้ายกันใน SO และที่อื่น ๆ แต่ฉันไม่แน่ใจว่าอะไรคือส่วนสำคัญที่จะช่วยให้สิ่งเหล่านี้อยู่ในบรรทัดเดียวกันในสถานการณ์ที่หลากหลาย ในกรณีของฉัน ในที่สุดฉันก็จะมีการแสดง "$" หรือไม่ขึ้นอยู่กับจาวาสคริปต์บางตัว และต้องการให้อินพุตปรับขนาดตามพื้นที่ที่เหลืออยู่


html jquery css jquery-mobile
person corbin    schedule 18.02.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

เนื่องจากนั่นคือพฤติกรรมเริ่มต้นของ fieldcontain หากคุณใช้คอนโซลเพื่อดูการเปลี่ยนแปลง CSS เมื่อมีการเรียกใช้คำสั่งสื่อ คุณจะเห็นสิ่งต่างๆ เกิดขึ้น คุณสามารถสร้างคลาสของคุณเองสำหรับคอนเทนเนอร์เหล่านี้ หรือแทนที่ใน CSS ของคุณ:

ตัวอย่างซอ: 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;
}

คลาสที่กำหนดเองอาจดีกว่าเนื่องจากบางครั้งวิธีการแทนที่อาจสร้างปัญหาได้ (โปรดสังเกตว่าป้ายกำกับเวอร์ชันแคบของซอจะกระโดดขึ้น)

person Bitwise Creative    schedule 19.02.2015
comment
คำตอบทั้งสองที่ให้มาอาจจะใช้ได้กับความต้องการของฉัน ฉันกำลังประเมินพวกเขาเพื่อดูว่าฉันจะไปกับใคร - person corbin; 19.02.2015
comment
อันนี้ตอบว่าทำไมชิ้นนี้ดังนั้นฉันจึงเลือกมัน ทั้งทำงาน. ฉันได้แก้ไขปัญหานี้ด้วยวิธีอื่นจริงๆ jsfiddle.net/1k2mds31/10 - person corbin; 19.02.2015

arrow_upward
1
arrow_downward

Bitwise Creative ได้ให้คำตอบที่ดีแล้ว อีกทางเลือกหนึ่ง หากคุณใช้ตารางอยู่แล้ว ทำไมไม่กำจัด fieldcontain ออกไป และใช้เซลล์ตาราง 4 เซลล์แทนที่จะเป็น 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>

ซีเอสเอส:

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

person ezanker    schedule 19.02.2015
comment
คำตอบทั้งสองที่ให้มาอาจจะใช้ได้กับความต้องการของฉัน ฉันกำลังประเมินพวกเขาเพื่อดูว่าฉันจะไปกับใคร - person corbin; 19.02.2015