Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
w3t opened this issue May 22, 2017 · 9 comments · Fixed by #4730 or #12973
Closed

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

w3t opened this issue May 22, 2017 · 9 comments · Fixed by #4730 or #12973
Assignees
@devversion

Comments

@w3t
Copy link

w3t commented May 22, 2017 •
edited
Loading

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
@devversion devversion self-assigned this May 22, 2017
devversion added a commit to devversion/material2 that referenced this issue May 22, 2017
@devversion
fix(checkbox): margin for empty checkboxes incorrectly added
b1c66cc 
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
@devversion devversion mentioned this issue May 22, 2017
Merged
devversion added a commit to devversion/material2 that referenced this issue May 23, 2017
@devversion
fix(checkbox): margin for empty checkboxes incorrectly added
d3f954f 
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
devversion added a commit to devversion/material2 that referenced this issue May 31, 2017
@devversion
fix(checkbox): margin for empty checkboxes incorrectly added
4f54eab 
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
andrewseguin pushed a commit that referenced this issue Jun 8, 2017
@devversion @andrewseguin
fix(checkbox): margin for empty checkboxes incorrectly added (#4730)
8d9bbbf 
* 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
Copy link

kgrvr commented Feb 28, 2018

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
Copy link

@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.

@kaelumania
Copy link

Same issue here, any proposed workarounds?

@andreasrueedlinger
Copy link

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

@devversion
Copy link
Member

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

@kaelumania
Copy link

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
Copy link

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

devversion added a commit to devversion/material2 that referenced this issue Sep 4, 2018
@devversion
fix(checkbox, slide-toggle): no margin if content is projected
115c005 
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
@devversion devversion mentioned this issue Sep 4, 2018
Merged
@devversion devversion reopened this Sep 4, 2018
jelbourn pushed a commit that referenced this issue Sep 6, 2018
@devversion @jelbourn
fix(checkbox, slide-toggle): no margin if content is projected
0b3d385 
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
mmalerba pushed a commit that referenced this issue Sep 18, 2018
@devversion @mmalerba
fix(checkbox, slide-toggle): no margin if content is projected (#12973)
4636a98 
* 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
Copy link

matze1234 commented Jun 11, 2019 •
edited
Loading

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
None yet
Projects
None yet
Milestone
No milestone
6 participants
@w3t @kaelumania @devversion @andreasrueedlinger @kgrvr @matze1234