Bug: Range Picker exceeds Field's width
Closed this issue · 1 comments
Current behavior
We've encountered a layout issue while implementing an inline form that includes a RangePicker. This is an example:
The current RangePicker component exceeds the default field width of 292px. Initially, the design, created by Axel, was significantly larger at 523px. As a temporary measure, I've scaled it down to 350px, as the time selectors have not been incorporated yet.
Additionally, when integrating a RangePicker input into a columnar form, the component does not align correctly with other inputs and may unnecessarily expand their width.
Proposition
I suggest one of the following ideas :
- Update field's width for the RangePicker component.
- Condense the RangePicker component to fit a 292px width
The second option is a better choice for a consistent and well-designed look. Here's a visual example of the second option, I chose two locales, one with extensive space requirements.
This option might not be viable for several reasons:
- Some locale might require extra space.
- Adding time selector to the actual components will require extra space.
To be discussed
- Accessibility concerns?
- Allow > 292px Field inputs?
- Handling complex inputs with only a 292px-width input?
- condensed range picker prop?
What do you think?