nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Manage input width

LefterisKoumis

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

https://developers.arcgis.com/calcite-design-system/components/input/

タグ付けされた投稿をもっと見る

Components

Accepted answers

BenElan

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

https://developers.arcgis.com/calcite-design-system/components/label/#component-api-properties-layout

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

All comments

BenElan

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

https://developers.arcgis.com/calcite-design-system/components/label/#component-api-properties-layout

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

LefterisKoumis

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

Hi @LefterisKoumis,

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

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.