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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 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
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