Dziwna szerokość wprowadzania tekstu w jQuery Mobile

Question

Zdarzyło mi się dziwne zachowanie związane z szerokością tekstu wprowadzanego w jQuery Mobile - po prostu jest za duże.

<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> 

Można również odtworzyć to zachowanie, zmniejszając szerokość Browserwindow na przykład w jsFiddle.

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

Czy to jest normalne zachowanie czy po prostu bug? Jak mogę to "poprawić", aby tekst i przycisk miały tę samą szerokość?

Answer 1

Dane wejściowe i przycisk zawierały kilka różnych stylów CSS automatycznie zastosowanych do niego. I dodaje następujący kod CSS, który wydawał aby CSS wyraźnie spójne dla obu z nich:

<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> 

Wydaje się, że pole model wejściowy był wyłączony, a marża przycisk był wyłączony. Oto dobry artykuł na temat modelu pudełkowego, który wydaje się rzucić trochę światła na to: http://www.jefftk.com/news/2012-02-18.html

Mam nadzieję, że to pomoże!

Answer 2

Tuż przed moim początkiem mojego core jquery mobile structure.css dodałem bardziej kompletny reset CSS. To może ci pomóc.

/* 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

Jako przykład można dodać nowy motyw. W poniższym przykładzie dodałem motyw F. Dodaj więcej css do tematu, a następnie wywołaj element data-theme = "f" na swoim elemencie wejściowym. Następnie możesz nadać mu styl do zawartości swoich serc. Jedna rzecz do zapamiętania. Być może trzeba użyć! Important, aby zastąpić podstawowe rozmiary ustalone przez JQM.

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

Answer 4

Pola wprowadzania mają być wyłącznie pełną szerokością. Ustawienie szerokości: 80px jednak ograniczy ich szerokość. Zobacz to skrzypce z liniami w wersji normalnej i mini-size.

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 -->