--- title: Widget Styling Using Only CSS order: 65 layout: page --- [[widget-styling-using-only-css]] Widget styling using only CSS ----------------------------- The preferred way of styling your widget is to only use static CSS included in the theme's styles.css file. For information on how to create custom themes, please refer to https://vaadin.com/book/-/page/themes.creating.html. Your component can be styled using the CSS class names that are defined to the widget using `setStyleName`. Normal styling of components works in the same way as any styling using CSS, but there are some special features to pay attention to when Vaadin 7 is used. [[some-sizing-theory]] Some sizing theory ~~~~~~~~~~~~~~~~~~ All Vaadin 7 components get the CSS class v-widget which sets the box-sizing to border-box. This causes borders and paddings to be considered when the browser calculates the component's size. This means that e.g. a component with padding: 5px and width: 100% inside a 200px wide slot will fill the slot without any overflow because the inner width of the component will be calculated to 190px by the browser. The Vaadin 7 server side API allows setting the size of the component in three different ways: * Undefined size, set e.g. using `setWidth(null)`, means that the component's size should have it's default size that might vary depending on its content. * Relative size, set e.g. using `setWidth("100%")` means that the component's size is determined by the size and settings of the component's parent. * Fixed size, set e.g. using `setWidth("250px")` or `setWidth("10em")` means that the component's size is fixed, so that the parent doesn't affect the size and neither does the component's content. The three different ways of setting the size means that a component should both support having its own natural size and filling the allocated space depending on how the size is set. This usually means that the main area of the component should adjust based on the settings. [[a-simple-sample]] A simple sample ~~~~~~~~~~~~~~~ Consider e.g. a simple date picker component with a text field where a date can be entered and where the currently selected is displayed and a button that is used to open a calendar view where a date can be picked using the mouse. [source,java] .... public class MyPickerWidget extends ComplexPanel { public static final String CLASSNAME = "mypicker"; private final TextBox textBox = new TextBox(); private final PushButton button = new PushButton("..."); public MyPickerWidget() { setElement(Document.get().createDivElement()); setStylePrimaryName(CLASSNAME); textBox.setStylePrimaryName(CLASSNAME + "-field"); button.setStylePrimaryName(CLASSNAME + "-button"); add(textBox, getElement()); add(button, getElement()); button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Calendar picker not yet supported!"); } }); } } .... We then add this basic styling to the theme CSS file [source,scss] .... .mypicker { white-space: nowrap; } .mypicker-button { display: inline-block; border: 1px solid black; padding: 3px; width: 15px; text-align: center; } .... `display: inline-block` makes the button continue on the same line as the text field, placing it to the right of the field. We also add `white-space: nowrap` to the main div element to ensure the button is not wrapped to the next row. Finally, there is some padding and a border to make the button look more like a real button. [[using-available-space]] Using available space ^^^^^^^^^^^^^^^^^^^^^ This simple layout works well as long as the component's has it's default undefined width. Changing the width from the server does however not have any visible effect because only the size of the main div is changed. If the component is made smaller, the contents goes beyond the size of the element (this can be verified by adding `overflow: hidden;` to `.mypicker`) and if it gets larger the extra space is just left as empty space to the right of the button. The first step towards making the size adjust is to make the text field adjust to the main div element's width whenever the width is something else then than undefined. In these situations, Vaadin 7 adds a `v-has-width` class to the component's main element (`v-has-height` added when the height is not undefined). [source,scss] .... .mypicker.v-has-width > .mypicker-field { width: 100%; } .... With this additional CSS, the text field directly inside a picker that has a defined width gets full width. [[making-room-for-the-button-again]] Making room for the button again ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ We're however not done yet. Setting the width of the text field to 100% makes it as wide as the main div is, which means that the button goes outside the main div. This can be verified using the DOM inspector in your browser or by setting `overflow: hidden` to the style for `mypicker`. To reserve space for the button, we can add some padding to the right edge of the main div element. This does however cause the padding space to remain unused if the component size is undefined. To compensate for this, negative margin can be added to the right edge of the button, effectively reducing its occupied size to 0px. Finally, we need to use `box-sizing: border-box` to make the field's borders and paddings be included in the 100% width. The full CSS for the sample component: [source,scss] .... .mypicker { white-space: nowrap; padding-right: 23px; } .mypicker-button { display: inline-block; border: 1px solid black; padding: 3px; width: 15px; text-align: center; margin-right: -23px; } .mypicker.v-has-width > .mypicker-field { width: 100%; } .mypicker-field { -moz-box-sizing: border-box; -webkit-boz-sizing: border-box; box-sizing: border-box; } .... ter_for_object_storage-squashed'>artonge/feat/implement_custom_updater_for_object_storage-squashed Nextcloud server, a safe home for all your data: https://github.com/nextcloud/serverwww-data
aboutsummaryrefslogtreecommitdiffstats
path: root/lib/public/Comments/ICommentsManager.php
blob: c34bd4718cc20b5232f5e2f9280a71f12b7fdb20 (plain)
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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485