De toute façon, à force de deux éléments pour rester à côté de l'autre sur la même ligne avec JQuery Mobile?

Je veux avoir deux éléments rester sur la même ligne.

Droit maintenant, j'ai ce code:

<fieldset data-role="controlgroup" data-type="horizontal">
   <label for="textinput">Text:</label>
   <input type="text" id="textinput"/>
   <input type="button" id="searchbutton" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</fieldset>

Cela fonctionne. L'étiquette, le champ de saisie et le bouton sera tous sur la même ligne aussi longtemps que vous affichez en plein écran dans le navigateur de votre ordinateur. Mais si nous faisons de la fenêtre plus petite, toutes les trois éléments seront affichés sur une ligne chaque. Est-il possible de faire l'étiquette apparaissent sur une ligne, et le champ de saisie bouton + sur la ligne ci-dessous?

OriginalL'auteur Naning | 2011-10-10

  1. 6

    Vous devez remplacer la jQM améliorations:

    JS

    $('#textinput2').css('width','60%').css('display','inline');

    HTML

    <div>
    <!-- use span instead of label -->
    <span>Text:</span>
    <input type="text" id="textinput2"/>
    <br />
    <input type="button" id="searchbutton2" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</div>

    Je pense que vous voudrez peut-être regarder dans la grille de mise en page jQM offre

    Regardez cet exemple: jsfiddle.net/E4EVT/31 C'est comment je veux le résultat final. Le 1er lorsque la fenêtre est grande. Et le 2ème quand la fenêtre est petite.
    Mise à jour de ma réponse, regarde la grille options de mise en page: jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html
    Oui, le gridlayout fait ce que je veux, genre de. Mais il signifie également que le champ de saisie bouton + de ne pas s'aligner avec les autres champs de saisie dans la même forme. Elle rend l'air un peu moche :/ c'est Peut-être tout simplement le temps de réaliser que jQM est une salope quand il s'agit de la conception.
    Vous pouvez également utiliser le tableau de mise en page: jquerymobile.com/demos/1.0rc1/docs/content/content-html.html (voir la source), mais la raison pour laquelle il est un peu difficile d'avoir une mise en page personnalisée dans jQM, c'est qu'ils voulaient offrir le même look et la sensation d'une multitude d'appareils, ayant le code personnalisé sera également être différent sur d'autres appareils
    La façon dont j'ai finalement "résolu" c'était comme ça: jsfiddle.net/E4EVT/45 Merci pour l'aide. Ne serait probablement pas arrivé là sans vous.

    OriginalL'auteur Phill Pafford

  2. 3

    Pour Jquery Mobile 1.2.0

    <div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>

    OriginalL'auteur Gabriel Diaz

  3. 1

    vous devez ajouter l'attribut data-inline="true" pour les éléments d'entrée.

    et essayez de les mettre dans les travées peut-être..?

    OriginalL'auteur Sridhar

  4. 0

    CSS:

    label {
   display: block;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    width: 212px; /* the width of twice your input (plus borders) */
}

    Et votre code HTML:

    <fieldset data-role="controlgroup" data-type="horizontal">
   <label for="textinput">Text:</label>
   <div class="wrap">
      <input type="text" id="textinput"/>
      <input type="button" id="searchbutton" data-icon="search"  data-iconpos="notext" onclick="function()"/>
   </div>
</fieldset>

    http://jsfiddle.net/ahallicks/BWsdk/

    Edit:

    Désolé, mal lu votre question! Si vous les voulez tous sur la même ligne pour commencer à utiliser le code CSS suivant:

    label {
    float: left;
    margin-right: 12px;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    float: left;
    width: 212px; /* the width of twice your input (plus borders) */
}

    http://jsfiddle.net/ahallicks/E4EVT/

    Malheureusement, cela ne suffit pas. Depuis que je suis à l'aide de JQuery Mobile, le Mobile JQuery css sera toujours "faire sa magie" et de mettre chaque élément sur une ligne chaque. Je veux simplement d'ajuster la taille du texte d'entrée de sorte que le bouton d'ajustement à côté d'elle.

    OriginalL'auteur Alex