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/

Finde mehr Beiträge mit dem Tag

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>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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