fix(material/form-field): outline label position #29138
Conversation
adumitrescu-plenty
changed the title
|
@crisbeto Can you have another look? Pretty please 😄 |
|
@crisbeto Just a reminder :) I know you are busy but .. pretty please 😄 |
adumitrescu-plenty
requested review from
crisbeto
and removed request for
a team
crisbeto
added
action: merge
|
@adumitrescu-plenty can you remove the merge commit from the PR? Otherwise I can't merge the PR. |
adumitrescu-plenty
force-pushed
the
fix/form_field/outline_label_when_prefix_not_visible
branch
from
c8c7068
to
2c6befe
Compare
When the form field is inside an overlay with ng-content or inside a side-nav (mat-drawer) the prefix container would not be visible thus the label would overlap with the prefix. In this fix we narrow down possible cases that would require an additional check for the prefix container width.
Add caching for shadow root so it doesn't have to be resolved each time
|
It looks like there's a merge conflict now. |
adumitrescu-plenty
force-pushed
the
fix/form_field/outline_label_when_prefix_not_visible
branch
from
2c6befe
to
5648c0b
Compare
crisbeto
added
target: patch
* fix(material/form-field): fix label position When the form field is inside an overlay with ng-content or inside a side-nav (mat-drawer) the prefix container would not be visible thus the label would overlap with the prefix. In this fix we narrow down possible cases that would require an additional check for the prefix container width. * perf(material/form-field): add caching for shadow root Add caching for shadow root so it doesn't have to be resolved each time (cherry picked from commit 6318f24)
adumitrescu-plenty
deleted the
fix/form_field/outline_label_when_prefix_not_visible
branch
…)" This reverts commit 6318f24.
|
I'm really sorry, but I have roll this back again in #29282. It ended up breaking in a similar way to last time where there was a case when the form field is initially hidden and when it becomes visible, the label is overlapping the prefix. |
|
Can you provide more details so I can have another deep look into it? Thank you |
|
I can't run the app that is failing, but I've seen the screenshot tests of the failure. It's a similar case to last time where a form field with a prefix is placed inside a sidenav that is hidden initially. Once the sidenav is opened, the label is rendered on top of the prefix. A difference compared to last time is that the form field seems to be nested in a bunch of other elements within the sidenav. |
|
I will try to see what can I do to fix it :) I won't give up on this, sorry 😄 |
|
@crisbeto can you provide a structure or something ? stackblitz example or just plain code of that sidenav? I can't seem to make it brake myself. Thank you |
|
I'm not allowed to share any code and it's a pretty complex app so narrowing it down is hard. It's basically a |
* fix(material/form-field): fix label position When the form field is inside an overlay with ng-content or inside a side-nav (mat-drawer) the prefix container would not be visible thus the label would overlap with the prefix. In this fix we narrow down possible cases that would require an additional check for the prefix container width. * perf(material/form-field): add caching for shadow root Add caching for shadow root so it doesn't have to be resolved each time
…)" (angular#29282) This reverts commit 6318f24.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
When the form field is inside an overlay with ng-content or inside a side-nav (mat-drawer) the prefix container would not be visible thus the label would overlap with the prefix. In this fix we narrow down possible cases that would require an additional check for the prefix container width.
Example of overlay: https://stackblitz.com/edit/ipwssz-9pucs5?file=src%2Fexample%2Fcdk-overlay-basic-example.html
Example of side-nav: https://stackblitz.com/edit/ad4b8f-dq4pmf?file=src%2Fexample%2Fsidenav-autosize-example.html