diff --git a/demo/src/app/pages/modules/modal/modal.page.ts b/demo/src/app/pages/modules/modal/modal.page.ts
index de44dad38..deb0d4613 100644
--- a/demo/src/app/pages/modules/modal/modal.page.ts
+++ b/demo/src/app/pages/modules/modal/modal.page.ts
@@ -97,10 +97,17 @@ export class ModalPage {
description: "Sets whether the modal displays against a light background.",
defaultValue: "false"
},
+ {
+ name: "isCentered",
+ type: "boolean",
+ description: "Whether or not the modal should be placed in the center of the page",
+ defaultValue: "true"
+ },
{
name: "mustScroll",
type: "boolean",
- description: "Whether or not the modal should always display a scrollbar.",
+ description: "Whether or not the modal should be always scrolling. " +
+ "Should be used when the modal content is dynamic and can exceed the height of the browser",
defaultValue: "false"
},
{
diff --git a/demo/src/index.html b/demo/src/index.html
index f884bfc52..7231db887 100644
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -12,7 +12,7 @@
-
+
diff --git a/src/modules/dimmer/components/dimmer.ts b/src/modules/dimmer/components/dimmer.ts
index a0439adf9..82694c9c5 100644
--- a/src/modules/dimmer/components/dimmer.ts
+++ b/src/modules/dimmer/components/dimmer.ts
@@ -8,14 +8,13 @@ import { TransitionController, SuiTransition, TransitionDirection, Transition }
selector: "sui-dimmer",
template: `
-
-
-
+
`,
styles: [`
-:host.dimmer {
+:host.dimmer:not(.hidden) {
transition: none;
+ display: flex !important;
}
`]
})
diff --git a/src/modules/modal/classes/modal-config.ts b/src/modules/modal/classes/modal-config.ts
index d6a54106e..fe0dff823 100644
--- a/src/modules/modal/classes/modal-config.ts
+++ b/src/modules/modal/classes/modal-config.ts
@@ -29,6 +29,8 @@ export class ModalConfig {
public isBasic:boolean;
// Whether the modal shows against a light background.
public isInverted:boolean;
+ // Whether or not the modal should be placed in the center of the page.
+ public isCentered:boolean;
// Whether or not the modal should always display a scrollbar.
public mustScroll:boolean;
@@ -47,6 +49,7 @@ export class ModalConfig {
this.isFullScreen = false;
this.isBasic = false;
this.isInverted = false;
+ this.isCentered = true;
this.mustScroll = false;
diff --git a/src/modules/modal/components/dimmer.ts b/src/modules/modal/components/dimmer.ts
new file mode 100644
index 000000000..11c4c9d52
--- /dev/null
+++ b/src/modules/modal/components/dimmer.ts
@@ -0,0 +1,26 @@
+import { Component, HostBinding, Renderer2, ElementRef, ChangeDetectorRef } from "@angular/core";
+import { SuiDimmer } from "../../dimmer/internal";
+
+@Component({
+ selector: "sui-modal-dimmer",
+ template: ``,
+ styles: [`
+ :host.ui.dimmer:not(.hidden) {
+ transition: none;
+ overflow-y: auto;
+ display: flex !important;
+ }
+ `]
+})
+export class SuiModalDimmer extends SuiDimmer {
+
+ @HostBinding("class.page")
+ @HostBinding("class.modals")
+ public readonly hasClasses:boolean;
+
+ constructor(renderer:Renderer2, element:ElementRef, changeDetector:ChangeDetectorRef) {
+ super(renderer, element, changeDetector);
+ this.hasClasses = true;
+ this.isClickable = false;
+ }
+}
diff --git a/src/modules/modal/components/modal.ts b/src/modules/modal/components/modal.ts
index 7c094b84e..eaa560793 100644
--- a/src/modules/modal/components/modal.ts
+++ b/src/modules/modal/components/modal.ts
@@ -11,12 +11,10 @@ import { ModalConfig, ModalSize } from "../classes/modal-config";
selector: "sui-modal",
template: `
-
@@ -25,7 +23,7 @@ import { ModalConfig, ModalSize } from "../classes/modal-config";
[class.active]="transitionController?.isVisible"
[class.fullscreen]="isFullScreen"
[class.basic]="isBasic"
- [class.scroll]="mustScroll"
+ [class.scrolling]="mustScroll"
[class.inverted]="isInverted"
[ngClass]="dynamicClasses"
(click)="onClick($event)"
@@ -38,21 +36,9 @@ import { ModalConfig, ModalSize } from "../classes/modal-config";
-
+
`,
- styles: [`
-.ui.dimmer {
- overflow-y: auto;
- display: flex !important;
-}
-
-/* avoid .scrolling as Semantic UI adds unwanted styles. */
-.scroll {
- margin-top: 3.5rem !important;
- margin-bottom: 3.5rem !important;
- top: 0;
-}
-`]
+ styles: [``]
})
export class SuiModal implements OnInit, AfterViewInit {
@Input()
@@ -93,6 +79,9 @@ export class SuiModal implements OnInit, AfterViewInit {
@Input()
public size:ModalSize;
+ @Input()
+ public isCentered:boolean;
+
// Whether the modal takes up the full width of the screen.
private _isFullScreen:boolean;
@@ -206,11 +195,8 @@ export class SuiModal implements OnInit, AfterViewInit {
templateElement.parentNode.removeChild(templateElement);
}
- // Update margin offset to center modal correctly on-screen.
const element = this._modalElement.nativeElement as Element;
- setTimeout(() => {
- this.updateScroll();
- });
+ setTimeout(() => this.updateScroll());
// Focus any element with [autofocus] attribute.
const autoFocus = element.querySelector("[autofocus]") as HTMLElement | null;
@@ -231,6 +217,7 @@ export class SuiModal implements OnInit, AfterViewInit {
this.isFullScreen = config.isFullScreen;
this.isBasic = config.isBasic;
this.isInverted = config.isInverted;
+ this.isCentered = config.isCentered;
this.mustScroll = config.mustScroll;
@@ -269,12 +256,13 @@ export class SuiModal implements OnInit, AfterViewInit {
// Decides whether the modal needs to reposition to allow scrolling.
private updateScroll():void {
- // Semantic UI modal margin is 3.5rem, which is relative to the global font size, so for compatibility:
- const fontSize = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size"));
- const margin = fontSize * 3.5;
// _mustAlwaysScroll works by stopping _mustScroll from being automatically updated, so it stays `true`.
if (!this._mustAlwaysScroll && this._modalElement) {
+
+ // Semantic UI modal margin and dimmer padding are 1rem, which is relative to the global font size, so for compatibility:
+ const fontSize = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue("font-size"));
+ const margin = fontSize * 2;
const element = this._modalElement.nativeElement as Element;
// The modal must scroll if the window height is smaller than the modal height + both margins.
diff --git a/src/modules/modal/modal.module.ts b/src/modules/modal/modal.module.ts
index b2f9fb9fa..f98d6ed43 100644
--- a/src/modules/modal/modal.module.ts
+++ b/src/modules/modal/modal.module.ts
@@ -5,6 +5,7 @@ import { SuiTransitionModule } from "../transition/internal";
import { SuiUtilityModule } from "../../misc/util/internal";
import { SuiModalService } from "./services/modal.service";
import { SuiModal } from "./components/modal";
+import { SuiModalDimmer } from "./components/dimmer";
@NgModule({
imports: [
@@ -14,7 +15,8 @@ import { SuiModal } from "./components/modal";
SuiUtilityModule
],
declarations: [
- SuiModal
+ SuiModal,
+ SuiModalDimmer
],
exports: [
SuiModal