Mise en page buttonset

Salut à tous,

J'essaie de construire un formulaire qui sera composé d'input checkbox.

Je voudrais utiliser le fonction jquery ui ci-dessous pour mes checkbox :

Code:

1
2
$( "#type_produit" ).buttonset();
$( "#couleur_produit" ).buttonset();

Je vais avoir une ligne de 5 input checkbox et dessous une ligne de 10 input checkbox, je voudrais que ces lignes aient la même longueur (pour une question d'esthétique).

Avec ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Checkboxes</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
  $(function() {
    $( "#format" ).buttonset();
    $( "#type" ).buttonset();
  });
</script>
<style>
#global{width:500px;margin:auto;}
#format {margin-top: 1em;}
#type {margin-top: 0.3em;}
</style>
</head>
<body>
 
<div id="global">
 
<div id="format">
  <input type="checkbox" id="check1" /><label for="check1">A</label>
  <input type="checkbox" id="check2" /><label for="check2">B</label>
  <input type="checkbox" id="check3" /><label for="check3">C</label>
  <input type="checkbox" id="check4" /><label for="check4">D</label>
  <input type="checkbox" id="check5" /><label for="check5">E</label>
</div>
<div id="type">
  <input type="checkbox" id="type_produit1" /><label for="type_produit1">1</label>
  <input type="checkbox" id="type_produit2" /><label for="type_produit2">2</label>
  <input type="checkbox" id="type_produit3" /><label for="type_produit3">3</label>
  <input type="checkbox" id="type_produit4" /><label for="type_produit4">4</label>
  <input type="checkbox" id="type_produit5" /><label for="type_produit5">5</label>
  <input type="checkbox" id="type_produit6" /><label for="type_produit6">6</label>
  <input type="checkbox" id="type_produit7" /><label for="type_produit7">7</label>
  <input type="checkbox" id="type_produit8" /><label for="type_produit8">8</label>
  <input type="checkbox" id="type_produit9" /><label for="type_produit9">9</label>
  <input type="checkbox" id="type_produit10" /><label for="type_produit10">10</label>
</div>
 
</div>
 
</body>
</html>

La première ligne de checkbox arrive à la moitié de la seconde ligne. Je voudrais qu'elles soient de la même longueur et que les checkbox s'allongent ou se rétrécissent en fonction du nombre de checkbox, comment faire cela ? J'ai essayé de bidouillé le css jquery-ui.css mais sans résultat :(

Faut-il mettre ces checkbox dans un tableau html ? Mais comment dire à chaque checkbox qu'il doit remplir entèrement chaque cellule du tableau ?

Merci pour votre aide.

Bruno

Bonsoir

C'est un problème de réglage CSS, exemple :

Code:

1
2
3
4
#format { margin-top: 1em; }
#format .ui-button { width: 99px; }
#type { margin-top: 0.3em; }
#type .ui-button { width: 49px; }

Tu as raison c'était bien un problème de css.

J'ai modifié le fichier css du thème de jquery ui que j'utilise en ajoutant une petite ligne width: 100%; :
Code:

1 2 3 4 5 .ui-buttonset .ui-button { width: 100%; margin-left: 0; margin-right: -.3em; }
J'ai mis mes input checkbox dans un tableau html pour que toutes les lignes d'input aient la même longueur et le résultat est nickel (sauf avec IE7 ou ça bug, les lignes d'input se positionnent mal !!)