Updates input width in _chips.scss sass component #513
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
This is a minor commit which updates the width of input field from fixed 121px to 'fit-content' type, overwritten wherever the browser is able to render this property. Also, the optional min-width and max-width are set to limit its size between a reasnable limit of 100px and 200px. With this change, the input placeholder (if limited to under 200px) will not get cropped, and it will also have a better fit into the input field. Signed-off-by: Harshit Gupta <hkg1412@gmail.com>
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.
This is a minor but suitable change which updates the width property of an input field for adding new chips from fixed 120px to fit-content, with same !important weight. Also, the min-width and max-width properties are set to limit its size between 100px and 200px. With this change, the input placeholder (if limited to under 200px) will not get cropped, and it will also have a better fit into the input field, thereby offering it more flexibility to adapt the content.
Note: It was proposed long back into the parent repository Dogfalo#6567, where it went approved but unattended. Today, after a few years, as I had noted that this forked repository from the parent repository is the one under the latest maintenance, I had squashed and cherry-picked my previous changes from Dogfalo#6567 into another branch that was baselined with the v2-dev here, to raise another pull request for this same enhancement.
Proposed changes
This change fixes the issue that I had encountered recently with the placeholder or text of the input before pressing enter to convert it to a chip. Please have a look at how this small change affects the chips input (Screenshot from Google Chrome).
I did not file any bug for it since it was a working feature which gets enhanced with the SASS changes from this Pull Request.
Screenshots (if appropriate) or codepen:
Types of changes
Checklist: