Chiều rộng đầu vào văn bản lạ trong jQuery Mobile

Question

Tôi đã gặp một hành vi kỳ lạ liên quan đến chiều rộng của một đầu vào văn bản trong jQuery Mobile - nó đơn giản là quá lớn.

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Test</h1> 
    </div> 

    <div data-role="content"> 
     <input type="text" value="192.168.1.1"></input> 

     <a data-role="button">Connect</a> 
    </div> 
</div> 

Bạn cũng có thể tạo lại hành vi này bằng cách giảm chiều rộng của cửa sổ trình duyệt chẳng hạn trong jsFiddle.

jsFiddle:
http://jsfiddle.net/QxYMa/

Đây có phải là hành vi bình thường hay chỉ là một lỗi? Làm thế nào tôi có thể "sửa" điều đó, để đầu vào văn bản và nút có cùng chiều rộng?

Answer 1

Đầu vào và nút có một số CSS khác nhau được tự động áp dụng cho nó. Tôi được thêm vào CSS sau đó dường như làm cho CSS rõ ràng phù hợp cho cả hai:

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Test</h1> 
    </div> 

    <div data-role="content"> 
     <input type="text" value="192.168.1.1" style="width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;"/> 
     <br/> 
     <a data-role="button" style="width:100%;margin:0">Connect</a> 
    </div> 
</div> 

Nó sẽ xuất hiện mà đầu vào hộp mô hình đã được tắt, và lề nút đã được tắt. Đây là bài viết hay nói về mô hình hộp có vẻ như đã làm sáng tỏ điều này: http://www.jefftk.com/news/2012-02-18.html

Hy vọng điều này sẽ hữu ích!

Answer 2

Ngay trước khi bắt đầu cấu trúc di động lõi của tôi. Tôi đã thêm một cài đặt CSS hoàn chỉnh hơn. Điều này có thể giúp bạn.

/* CSS Reset*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0; font-size:100%;vertical-align:baseline; background:transparent}body {line-height:1}ol,ul {list-style:none}blockquote,q {quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus {outline:0}ins {text-decoration:none}del {text-decoration:line-through}table {border-collapse:collapse;border-spacing:0} 

Answer 3

Ví dụ: Bạn có thể thêm chủ đề mới. Trong trường hợp dưới đây tôi đã thêm một chủ đề F. Thêm nhiều css vào chủ đề và sau đó gọi data-theme = "f" trên phần tử đầu vào của bạn. Sau đó, bạn có thể tạo kiểu cho nội dung trái tim của mình. Một điều cần lưu ý. Bạn có thể cần phải sử dụng! Quan trọng để ghi đè kích thước cơ sở được thiết lập bởi JQM.

.ui-bar-f input { 
    font-family: 'HelveticaNeueLTStd55Roman', Helvetica, Arial, sans-serif; 
    width:250px !important; 
} 

Answer 4

Trường nhập chỉ muốn có chiều rộng đầy đủ. Đặt chiều rộng: 80px tuy nhiên sẽ giới hạn chiều rộng của chúng. Xem fiddle này với các dòng của cả hai phiên bản bình thường và kích thước nhỏ.

http://jsfiddle.net/den232/WzH3Y/

.floatleft { 
    float:left; 
} 
.floatright { 
    float:right; 
} 
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */ 
    display:inline !important; 
} 
.textwidth { /* limit width of input fields */ 
    width:80px; 
} 
.closespacing { /* controls spacing between elements */ 
    margin:0px 5px 0px 0px; 
} 
.bigselect { /* centers select with big buttons */ 
    padding: 0px; 
    margin:2px 5px 0px 0px; 
} 
.biginputheight { /* matches text input height to big buttons */ 
    padding-top:10px !important; 
    padding-bottom:12px !important; 
} 
.miniinputheight { /* matches text input height to minibuttons */ 
    padding-top:5px !important; 
    padding-bottom:5px !important; 
} 
<div data-role="page" class="type-home"> 

<ul data-role="listview"> 
    <li data-role="fieldcontain">first LI line</li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'> 
     Big Buttons<br>More Text 
    </div> 


    <div class='floatleft textwidth'> 
     <input type="text" placeholder="left" class='biginputheight'></input> 
    </div> 

    <div class='floatright textwidth'> 
     <input type="text" placeholder="right" class='biginputheight'></input> 
    </div> 

    </li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'>  
     Small Buttons 
    </div> 


    <div class='floatleft textwidth'> 
     <input type="text" placeholder="e2" class='miniinputheight'></input> 
    </div> 


    <div class='floatright closespacing'> 
     <div class='floatright closespacing'>  
     e3 Text<br>on right 
     </div> 
     <div class='floatright textwidth'> 
     <input type="text" placeholder="e3" class='miniinputheight'></input> 
     </div> 
    </div> 
    </li> 
    <li data-role="fieldcontain">last LI line</li> 

</ul><!-- /listview -->