Angular Material: CheckBox in mat-menu; Problem with dark themesAngular 4 CLI, WebPack, switching bootstrap theme dynamically for the entire websiteHow to add custom styling to Angular material formsAngular Material Components not workingAngular 6: mat-toolbar and mat-toolbar-row in footer (shared) component is not displaying properly (but without any error)?Angular Material Change Theme Color of <mat-list-option> checkboxAngular Material custom theme makes popups transparentHow to include custom material themes into components without duplicating mixins: mat-core and angular-material-themeUsing ES6 Map as an input for angular material checkbox throws Parse errorsOpen Angular Material Menu Programmatically using ViewChild on MatMenuTriggerAngular Material mat-checkbox problem on Firefox
Can I run 125kHz RF circuit on a breadboard?
How to make money from a browser who sees 5 seconds into the future of any web page?
Are Captain Marvel's powers affected by Thanos breaking the Tesseract and claiming the stone?
Why does a 97 / 92 key piano exist by Bösendorfer?
What should be the ideal length of sentences in a blog post for ease of reading?
How do I prevent inappropriate ads from appearing in my game?
Unable to disable Microsoft Store in domain environment
Is there a reason to prefer HFS+ over APFS for disk images in High Sierra and/or Mojave?
Given this phrasing in the lease, when should I pay my rent?
Limit max CPU usage SQL SERVER with WSRM
Mimic lecturing on blackboard, facing audience
Review your own paper in Mathematics
Why would five hundred and five be same as one?
Can I cause damage to electrical appliances by unplugging them when they are turned on?
Make a Bowl of Alphabet Soup
Why do Radio Buttons not fill the entire outer circle?
What's the name of the logical fallacy where a debater extends a statement far beyond the original statement to make it true?
Should I assume I have passed probation?
Proving an identity involving cross products and coplanar vectors
How much do grades matter for a future academia position?
Ways of geometrical multiplication
If Captain Marvel (MCU) were to have a child with a human male, would the child be human or Kree?
How can I safely use "Thalidomide" in my novel while respecting the trademark?
When is "ei" a diphthong?
Angular Material: CheckBox in mat-menu; Problem with dark themes
Angular 4 CLI, WebPack, switching bootstrap theme dynamically for the entire websiteHow to add custom styling to Angular material formsAngular Material Components not workingAngular 6: mat-toolbar and mat-toolbar-row in footer (shared) component is not displaying properly (but without any error)?Angular Material Change Theme Color of <mat-list-option> checkboxAngular Material custom theme makes popups transparentHow to include custom material themes into components without duplicating mixins: mat-core and angular-material-themeUsing ES6 Map as an input for angular material checkbox throws Parse errorsOpen Angular Material Menu Programmatically using ViewChild on MatMenuTriggerAngular Material mat-checkbox problem on Firefox
You can't put a <mat-checkbox> in a <mat-menu> normally. If so, dark themes don't apply to the text-part of your <mat-checkbox> (see the image at the end).
About <mat-label>s there is a similar issue. But the solution is simple:
Using<label mat-menu-item>instead of<mat-label>.
Similarly about buttons.
But I couldn't find a similar solution for <mat-checkbox>es! These are all states that I tested:
<mat-menu #menu="matMenu">
<mat-label>Bad label</mat-label>
<label mat-menu-item>OK label</label>
<mat-checkbox>Problem here</mat-checkbox>
<!-- ERROR:
<mat-checkbox mat-menu-item>
Template parse errors:
More than one component matched on this element.
</mat-checkbox>
-->
<br><mat-checkbox></mat-checkbox>
<label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>
stackblitz here
And the result:
angular checkbox menu angular-material menu-items asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
add a comment |
You can't put a <mat-checkbox> in a <mat-menu> normally. If so, dark themes don't apply to the text-part of your <mat-checkbox> (see the image at the end).
About <mat-label>s there is a similar issue. But the solution is simple:
Using<label mat-menu-item>instead of<mat-label>.
Similarly about buttons.
But I couldn't find a similar solution for <mat-checkbox>es! These are all states that I tested:
<mat-menu #menu="matMenu">
<mat-label>Bad label</mat-label>
<label mat-menu-item>OK label</label>
<mat-checkbox>Problem here</mat-checkbox>
<!-- ERROR:
<mat-checkbox mat-menu-item>
Template parse errors:
More than one component matched on this element.
</mat-checkbox>
-->
<br><mat-checkbox></mat-checkbox>
<label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>
stackblitz here
And the result:
angular checkbox menu angular-material menu-items asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
add a comment |
You can't put a <mat-checkbox> in a <mat-menu> normally. If so, dark themes don't apply to the text-part of your <mat-checkbox> (see the image at the end).
About <mat-label>s there is a similar issue. But the solution is simple:
Using<label mat-menu-item>instead of<mat-label>.
Similarly about buttons.
But I couldn't find a similar solution for <mat-checkbox>es! These are all states that I tested:
<mat-menu #menu="matMenu">
<mat-label>Bad label</mat-label>
<label mat-menu-item>OK label</label>
<mat-checkbox>Problem here</mat-checkbox>
<!-- ERROR:
<mat-checkbox mat-menu-item>
Template parse errors:
More than one component matched on this element.
</mat-checkbox>
-->
<br><mat-checkbox></mat-checkbox>
<label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>
stackblitz here
And the result:
angular checkbox menu angular-material menu-items asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
You can't put a <mat-checkbox> in a <mat-menu> normally. If so, dark themes don't apply to the text-part of your <mat-checkbox> (see the image at the end).
About <mat-label>s there is a similar issue. But the solution is simple:
Using<label mat-menu-item>instead of<mat-label>.
Similarly about buttons.
But I couldn't find a similar solution for <mat-checkbox>es! These are all states that I tested:
<mat-menu #menu="matMenu">
<mat-label>Bad label</mat-label>
<label mat-menu-item>OK label</label>
<mat-checkbox>Problem here</mat-checkbox>
<!-- ERROR:
<mat-checkbox mat-menu-item>
Template parse errors:
More than one component matched on this element.
</mat-checkbox>
-->
<br><mat-checkbox></mat-checkbox>
<label mat-menu-item style="display:inline">Not good workaround</label>
</mat-menu>
stackblitz here
And the result:
angular checkbox menu angular-material menu-items angular checkbox menu angular-material menu-items asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
edited Mar 8 at 3:30
Mir-Ismaili
asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
asked Mar 7 at 22:09
Mir-IsmailiMir-Ismaili
2,4791740
2,4791740
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...
<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
<button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
<button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not
With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.
<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox>
Stackblitz
https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
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%2f55053605%2fangular-material-checkbox-in-mat-menu-problem-with-dark-themes%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...
<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
<button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
<button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not
With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.
<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox>
Stackblitz
https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
add a comment |
There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...
<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
<button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
<button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not
With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.
<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox>
Stackblitz
https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
add a comment |
There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...
<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
<button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
<button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not
With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.
<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox>
Stackblitz
https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
There appears to be a way to assign menuitemcheckbox to the role input, on the mat-menu-item directive... unfortunately, I am not clear on how it should work...
<!-- https://github.com/angular/material2/commit/3f1588f562a4abd85d6add87a4f6ed969ba56898#diff-4cc67949abfd84b09e8b7178ac357febR2134 -->
<button mat-menu-item role="menuitemcheckbox" aria-checked="true">Checked</button>
<button mat-menu-item role="menuitemcheckbox" aria-checked="false">Not
With that being said, assigning the mat-menu-item class rather than the directive may be a viable workaround.
<mat-checkbox class="mat-menu-item">Problem here</mat-checkbox>
Stackblitz
https://stackblitz.com/edit/angular-j4ftuc-5s5k3t?embed=1&file=app/menu-overview-example.html
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
answered Mar 8 at 2:15
MarshalMarshal
3,1222519
3,1222519
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%2f55053605%2fangular-material-checkbox-in-mat-menu-problem-with-dark-themes%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
