Md-Checkbox has no margin when using dynamic label after #2121 #4720

w3t · 2017-05-22T18:21:24Z

Bug, feature request, or proposal:

After upgrading to material 2.0.0-beta5, checkboxes on my login screen no longer have margin on their right.

Apparently due to this change:
#2121

and to the fact I use dynamic labels (translated by ngx-translate to be precise).

I use something like that:
<md-checkbox [(ngModel)]="savePassword">{{ "tx_Login_SavePassword" | translate }}

What is the expected behavior?

To have margin (space between the checkbox and its label) on the right of the checkbox (no mat-checkbox-inner-container-no-side-margin class)

What is the current behavior?

The class mat-checkbox-inner-container-no-side-margin is added to the checkbox when rendering the form. it only disappears when one clicks on the checkbox.

What are the steps to reproduce?

Here is the Plunker reproducing the problem (without ngx-translate but using a simple settimeout instead):

https://plnkr.co/5CFp9x

What is the use-case or motivation for changing an existing behavior?

Working as it was in previous 2.0.0-beta

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 2.0.0-beta5

Is there anything else we should know?

Don't think so but please ask if I forgot something

With angular#2121 the margin will be removed for checkboxes that don't have any label set. A problem is that the Checkbox uses the OnPush change detection strategy and therefore the checkbox is not able to detect any delayed / async label change. This means that checkboxes that set their label from an async binding will not have any margin until the users clicks on the checkbox. Using the `cdkObserveContent` seems to be an elegant approach when using the OnPush strategy. The `:empty` CSS selector would be more elegant but it's very sensitive about whitespaces and therefore it doesn't work properly. Fixes angular#4720

* fix(checkbox): margin for empty checkboxes incorrectly added With #2121 the margin will be removed for checkboxes that don't have any label set. A problem is that the Checkbox uses the OnPush change detection strategy and therefore the checkbox is not able to detect any delayed / async label change. This means that checkboxes that set their label from an async binding will not have any margin until the users clicks on the checkbox. Using the `cdkObserveContent` seems to be an elegant approach when using the OnPush strategy. The `:empty` CSS selector would be more elegant but it's very sensitive about whitespaces and therefore it doesn't work properly. Fixes #4720 * Updates

kgrvr · 2018-02-28T06:30:48Z

Same issue here too.
Material adds following class when using translate pipe:
.mat-checkbox-inner-container-no-side-margin { margin-left: 0; margin-right: 0; }
Any fix for this, apart from overriding this class?

andreasrueedlinger · 2018-06-26T12:44:51Z

@andrewseguin I don't think the issue is completely fixed.
I have the same issue using my own custom component with nested markup and a translate pipe. Here is stackblitz to reproduce the issue:
https://angular-material2-issue-r22sfw.stackblitz.io

Somehow the markForChecked is not called and thus the class is first removed after interacting with the UI in some other way.

eppdot · 2018-09-04T09:15:09Z

Same issue here, any proposed workarounds?

andreasrueedlinger · 2018-09-04T09:17:58Z

@andrewseguin @devversion Could you please re-open the issue as the problem still exists?

devversion · 2018-09-04T09:18:58Z

@andreasrueedlinger Thanks for the ping. I will have a look later this day and re-open if I can reproduce it.

eppdot · 2018-09-04T09:21:12Z

Sorry forgot to append my sample:

<section class="mat-form-field">
  <mat-checkbox [(ngModel)]="devMode">
    {{'APP.SETTINGS.DEVMODE' | translate }}
  </mat-checkbox>
</section>

Seems that the issue is the translate pipe.

andreasrueedlinger · 2018-09-04T09:34:26Z

@devversion I created a new working stackblitz here: https://angular-material2-issue-z8w4ml.stackblitz.io

Usually if the label of the checkbox or slide-toggle is empty, we remove the margin between label container and thumb/check because otherwise there would be too much spacing. Currently if developers use a component inside of the checkbox or slide-toggle in order to render the label, the margin is accidentally removed and the label looks misplaced. This is because the `cdkObserveContent` event runs outside of the `NgZone` and no change detection round _checks_ the checkbox or slide-toggle. Fixes angular#4720

Usually if the label of the checkbox or slide-toggle is empty, we remove the margin between label container and thumb/check because otherwise there would be too much spacing. Currently if developers use a component inside of the checkbox or slide-toggle in order to render the label, the margin is accidentally removed and the label looks misplaced. This is because the `cdkObserveContent` event runs outside of the `NgZone` and no change detection round _checks_ the checkbox or slide-toggle. Fixes #4720

* fix(checkbox, slide-toggle): no margin if content is projected Usually if the label of the checkbox or slide-toggle is empty, we remove the margin between label container and thumb/check because otherwise there would be too much spacing. Currently if developers use a component inside of the checkbox or slide-toggle in order to render the label, the margin is accidentally removed and the label looks misplaced. This is because the `cdkObserveContent` event runs outside of the `NgZone` and no change detection round _checks_ the checkbox or slide-toggle. Fixes #4720 * Add tests

matze1234 · 2019-06-11T10:18:08Z

This seems to be still an issue in @angular/material 7.3.6.
I've worked around it by appending an nbsp to the dynamic label.

angular-automatic-lock-bot · 2019-09-10T23:02:23Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

devversion self-assigned this May 22, 2017

devversion added the has pr label May 22, 2017

devversion mentioned this issue May 22, 2017

fix(checkbox): margin for empty checkboxes incorrectly added #4730

Merged

andrewseguin closed this as completed in #4730 Jun 8, 2017

devversion mentioned this issue Sep 4, 2018

fix(checkbox, slide-toggle): no margin if content is projected #12973

Merged

devversion reopened this Sep 4, 2018

mmalerba closed this as completed in #12973 Sep 18, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Md-Checkbox has no margin when using dynamic label after #2121 #4720

Md-Checkbox has no margin when using dynamic label after #2121 #4720

w3t commented May 22, 2017 •

edited

Loading

kgrvr commented Feb 28, 2018

andreasrueedlinger commented Jun 26, 2018

eppdot commented Sep 4, 2018

andreasrueedlinger commented Sep 4, 2018

devversion commented Sep 4, 2018

eppdot commented Sep 4, 2018

andreasrueedlinger commented Sep 4, 2018

matze1234 commented Jun 11, 2019 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 10, 2019

Md-Checkbox has no margin when using dynamic label after #2121 #4720

Md-Checkbox has no margin when using dynamic label after #2121 #4720

Comments

w3t commented May 22, 2017 • edited Loading

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

kgrvr commented Feb 28, 2018

andreasrueedlinger commented Jun 26, 2018

eppdot commented Sep 4, 2018

andreasrueedlinger commented Sep 4, 2018

devversion commented Sep 4, 2018

eppdot commented Sep 4, 2018

andreasrueedlinger commented Sep 4, 2018

matze1234 commented Jun 11, 2019 • edited Loading

angular-automatic-lock-bot bot commented Sep 10, 2019

w3t commented May 22, 2017 •

edited

Loading

matze1234 commented Jun 11, 2019 •

edited

Loading