yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix overflow on the modal sidebars

Browse Source
This commit is contained in:
Lone Iversen
2022-11-18 10:06:46 +01:00
parent d138af461d
commit cf0d35ee02
2 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-settings.element.ts
View File

@@ -15,7 +15,8 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
css` css`
:host { :host {
display: relative; display: relative;
} /* }
uui-dialog-layout { uui-dialog-layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -26,6 +27,7 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
padding: var(--uui-size-space-5); padding: var(--uui-size-space-5);
box-sizing: border-box; box-sizing: border-box;
} }
uui-scroll-container { uui-scroll-container {
line-height: 0; line-height: 0;
display: grid; display: grid;
@@ -33,8 +35,9 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
overflow-y: scroll; overflow-y: scroll;
max-height: 100%; max-height: 100%;
min-height: 0; min-height: 0;
}*/ }
div { div {
margin-top: var(--uui-size-space-5);
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@@ -65,17 +68,19 @@ export class UmbModalLayoutFieldsSettingsElement extends UmbModalLayoutElement<U
if (this._fields) { if (this._fields) {
return html` return html`
<uui-dialog-layout headline="Show fields"> <uui-dialog-layout headline="Show fields">
<uui-scroll-container id="icon-selection"> <uui-scroll-container id="field-settings">
${Object.values(this._fields).map((field, index) => { <span>
return html`<uui-toggle ${Object.values(this._fields).map((field, index) => {
name="${field.name}" return html`<uui-toggle
label="${field.name}" name="${field.name}"
.checked="${field.exposed}" label="${field.name}"
@change="${() => { .checked="${field.exposed}"
this._fields ? (this._fields[index].exposed = !field.exposed) : ''; @change="${() => {
}}"></uui-toggle> this._fields ? (this._fields[index].exposed = !field.exposed) : '';
<br />`; }}"></uui-toggle>
})} <br />`;
})}
</span>
</uui-scroll-container> </uui-scroll-container>
<div> <div>
<uui-button look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button> <uui-button look="primary" label="Close sidebar" @click="${this._handleClose}">Close</uui-button>

3
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/fields-viewer/fields-viewer.element.ts
View File

@@ -31,6 +31,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
min-height: 0; min-height: 0;
} }
div { div {
margin-top: var(--uui-size-space-5);
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@@ -45,7 +46,7 @@ export class UmbModalLayoutFieldsViewerElement extends UmbModalLayoutElement<Sea
if (this.data) { if (this.data) {
return html` return html`
<uui-dialog-layout class="uui-text" headline="${this.data.name}"> <uui-dialog-layout class="uui-text" headline="${this.data.name}">
<uui-scroll-container id="icon-selection"> <uui-scroll-container id="field-viewer">
<uui-table> <uui-table>
<uui-table-head> <uui-table-head>
<uui-table-head-cell> Field </uui-table-head-cell> <uui-table-head-cell> Field </uui-table-head-cell>