I'm about to put a fist through my PC screen. I have a dialog box that refuses to budge a hot inch above my submit button at the bottom of the screen -- I want it at the very top.
I have made sure my theme is loading. That was validated here:
I have tried:
this.dialogBox.open(thankYouModal, {position: {top: '0%', left: '20%'}});
I've tried negative and positive numbers for top. The best I get is that I can shift the modal further down so the user has to scroll down to close it. However, that sucker won't budge a hair past the submit button
I've attempted to put a style sheet into the component with the following:
div#cdk-overlay-0.cdk-overlay-container{
position: fixed !important;
left: 20%;
top: 0%;
background-color: white;
pointer-events: auto;
}
I cannot get this thing to budge an inch above that submit button. I will give someone my first born child if they help me figure out what I'm doing wrong.
(yes I know I'm dramatic, but I've fought with it and searched the web for 3 hours; I am a defeated man ... )
Edit
here is the thankYouModalComponent code:
import {Component} from "@angular/core";
import {MdDialogRef, MdDialogConfig} from "@angular/material";
@Component({
selector: 'thank-you-modal',
template: `
<h3>Thank You for Your Submission</h3>
<p>Your Feedback has been Saved.</p>
<button md-raised-button (click)="dialogRef.close()">Close</button>
`,
styles: [`
.md-dialog-container {
position: fixed !important;
left: 20%;
top: 0%;
background-color: white;
z-index: 100000;
}`]
})
export class ThankYouComponent{
constructor(public dialogRef: MdDialogRef<any>, ) {}
}
Here's the calling method and constructor for the component:
constructor(@Inject(FormBuilder) fb : FormBuilder,
private feedbackService: feedbackService,
private dialog : MdDialog){
-------<irrelevant code here>------------
}
submitFeedback(group : FormGroup){
const feedback = new Feedback( group.get('nameBox').value,
group.get('productBox').value,
group.get('upsBox').value,
group.get('downsBox').value);
if(confirm("Is the data entered what you want to submit?")){
this.dialog.open(ThankYouComponent, {position: {top: '0%', left:'20%'}});
}
Resulting dialog at bottom of form
See Question&Answers more detail:
os