Placeholder: Add a box-sizing border-box to input fields #42294
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 tasks
|
Size Change: +44 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
mirka
reviewed
Jul 14, 2022
There was a problem hiding this comment.
Oof, this is a pretty unpleasant problem we have here 😅 I'm surprised it never came up before. Thanks for taking the initiative to fix.
I think we're going to need to address these box-sizing issues in a somewhat systematic way, so I posted #42415 to summarize the problem and propose an approach to solve it across components.
I think a good place to start with this PR is to @include the reset mixin at the top level of .components-placeholder. What do you think?
Pinging @ciampo for thoughts on the #42415 approach as well.
I agree with you. But It might be better to discuss how to handle |
⭐ Update
|
|
I'll close this PR since #42889 has been merged. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of #41961.
What?
This PR applies
box-sizing: border-boxto input elements (TextControl,TextareaControl) placed onPlaceholdercomponent.Why?
In the post editor,
box-sizing: border-boxis applied to the input elements becauseform.cssis loaded (Perhaps this is not the expected style.).In the site editor, the input elements overflows because
form.cssis not loaded.How?
I think
box-sizing: border-boxshould be applied to the input element just as Button component has.However, I limited it to elements within
Placeholdercomponent only to minimize the scope of influence.For now, this response will only improve the table block placeholder layout.