topic Can "input-date-picker" component's width style be narrower? in Calcite Design System Questions

Can "input-date-picker" component's width style be narrower?

baohuachu2 — Fri, 02 Sep 2022 04:33:32 GMT

This component is in "calcite-panel" and its scale attribute is set "s" . While it is still not narrow as expected. As the code pen. It works fine in arcgis online web viewer as the screenshot below. This panel is in the "map settings" button clicked. The map contains a feature service with time-slider in my local server.

Re: Can "input-date-picker" component's width style be narrower?

KittyHurley — Fri, 02 Sep 2022 15:27:28 GMT

Hello @baohuachu2. The input-date-picker "scale" attribute modifies the component's sizing, such as its height and text, but not its width.

In this case for consistent styling you could add CSS to the panel's contents, or directly to the input-date-picker component, such as:

Re: Can "input-date-picker" component's width style be narrower?

baohuachu2 — Tue, 06 Sep 2022 07:31:23 GMT

Hi Kitty-Hurley:

The width of the input is decided by "font-size" which is defined in calcite.css file.

I tried to add css to stylize its font-size but not take effect as the codes in code pen..

Re: Can "input-date-picker" component's width style be narrower?

KittyHurley — Tue, 06 Sep 2022 14:59:20 GMT

The font-size is part of the web component's shadow DOM, so styles can't be modified so they have consistency when working with components across the design system.

Does the following Codepen modifying the component's width with CSS achieve the anticipated narrow width?

Re: Can "input-date-picker" component's width style be narrower?

baohuachu2 — Tue, 13 Sep 2022 03:04:06 GMT

Hi @KittyHurley :

The "MM/DD/YYYY" placement in the component is not displayed completely as the screenshot below.

Re: Can "input-date-picker" component's width style be narrower?

KittyHurley — Tue, 13 Sep 2022 14:09:12 GMT

Updated the Codepen to include a specified width using pixels to ensure the full placeholder text is visible.

Another option, if it fits the use case, could be to set the layout attribute to "vertical".

<calcite-input-date-picker layout="vertical" range scale="s" overlay-positioning="fixed"></calcite-input-date-picker>

Upon setting the input's stack on top of one another, like so:

Re: Can "input-date-picker" component's width style be narrower?

BenElan — Wed, 14 Sep 2022 20:39:24 GMT

You just want to set the width of the Input Date Picker right? You can do that with CSS:

<calcite-input-date-picker range style="width:260px" scale="s" overlay-positioning="fixed"> </calcite-input-date-picker>

Or am I misunderstanding the question?

Re: Can "input-date-picker" component's width style be narrower?

BenElan — Wed, 14 Sep 2022 20:32:13 GMT

Or are you saying that the Panel isn't big enough to fit the Input Date Picker range without cutting off the text? You can make the Shell Panel wider using the width-scale attribute:

<calcite-shell-panel width-scale="l" slot="primary-panel" position="start" detached>

Here is a codepen:

https://codepen.io/benesri/pen/XWqNGpJ?editors=1000

Re: Can "input-date-picker" component's width style be narrower?

baohuachu2 — Thu, 15 Sep 2022 06:29:25 GMT

Hi @BenElan and @KittyHurley

Thank you for your solutions. I will try to increase the panel width.