Skip to content

Commit f95c405

Browse files
pdanpdanpdanpdan
authored
fix(QEditor/QTable): (backport from Qv2) fix height when used in fullscreen (quasarframework#11623)
1 parent a8e0a95 commit f95c405

File tree

8 files changed

+129
-12
lines changed

8 files changed

+129
-12
lines changed

‎ui/dev/src/pages/form/editor-part4.vue‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<template>
2+
<div class="q-pa-md q-gutter-sm">
3+
<q-editor
4+
v-model="qeditor"
5+
:dense="$q.screen.lt.md"
6+
:toolbar="[
7+
[
8+
{
9+
label: $q.lang.editor.align,
10+
icon: $q.iconSet.editor.align,
11+
fixedLabel: true,
12+
list: 'only-icons',
13+
options: ['left', 'center', 'right', 'justify']
14+
},
15+
{
16+
label: $q.lang.editor.align,
17+
icon: $q.iconSet.editor.align,
18+
fixedLabel: true,
19+
options: ['left', 'center', 'right', 'justify']
20+
}
21+
],
22+
['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
23+
['token', 'hr', 'link', 'custom_btn'],
24+
['print', 'fullscreen'],
25+
[
26+
{
27+
label: $q.lang.editor.formatting,
28+
icon: $q.iconSet.editor.formatting,
29+
list: 'no-icons',
30+
options: [
31+
'p',
32+
'h1',
33+
'h2',
34+
'h3',
35+
'h4',
36+
'h5',
37+
'h6',
38+
'code'
39+
]
40+
},
41+
{
42+
label: $q.lang.editor.fontSize,
43+
icon: $q.iconSet.editor.fontSize,
44+
fixedLabel: true,
45+
fixedIcon: true,
46+
list: 'no-icons',
47+
options: [
48+
'size-1',
49+
'size-2',
50+
'size-3',
51+
'size-4',
52+
'size-5',
53+
'size-6',
54+
'size-7'
55+
]
56+
},
57+
{
58+
label: $q.lang.editor.defaultFont,
59+
icon: $q.iconSet.editor.font,
60+
fixedIcon: true,
61+
list: 'no-icons',
62+
options: [
63+
'default_font',
64+
'arial',
65+
'arial_black',
66+
'comic_sans',
67+
'courier_new',
68+
'impact',
69+
'lucida_grande',
70+
'times_new_roman',
71+
'verdana'
72+
]
73+
},
74+
'removeFormat'
75+
],
76+
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
77+
78+
['undo', 'redo'],
79+
['viewsource']
80+
]"
81+
:fonts="{
82+
arial: 'Arial',
83+
arial_black: 'Arial Black',
84+
comic_sans: 'Comic Sans MS',
85+
courier_new: 'Courier New',
86+
impact: 'Impact',
87+
lucida_grande: 'Lucida Grande',
88+
times_new_roman: 'Times New Roman',
89+
verdana: 'Verdana'
90+
}"
91+
/>
92+
</div>
93+
</template>
94+
<script>
95+
export default {
96+
data () {
97+
return {
98+
qeditor: '<pre>Check out the two different types of dropdowns' +
99+
' in each of the "Align" buttons.</pre> '
100+
}
101+
}
102+
}
103+
</script>

‎ui/src/components/editor/QEditor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -516,7 +516,7 @@ export default Vue.extend({
516516

517517
return h('div', {
518518
style: {
519-
height: this.inFullscreen === true ? '100vh' : null
519+
height: this.inFullscreen === true ? '100%' : null
520520
},
521521
class: this.classes,
522522
attrs: this.attrs,

‎ui/src/components/editor/QEditor.sass‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,18 @@
66
&.disabled
77
border-style: dashed
88

9+
&.fullscreen
10+
max-height: 100%
11+
912
> div:first-child,
1013
&__toolbars-container,
1114
&__toolbars-container > div:first-child
1215
border-top-left-radius: inherit
1316
border-top-right-radius: inherit
1417

18+
&__toolbars-container
19+
max-width: 100%
20+
1521
&__content
1622
outline: 0
1723
padding: $editor-content-padding
@@ -39,9 +45,6 @@
3945
border-bottom: 1px solid $editor-border-color
4046
min-height: 32px
4147

42-
&__toolbars-container
43-
max-width: 100%
44-
4548
.q-btn
4649
margin: $editor-button-gutter
4750

‎ui/src/components/editor/QEditor.styl‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,18 @@
66
&.disabled
77
border-style: dashed
88

9-
> div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
9+
&.fullscreen
10+
max-height: 100%
11+
12+
> div:first-child,
13+
&__toolbars-container,
14+
&__toolbars-container > div:first-child
1015
border-top-left-radius: inherit
1116
border-top-right-radius: inherit
1217

18+
&__toolbars-container
19+
max-width: 100%
20+
1321
&__content
1422
outline: 0
1523
padding: $editor-content-padding
@@ -37,9 +45,6 @@
3745
border-bottom: 1px solid $editor-border-color
3846
min-height: 32px
3947

40-
&__toolbars-container
41-
max-width: 100%
42-
4348
.q-btn
4449
margin: $editor-button-gutter
4550

‎ui/src/components/table/QTable.sass‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@
5151
&__container
5252
position: relative
5353

54+
&.fullscreen
55+
max-height: 100%
56+
5457
> div:first-child
5558
border-top-left-radius: inherit
5659
border-top-right-radius: inherit

‎ui/src/components/table/QTable.styl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@
5151
&__container
5252
position: relative
5353

54+
&.fullscreen
55+
max-height: 100%
56+
5457
> div:first-child
5558
border-top-left-radius: inherit
5659
border-top-right-radius: inherit

‎ui/src/css/core/positioning.sass‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
.fullscreen
6767
z-index: $z-fullscreen
6868
border-radius: 0 !important
69-
max-width: 100%
70-
max-height: 100%
69+
max-width: 100vw
70+
max-height: 100vh
7171

7272
body.q-ios-padding .fullscreen
7373
padding-top: $ios-statusbar-height !important

‎ui/src/css/core/positioning.styl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@
6666
.fullscreen
6767
z-index: $z-fullscreen
6868
border-radius: 0 !important
69-
max-width: 100%
70-
max-height: 100%
69+
max-width: 100vw
70+
max-height: 100vh
7171

7272
body.q-ios-padding .fullscreen
7373
padding-top: $ios-statusbar-height !important

0 commit comments

Comments
 (0)