J'ai rencontré un comportement étrange lié à la largeur d'une entrée de texte dans JQuery Mobile - il est tout simplement trop gros.
<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>
4 Réponses :
L'entrée et le bouton disposaient de certains CSS différents l'appliquée automatiquement. J'ai ajouté le CSS suivant qui semblait rendre le CSS visiblement cohérent pour les deux:
<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>
Je remplacerais les styles inline avec des classes.
Merci! C'est en fait un article vraiment intéressant que vous avez lié à votre message. J'ai corrigé deux petites fautes de frappe dans votre code et cela fonctionne réellement - mais je pense que c'est une sorte de "pirate". Je vais attendre un peu de temps, peut-être que quelqu'un d'autre a une solution encore meilleure.
juste avant mon début de ma structure mobile Core jquery.CSS J'ai ajouté une réinitialisation de CSS plus complète. Cela peut vous aider.
/* 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}
Je l'ai ajouté, et cela n'aide pas: jsfiddle.net/ekkjp - Quoi qu'il en soit, où est-ce que Vous avez eu votre réinitialisation.CSS, j'utilise en fait Eric Meyer's One.
C'est une version modifiée que j'ai trouvée au moment où l'arrière était basé sur Eric's. Je crois que j'ai enlevé quelques choses que je n'ai jamais tendance à utiliser.
Vous pouvez également vouloir modifier directement les tailles d'entrée. Je fais cela avec ajouter une valeur de classe à ceux que je veux changer de taille sage. Curieusement, je pense en fait que certains d'entre eux sont trop petits - alors j'ai augmenté la hauteur de leur taille.
Tout comme un exemple, vous pouvez ajouter un nouveau thème. Dans le cas ci-dessous, j'ai ajouté un thème F. Ajoutez plus de CSS au thème, puis appelez le thème de données = "F" sur votre élément d'entrée. Vous pouvez ensuite la styler à votre contenu de votre cœur. Une chose à noter. Vous devrez peut-être utiliser! Important pour remplacer les tailles de base définies par JQM.
.ui-bar-f input {
font-family: 'HelveticaNeueLTStd55Roman', Helvetica, Arial, sans-serif;
width:250px !important;
}
Pourriez-vous fournir un JSFIDDE de travail avec une largeur de taille d'appareil? L'utilisation d'une largeur fixe n'est pas une option pour moi.
Quel appareil essayez-vous de cibler - vous devrez peut-être aller avec des pourcentages - ou un minum-max en fonction de l'appareil.
Dispositifs intermédiaires à mi-hauteur basés sur Android et plus tard également à IOS-Devices.
Vous allez utiliser des requêtes multimédias pour cibler vos tailles de périphérique spécifiques et régler ces éléments par chaque périphérique. C'est la nature de la bête si vous voulez un contrôle fini sur la façon dont ces éléments rendent sur iPad, Kindle Feu, etc.
J'ai combiné toutes les réponses et trouvé un (au moins pour moi) Solution appropriée - l'a ajouté à ma question initiale. Je vais maintenant mettre en œuvre une largeur maximale et centrer tout le contenu, de sorte qu'il semble assez soigné sur chaque appareil. Merci pour ton aide!
La solution concernant la max-largeur peut être trouvée ici: Stackoverflow.com/questions/7936119/... - Sur la base des requêtes de média que vous avez mentionnées.
J'espère que ça marche - je suis dans le même bateau :)
Les champs d'entrée veulent juste être une largeur complète. Largeur de réglage: 80PX limitera sa largeur. Voir ce violon avec des lignes de versions normales et mini-tailles.