Mixing
How to show a form on a dropdown in angular material?
I want to show a simple form (as shown in image below) as a dropdown when an icon is clicked. I looked into the component list of angular material but I couldn't find any suitable component for this. There is menu but that can't be used in this case.
Does someone know how can I achieve this?
angular angular-material asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
add a comment |
I want to show a simple form (as shown in image below) as a dropdown when an icon is clicked. I looked into the component list of angular material but I couldn't find any suitable component for this. There is menu but that can't be used in this case.
Does someone know how can I achieve this?
angular angular-material asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
You are probably looking for an overlay: material.angular.io/cdk/overlay/overview
– Ploppy
Nov 22 '18 at 8:52
Have you looked into expansion-panels? material expansion panel
– Nikolai Kiefer
Nov 22 '18 at 14:54
Please explain why Menu isn't suitable. Knowing why might help others give you a better answer.
– G. Tranter
Nov 22 '18 at 15:31
@G.Tranter Thanks for you comment. It would be great if we could repurpose Menu for this. It tried here as you can see i can see only one input on Menu (instead of 3) and click on input closes the menu.
– i_read_terms_and_services
Nov 23 '18 at 5:52
1
@NikolaiKiefer I want form on overlay/dropdown. I dont think expansion panel would fit here.
– i_read_terms_and_services
Nov 23 '18 at 5:54
add a comment |
I want to show a simple form (as shown in image below) as a dropdown when an icon is clicked. I looked into the component list of angular material but I couldn't find any suitable component for this. There is menu but that can't be used in this case.
Does someone know how can I achieve this?
angular angular-material asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
I want to show a simple form (as shown in image below) as a dropdown when an icon is clicked. I looked into the component list of angular material but I couldn't find any suitable component for this. There is menu but that can't be used in this case.
Does someone know how can I achieve this?
angular angular-material angular angular-material asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
asked Nov 22 '18 at 8:50
i_read_terms_and_servicesi_read_terms_and_services
11910
11910
You are probably looking for an overlay: material.angular.io/cdk/overlay/overview
– Ploppy
Nov 22 '18 at 8:52
Have you looked into expansion-panels? material expansion panel
– Nikolai Kiefer
Nov 22 '18 at 14:54
Please explain why Menu isn't suitable. Knowing why might help others give you a better answer.
– G. Tranter
Nov 22 '18 at 15:31
@G.Tranter Thanks for you comment. It would be great if we could repurpose Menu for this. It tried here as you can see i can see only one input on Menu (instead of 3) and click on input closes the menu.
– i_read_terms_and_services
Nov 23 '18 at 5:52
1
@NikolaiKiefer I want form on overlay/dropdown. I dont think expansion panel would fit here.
– i_read_terms_and_services
Nov 23 '18 at 5:54
add a comment |
You are probably looking for an overlay: material.angular.io/cdk/overlay/overview
– Ploppy
Nov 22 '18 at 8:52
Have you looked into expansion-panels? material expansion panel
– Nikolai Kiefer
Nov 22 '18 at 14:54
Please explain why Menu isn't suitable. Knowing why might help others give you a better answer.
– G. Tranter
Nov 22 '18 at 15:31
@G.Tranter Thanks for you comment. It would be great if we could repurpose Menu for this. It tried here as you can see i can see only one input on Menu (instead of 3) and click on input closes the menu.
– i_read_terms_and_services
Nov 23 '18 at 5:52
1
@NikolaiKiefer I want form on overlay/dropdown. I dont think expansion panel would fit here.
– i_read_terms_and_services
Nov 23 '18 at 5:54
You are probably looking for an overlay: material.angular.io/cdk/overlay/overview
– Ploppy
Nov 22 '18 at 8:52
You are probably looking for an overlay: material.angular.io/cdk/overlay/overview
– Ploppy
Nov 22 '18 at 8:52
Have you looked into expansion-panels? material expansion panel
– Nikolai Kiefer
Nov 22 '18 at 14:54
Have you looked into expansion-panels? material expansion panel
– Nikolai Kiefer
Nov 22 '18 at 14:54
Please explain why Menu isn't suitable. Knowing why might help others give you a better answer.
– G. Tranter
Nov 22 '18 at 15:31
Please explain why Menu isn't suitable. Knowing why might help others give you a better answer.
– G. Tranter
Nov 22 '18 at 15:31
@G.Tranter Thanks for you comment. It would be great if we could repurpose Menu for this. It tried here as you can see i can see only one input on Menu (instead of 3) and click on input closes the menu.
– i_read_terms_and_services
Nov 23 '18 at 5:52
@G.Tranter Thanks for you comment. It would be great if we could repurpose Menu for this. It tried here as you can see i can see only one input on Menu (instead of 3) and click on input closes the menu.
– i_read_terms_and_services
Nov 23 '18 at 5:52
1
1
@NikolaiKiefer I want form on overlay/dropdown. I dont think expansion panel would fit here.
– i_read_terms_and_services
Nov 23 '18 at 5:54
@NikolaiKiefer I want form on overlay/dropdown. I dont think expansion panel would fit here.
– i_read_terms_and_services
Nov 23 '18 at 5:54
add a comment |
2 Answers
2
active
oldest
votes
If Menu Api is not helpful in your case,
then you can use Dialog Api with updatePosition and with hasBackdrop: false.
- Using
hasBackdrop: falsewill not create the overlay. - Open the dialog next to the button from where you want to show the dropdown.
- Demo Opening Dialog at desired location
Open Dialog from Component as :
let dialogRef = this.dialog.open(ExampleDialogComponent, {
width: '250px',
data: filterData,
hasBackdrop: false,
panelClass: 'filter-popup'
});
In Dialog Component :
ngOnInit() {
this.filterData = this.data;
const rightMostPos = window.innerWidth - Number(this.filterData.left);
this.dialogRef.updatePosition({ top: `${this.filterData.top}px`,
right: `${rightMostPos}px`});
}
Application Code :
https://stackblitz.com/edit/angular-mat-dialog-updated-position?file=app%2Fexample%2Fexample-dialog%2Fexample-dialog.component.ts
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
add a comment |
You can use MatMenu, but you need to do a few things to make it work.
The first is to not use mat-menu-item. This forces styling on the item so that it has a fixed height of what you would expect for a menu item.
The second is to prevent interaction from propagating back to the menu causing it to close whenever you try to use the form. Use the Event.stopPropagation() function on the outer-most parent of your form inside the menu. You might also want to prevent the menu from closing when you click outside it on the backdrop (and add your own close or cancel button). That will look something like:
<mat-menu class="menu-form-wrapper" [hasBackdrop]="false">
<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
<form class="menu-form">
...
You also need to take care of styling issues. Your form container needs to take up the entire menu so that the user can't click outside of it but still on the menu, causing it to close. And you need to override the default padding that MatMenu adds to its mat-menu-content container. This style needs to be in your global style sheet, not in the component style, and it is where you will add your form's layout:
// override mat-menu-content padding
.menu-form-wrapper .mat-menu-content:not(:empty) {
padding: 0;
}
// layout for the form
.menu-form-wrapper .menu-form {
display: flex;
flex-direction: column;
padding: 24px;
}
Here it is on StackBlitz.
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427017%2fhow-to-show-a-form-on-a-dropdown-in-angular-material%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
If Menu Api is not helpful in your case,
then you can use Dialog Api with updatePosition and with hasBackdrop: false.
- Using
hasBackdrop: falsewill not create the overlay. - Open the dialog next to the button from where you want to show the dropdown.
- Demo Opening Dialog at desired location
Open Dialog from Component as :
let dialogRef = this.dialog.open(ExampleDialogComponent, {
width: '250px',
data: filterData,
hasBackdrop: false,
panelClass: 'filter-popup'
});
In Dialog Component :
ngOnInit() {
this.filterData = this.data;
const rightMostPos = window.innerWidth - Number(this.filterData.left);
this.dialogRef.updatePosition({ top: `${this.filterData.top}px`,
right: `${rightMostPos}px`});
}
Application Code :
https://stackblitz.com/edit/angular-mat-dialog-updated-position?file=app%2Fexample%2Fexample-dialog%2Fexample-dialog.component.ts
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
add a comment |
If Menu Api is not helpful in your case,
then you can use Dialog Api with updatePosition and with hasBackdrop: false.
- Using
hasBackdrop: falsewill not create the overlay. - Open the dialog next to the button from where you want to show the dropdown.
- Demo Opening Dialog at desired location
Open Dialog from Component as :
let dialogRef = this.dialog.open(ExampleDialogComponent, {
width: '250px',
data: filterData,
hasBackdrop: false,
panelClass: 'filter-popup'
});
In Dialog Component :
ngOnInit() {
this.filterData = this.data;
const rightMostPos = window.innerWidth - Number(this.filterData.left);
this.dialogRef.updatePosition({ top: `${this.filterData.top}px`,
right: `${rightMostPos}px`});
}
Application Code :
https://stackblitz.com/edit/angular-mat-dialog-updated-position?file=app%2Fexample%2Fexample-dialog%2Fexample-dialog.component.ts
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
add a comment |
If Menu Api is not helpful in your case,
then you can use Dialog Api with updatePosition and with hasBackdrop: false.
- Using
hasBackdrop: falsewill not create the overlay. - Open the dialog next to the button from where you want to show the dropdown.
- Demo Opening Dialog at desired location
Open Dialog from Component as :
let dialogRef = this.dialog.open(ExampleDialogComponent, {
width: '250px',
data: filterData,
hasBackdrop: false,
panelClass: 'filter-popup'
});
In Dialog Component :
ngOnInit() {
this.filterData = this.data;
const rightMostPos = window.innerWidth - Number(this.filterData.left);
this.dialogRef.updatePosition({ top: `${this.filterData.top}px`,
right: `${rightMostPos}px`});
}
Application Code :
https://stackblitz.com/edit/angular-mat-dialog-updated-position?file=app%2Fexample%2Fexample-dialog%2Fexample-dialog.component.ts
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
If Menu Api is not helpful in your case,
then you can use Dialog Api with updatePosition and with hasBackdrop: false.
- Using
hasBackdrop: falsewill not create the overlay. - Open the dialog next to the button from where you want to show the dropdown.
- Demo Opening Dialog at desired location
Open Dialog from Component as :
let dialogRef = this.dialog.open(ExampleDialogComponent, {
width: '250px',
data: filterData,
hasBackdrop: false,
panelClass: 'filter-popup'
});
In Dialog Component :
ngOnInit() {
this.filterData = this.data;
const rightMostPos = window.innerWidth - Number(this.filterData.left);
this.dialogRef.updatePosition({ top: `${this.filterData.top}px`,
right: `${rightMostPos}px`});
}
Application Code :
https://stackblitz.com/edit/angular-mat-dialog-updated-position?file=app%2Fexample%2Fexample-dialog%2Fexample-dialog.component.ts
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
answered Nov 23 '18 at 4:47
Abhishek KumarAbhishek Kumar
1,167216
1,167216
add a comment |
add a comment |
You can use MatMenu, but you need to do a few things to make it work.
The first is to not use mat-menu-item. This forces styling on the item so that it has a fixed height of what you would expect for a menu item.
The second is to prevent interaction from propagating back to the menu causing it to close whenever you try to use the form. Use the Event.stopPropagation() function on the outer-most parent of your form inside the menu. You might also want to prevent the menu from closing when you click outside it on the backdrop (and add your own close or cancel button). That will look something like:
<mat-menu class="menu-form-wrapper" [hasBackdrop]="false">
<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
<form class="menu-form">
...
You also need to take care of styling issues. Your form container needs to take up the entire menu so that the user can't click outside of it but still on the menu, causing it to close. And you need to override the default padding that MatMenu adds to its mat-menu-content container. This style needs to be in your global style sheet, not in the component style, and it is where you will add your form's layout:
// override mat-menu-content padding
.menu-form-wrapper .mat-menu-content:not(:empty) {
padding: 0;
}
// layout for the form
.menu-form-wrapper .menu-form {
display: flex;
flex-direction: column;
padding: 24px;
}
Here it is on StackBlitz.
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
add a comment |
You can use MatMenu, but you need to do a few things to make it work.
The first is to not use mat-menu-item. This forces styling on the item so that it has a fixed height of what you would expect for a menu item.
The second is to prevent interaction from propagating back to the menu causing it to close whenever you try to use the form. Use the Event.stopPropagation() function on the outer-most parent of your form inside the menu. You might also want to prevent the menu from closing when you click outside it on the backdrop (and add your own close or cancel button). That will look something like:
<mat-menu class="menu-form-wrapper" [hasBackdrop]="false">
<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
<form class="menu-form">
...
You also need to take care of styling issues. Your form container needs to take up the entire menu so that the user can't click outside of it but still on the menu, causing it to close. And you need to override the default padding that MatMenu adds to its mat-menu-content container. This style needs to be in your global style sheet, not in the component style, and it is where you will add your form's layout:
// override mat-menu-content padding
.menu-form-wrapper .mat-menu-content:not(:empty) {
padding: 0;
}
// layout for the form
.menu-form-wrapper .menu-form {
display: flex;
flex-direction: column;
padding: 24px;
}
Here it is on StackBlitz.
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
add a comment |
You can use MatMenu, but you need to do a few things to make it work.
The first is to not use mat-menu-item. This forces styling on the item so that it has a fixed height of what you would expect for a menu item.
The second is to prevent interaction from propagating back to the menu causing it to close whenever you try to use the form. Use the Event.stopPropagation() function on the outer-most parent of your form inside the menu. You might also want to prevent the menu from closing when you click outside it on the backdrop (and add your own close or cancel button). That will look something like:
<mat-menu class="menu-form-wrapper" [hasBackdrop]="false">
<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
<form class="menu-form">
...
You also need to take care of styling issues. Your form container needs to take up the entire menu so that the user can't click outside of it but still on the menu, causing it to close. And you need to override the default padding that MatMenu adds to its mat-menu-content container. This style needs to be in your global style sheet, not in the component style, and it is where you will add your form's layout:
// override mat-menu-content padding
.menu-form-wrapper .mat-menu-content:not(:empty) {
padding: 0;
}
// layout for the form
.menu-form-wrapper .menu-form {
display: flex;
flex-direction: column;
padding: 24px;
}
Here it is on StackBlitz.
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
You can use MatMenu, but you need to do a few things to make it work.
The first is to not use mat-menu-item. This forces styling on the item so that it has a fixed height of what you would expect for a menu item.
The second is to prevent interaction from propagating back to the menu causing it to close whenever you try to use the form. Use the Event.stopPropagation() function on the outer-most parent of your form inside the menu. You might also want to prevent the menu from closing when you click outside it on the backdrop (and add your own close or cancel button). That will look something like:
<mat-menu class="menu-form-wrapper" [hasBackdrop]="false">
<div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
<form class="menu-form">
...
You also need to take care of styling issues. Your form container needs to take up the entire menu so that the user can't click outside of it but still on the menu, causing it to close. And you need to override the default padding that MatMenu adds to its mat-menu-content container. This style needs to be in your global style sheet, not in the component style, and it is where you will add your form's layout:
// override mat-menu-content padding
.menu-form-wrapper .mat-menu-content:not(:empty) {
padding: 0;
}
// layout for the form
.menu-form-wrapper .menu-form {
display: flex;
flex-direction: column;
padding: 24px;
}
Here it is on StackBlitz.
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
edited Nov 29 '18 at 19:52
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
answered Nov 23 '18 at 16:11
G. TranterG. Tranter
4,7861423
4,7861423
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427017%2fhow-to-show-a-form-on-a-dropdown-in-angular-material%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You are probably looking for an overlay: material.angular.io/cdk/overlay/overview
– Ploppy
Nov 22 '18 at 8:52
Have you looked into expansion-panels? material expansion panel
– Nikolai Kiefer
Nov 22 '18 at 14:54
Please explain why Menu isn't suitable. Knowing why might help others give you a better answer.
– G. Tranter
Nov 22 '18 at 15:31
@G.Tranter Thanks for you comment. It would be great if we could repurpose Menu for this. It tried here as you can see i can see only one input on Menu (instead of 3) and click on input closes the menu.
– i_read_terms_and_services
Nov 23 '18 at 5:52
1
@NikolaiKiefer I want form on overlay/dropdown. I dont think expansion panel would fit here.
– i_read_terms_and_services
Nov 23 '18 at 5:54