topic Re: Manage input width in Calcite Design System Questions

Manage input width

LefterisKoumis — Thu, 31 Mar 2022 22:52:05 GMT

Doesn't the calcite-input has a way to control its width?

BenElan — Thu, 31 Mar 2022 23:04:43 GMT

You can use CSS to set the width. Either directly on the input:

<calcite-input style="width:500px"></calcite-input>

or on a parent div

LefterisKoumis — Thu, 31 Mar 2022 23:56:51 GMT

Thank you. The reason I wanted the reduce the size is to have its label and input on the same line. It seems Calcite doesn't support something like:

BenElan — Fri, 01 Apr 2022 01:07:53 GMT

calcite-label has a "layout" property for that:

<calcite-label layout="inline">Enter Tolerance: <calcite-input suffix-text="feet"></calcite-input> </calcite-label>