fix(uui-combobox): Remove bottom gap #1164
Merged
Conversation
This file contains hidden or 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
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a visual issue with the uui-combobox component where an unwanted bottom gap was causing alignment problems when using flexbox layouts. The fix changes the display property from inline-block to inline-flex to eliminate the gap.
- Changed display property from
inline-blocktoinline-flexin the combobox host styles
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1164.westeurope.azurestaticapps.net |
iOvergaard
approved these changes
Aug 6, 2025
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.
Description
When inspecting the
uui-comboboxelement, there is some form of whitespace/padding/gap at the bottom of the component.Inspecting the element and shadow DOM, I haven't been able to locate the cause of the gap.
I did find that changing the
displayfrominline-blocktoinline-flexappears to resolve the gap issue.Types of changes
Motivation and context
In Umbraco CMS, there are features that need to flexbox align components next to the combobox, but the additional gapping at the bottom causes them to appear misaligned (by a few pixels).
How to test?
Using the browser's devtools, inspect the combobox element, notice if the bottom gap has gone.