Discussion :

[krunch]

Bonjour à tous

Je cherche à placer mes controles selon 2 lignes, mais sans colonnes régulières :
- jqxRadioButton + jqxDateTimeInput + jqxDropDownList
- jqxRadioButton + jqxButtonGroup

Je cherche à obtenir ça :


Et actuellement j'ai ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
   <div id='jqxRadioButton0'>Unique</div>
   <div id='jqxDateTimeInput'></div>
   <div id='jqxDropDownList'></div>
</div>
<div>
   <div id='jqxRadioButton1'>Régulier</div>
   <div id='jqxButtonGroup'>
      <button style="padding:4px 6px;" id="j1">lu</button>
      <button style="padding:4px 6px;" id="j2">ma</button>
      <button style="padding:4px 6px;" id="j3">me</button>
      <button style="padding:4px 6px;" id="j4">je</button>
      <button style="padding:4px 6px;" id="j5">ve</button>
      <button style="padding:4px 6px;" id="j6">sa</button>
      <button style="padding:4px 6px;" id="j7">di</button>
   </div>
</div>

J'ai essayé plusieurs choses trouvées sur le net (notamment <div class="ui-grid-a"> / <div class="ui-block-a"..>) mais ça bouge pas ..


J'aurais aussi une autre petite question au passage : comment rendre la taille des boutons du jqxButtonGroup contraignante (actuellement avec '6px' elle s'adapte à la chaine de caractère) ?
C'est sans doute un truc basique, mais j'avoue j'ai du mal avec le html

Merci d'avance

[danielhagnoul]

Bonjour

Je ne connais pas UI Mobile mais pour l'alignement c'était facile à trouver dans la documentation : data-inline="true".

Edit : il y a aussi l'API : http://api.jquerymobile.com/data-attribute/

[krunch]

Justement je ne trouve que des solutions pour mobile alors que ce n'est pas pour mobile, c'est pour un site normal ..

J'avais tenté le data-inline="true", ça ne marche pas non plus (c'est peut être juste pour les boutons en <a href=.. ?).

J'ai également tenté avec des style="display:inline" : pas mieux (les contrôles sont étendus sur toute la largeur de la ligne).

[krunch]

Bon finalement c'était peut être une question de html classique (hélas)

J'y arrive plus ou moins avec des styles "float:left"/"clear:both" mais il semble que cette solution soit imparfaite (dépend du navigateur) ...

[danielhagnoul]

Vous me montrez deux images de contrôles styles UI Mobile et du code "data-xyz" utilisés par UI Mobile pour une page web classique ? Pas étonnant que je sois "enduit" d'erreur.

C'est un problème CSS, il y a "float: left" mais il y a aussi "display: inline;" ou "display: inline-block;".

[krunch]

C'est vrai, c'était le résultat de mes recherches et google trouve surtout des sujets jquery 'mobiles' de nos jours..

Alors finalement :
"float: left" : ok
"display:inline" : ne semble pas marcher avec ces div (les contrôles restent empilés et sont étendus sur toute la largeur de la ligne)
"display: inline-block" : ok, mais les controles sont alignés verticalement par le bas

Bref j'essaierai d'utiliser le "display: inline-block", merci bien