checkbox.html
10.6 KB
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<section>
<h1 class="blue" data-id="#custom/checkbox"><i class="ace-icon fa fa-desktop grey"></i> Checkbox & Switch</h1>
<div class="hr hr-double hr32"></div>
<!-- #section:custom/checkbox -->
<div class="help-content">
<h3 class="info-title smaller">1. Checkbox & Radio</h3>
<div class="info-section">
<ul class="info-list list-unstyled">
<li>
Ace admin template has support for pure CSS checkbox and on/off switches.
<br />
This makes it more lightweight and there's no need for an external library.
</li>
<li>
A basic checkbox element has <code>.ace</code>
class and a <code>.lbl</code> element follows it:
<pre data-language="html">
<label>
<input type="checkbox" name="myoption[]" class="ace" />
<span class="lbl">Optional Text</span>
</label>
</pre>
<li>
It's always a good idea to wrap checkbox element and the <code>.lbl</code> element
inside a <code>label</code> for better click response, except for some cases such as re-styling
jqGrid checkboxes (see Notes below)
</li>
<li>
You can use an addtional <code>.ace-checkbox-2</code> class for another checkbox style:
<br />
<pre data-language="html">
<label>
<input type="checkbox" name="myoption[]" class="ace ace-checkbox-2" />
<span class="lbl">Optional Text</span>
</label>
</pre>
</li>
<li>
Radio buttons are also styled like checkboxes:
<pre data-language="html">
<label>
<input type="radio" name="myoption" class="ace" value="1" />
<span class="lbl">Optional Text</span>
</label>
</pre>
</li>
</ul>
</div>
<h3 class="info-title smaller" data-id="#custom/checkbox.switch">2. Switch elements</h3>
<!-- #section:custom/checkbox.switch -->
<div class="info-section">
<ul class="info-list list-unstyled">
<li>
Switch elements are like checkboxes with a few additional classes:
<ol>
<li><code>.ace-switch</code></li>
<li><code>.ace-switch-2</code></li>
<li><code>.ace-switch-3</code></li>
<li><code>.ace-switch-4</code></li>
<li><code>.ace-switch-5</code></li>
<li><code>.ace-switch-6</code></li>
<li><code>.ace-switch-7</code></li>
</ol>
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace ace-switch" />
<span class="lbl"></span>
</label>
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4" />
<span class="lbl"></span>
</label>
</pre>
</li>
<li>
<code>.btn-rotate</code> makes the bars horizontal:
<br />
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-rotate" />
<span class="lbl"></span>
</label>
<br />
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-rotate" />
<span class="lbl"></span>
</label>
</pre>
</li>
<li>
<code>.btn-empty</code> hides the bars:
<br />
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-empty" />
<span class="lbl"></span>
</label>
<br />
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-empty" />
<span class="lbl"></span>
</label>
</pre>
</li>
<li>
<code>.btn-flat</code> makes the checkbox rectangular:
<br />
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl"></span>
</label>
<br />
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl"></span>
</label>
</pre>
</li>
<li>
You can have a custom text for switch elements using <code>data-lbl</code> attribute of the
<code>.lbl</code> element.
<br />
You should add enough spaces (&nbsp;) to adjust your custom text:
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl" data-lbl="Hi Bye"></span>
</label>
<br />
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl" data-lbl="Hi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bye"></span>
</label>
</pre>
</li>
<li>
You can also edit <code>assets/css/less/form/checkbox.less</code>
and modify <code>@switch-1-text</code> variables and re-compile LESS files into CSS.
</li>
<li>
Sometimes your text is not adjusted well.
In that case you can override the following CSS rules and find the best values:
<pre data-language="css">
/* for default switch element */
input[type=checkbox].ace.ace-switch + .lbl::before {
text-indent: -21px;
}
input[type=checkbox].ace.ace-switch:checked + .lbl::before {
text-indent: 8px;
}
/* or other ones */
input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::before {
text-indent: -25px;
}
input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::before {
text-indent: 9px;
}
</pre>
</li>
</ul>
</div>
<!-- /section:custom/checkbox.switch -->
<h3 class="info-title smaller" data-id="#custom/checkbox.notes">3. Notes</h3>
<!-- #section:custom/checkbox.notes -->
<div class="info-section">
<ul class="info-list list-unstyled">
<li>
You may face an issue with checkboxes in ASP.NET as there's often a hidden input inserted
after the checkbox and therefore our CSS rule which requires <code>.lbl</code> to be inserted
immediately after checkbox element, fails:
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace" />
<input type="hidden" name="asp-inserted-hidden-input" />
<span class="lbl"></span>
</label>
</pre>
Checkboxes won't be displayed here.
<br />
You can remove <code>.ace</code> class to have default browser checkbox or
you can use <a href="../build/css.html">CSS builder tool</a> and enable <b>ASP.NET friendly checkboxes </b>
option.
<div class="space-6"></div>
<i class="ace-icon fa fa-hand-o-right"></i>
Please note that your checkbox element should only have one <code>.lbl</code> sibling:
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace" />
<input type="hidden" name="asp-inserted-hidden-input" />
<span class="lbl">Will be styled </span>
<span class="lbl">This will also be styled with new ASP.net rules!</span>
</label>
</pre>
</li>
<li>
It also seems that Rails framework automatically puts a hidden input before the checkbox.
<br />
In some browsers, this may prevent the checkbox from receiving click events if it's inside a label:
<pre data-language="html">
<label>
<input type="hidden" name="rails-inserted-hidden-input" />
<input type="checkbox" name="myoption" class="ace" />
<span class="lbl"></span>
</label>
</pre>
That's because <code>label</code> element should only have one input element which
in this is the "hidden" input.
<br />
To fix that you can put "hidden" input after checkbox or associate the label to checkbox with
"for" attribute and checkbox "id":
<pre data-language="html">
<label for="myoption">
<input type="hidden" name="rails-inserted-hidden-input" />
<input id="myoption" type="checkbox" name="myoption" class="ace" />
<span class="lbl"></span>
</label>
</pre>
</li>
<li>
Sometimes you have a list of checkboxes inside a parent with scrollbars.
<br />
In that case, it's better to put checkboxes inside a parent with <code>position:relative</code>.
<br />
For example inside a <code>.pos-rel</code> element:
<div class="well">
<div style="overflow-y: scroll; overflow-x: hidden; height: 60px;">
<div>
<label class="pos-rel">
<input type="checkbox" name="myoption1" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl"></span>
</label>
</div>
<div>
<label class="pos-rel">
<input type="checkbox" name="myoption2" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl"></span>
</label>
</div>
<div>
<label class="pos-rel">
<input type="checkbox" name="myoption3" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl"></span>
</label>
</div>
</div>
</div>
<pre data-language="html">
<div style="overflow-y: scroll; overflow-x: hidden; height: 60px;">
<div>
<label class="pos-rel">
<input type="checkbox" name="myoption1" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl"></span>
</label>
</div>
<div>
<label class="pos-rel">
<input type="checkbox" name="myoption2" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl"></span>
</label>
</div>
.
.
.
</div>
</pre>
</li>
<li>
Sometimes you shouldn't wrap the checkbox and <code>.lbl</code> inside a label.
<br />
For example in jqGrid plugin, when you launch an "edit record" or "new record" dialog,
and want to style the checkbox dynamically:
<pre data-language="javascript">
form.find('input[type=checkbox]')
.addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
</pre>
Checkbox should not be wrapped inside <code>label</code> because it conflicts with
plugin's data upload mechanism.
</li>
<li>
For better vertical alignmnet sometimes you should add <code>.middle</code> class to <code>.lbl</code>
element:
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace ace-switch ace-switch-4 btn-flat" />
<span class="lbl middle"></span>
</label>
</pre>
</li>
</ul>
</div>
<!-- /section:custom/checkbox.notes -->
<h3 class="info-title smaller">4. Options</h3>
<div class="info-section">
<ul class="info-list list-unstyled">
<li>To add space between checkbox and its label you can use <code>.padding-*</code> class for <code>.lbl</code> element:
<div class="well well-sm">
<label>
<input type="checkbox" name="myoption" class="ace" />
<span class="lbl padding-16">Padding 16</span>
</label>
</div>
<pre data-language="html">
<label>
<input type="checkbox" name="myoption" class="ace" />
<span class="lbl padding-8"></span>
</label>
</pre>
Possible values are <code>.padding-2</code> <code>.padding-4</code> ... <code>.padding-16</code>
</li>
</ul>
</div>
</div>
<!-- /section:custom/checkbox -->
</section>