Mise en page buttonset

**delta6** · 18/03/2013, 10h12

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

**danielhagnoul** · 18/03/2013, 22h14

Bonsoir

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

Code css :

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

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

**delta6** · 19/03/2013, 15h08

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 css :

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

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 !!)

Mise en page buttonset

jQuery

Vue hybride

Discussions similaires

Partager

Partager