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; } } }

Is there a way to adjust width of search widget in js api?

MichaelKefahuchi

Well, the question is already in the title.

The search widget is about 280px wide, and I just need to make it about 200px to fit to my tool bar.

Vind meer berichten getagd met

Accepted answers

AntGiles

Michael,

Try using the following css:

.arcgisSearch .searchGroup .searchInput {

width:100px;

}

Regards

Anthony

All comments

Anonymous User

Hi Michael,

Did is defined in the esri.css stylesheet (look inside it for.arcgisSearch .searchGroup .searchInput ). You could override it with your own css.

MichaelKefahuchi

Thank you Richard,

I have already played with that css selectors however without success. Here is jsfiddle if you wish to have a look:

search widget width - JSFiddle

My tries are commented out, so far nothing worked...

AntGiles

Michael,

Try using the following css:

.arcgisSearch .searchGroup .searchInput {

width:100px;

}

Regards

Anthony

MichaelKefahuchi

Richard thank you very much. I just didn't realize that I have to use all three selectors, till I read Anthony's answer. So I am marking Anthony's answer as correct one, but it is just because it was more obvious to me. I wish I could mark both as correct.

Big THANK YOU to both of you.

kenbuja

You can also mark answers as being helpful in addition.

MichaelKefahuchi

thanx for suggestion, I did that...

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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