Skip to content

Single-select Combobox is 2px taller than other form elements #6421

@mitc7862

Description

@mitc7862

Actual Behavior

The Combobox component at medium scale is 34px tall, whereas all other form elements are 32px (at the same scale). This isn't a perceptible difference in vertical form layouts, but it makes alignment impossible for horizontal designs. I think this is a bug since scales seem to be based on multiples of 4.

image
(screenshot from Figma)

The same difference is apparent at small and large scales as well.

Expected Behavior

When the Combobox is set to single-select, its height should be the same as that of all other form elements with the same scale.

Reproduction Sample

https://codepen.io/MitchelCox/pen/GRBzMKa

Reproduction Steps

Place Combobox alongside other form elements
Use flex to position them horizontally
Ensure that the combo box is set to single-select

Reproduction Version

1.0.3

Relevant Info

No response

Regression?

No response

Impact

As described above, this issue affects any application where horizontal alignment is important. This is not a functional bug, so it's not high-impact. However, the single-select Combobox is one of the most-used form elements in Web Analysis and is sometimes shown side-by-side with other inputs.

Esri team

ArcGIS Map Viewer

Metadata

Metadata

Labels

4 - verifiedIssues that have been tested, confirmed as mitigated, and are ready to close.ArcGIS Map ViewerIssues logged by ArcGIS Map Viewer team members.bugBug reports for broken functionality. Issues should include a reproduction of the bug.c-comboboxIssues that pertain to the calcite-combobox and related componentsdesignIssues that need design consultation prior to, or during, development.estimate - 2Small fix or update, may require updates to tests.p - lowIssue is non core or affecting less that 10% of people using the libraryready for devIssues ready for development implementation.

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions