topic Re: calcite panel with Search widget, height does not update in ArcGIS JavaScript Maps SDK Questions

calcite panel with Search widget, height does not update

LeidavanHees — Thu, 17 Nov 2022 11:43:00 GMT

Good morning/afternoon/evening,

I’m working on (my first) map app, but am a bit stuck on a few things. I hope one of you would be so kind as to help me out.

I made a calcite panel containing a Search widget that is opened from an action bar in the same way as they do in the tutorial (https://developers.arcgis.com/calcite-design-system/tutorials/create-a-mapping-app/) for bookmarks, print, layerlist, etc.

It looks a bit strange though. The search widget is less wide than the panel. But more importantly, there is no space for suggestions below it (see screenshot “Search short panel 1”). So when you type a street name, you do not see any suggestions unless you scroll (see screenshot “Search short panel 2”).

Is there a way to make it update the height automatically or to just make it bigger? Or should I just not try to put this widget in a panel?

I’ve tried setting a min-height for the search-container, but that makes it behave weirder (see screeny “min-height set”).

It looks like this.

Action bar:

<calcite-action data-action-id="search" icon="search" text="Zoeken" ></calcite-action>

Panel:

<calcite-panel heading="Zoeken" height-scale="l" data-panel-id="search" hidden>

</calcite-panel>

Widget:

const search= new Search({

view,

container: "search-container"

});

Any help would be much appreciated!

Leida.

Re: calcite panel with Search widget, height does not update

Noah-Sager — Thu, 17 Nov 2022 20:33:46 GMT

Hi @LeidavanHees, thanks for posting you question here.

This should be possible if you update the position of the Search container. Try setting the position to "absolute" or "relative".

Re: calcite panel with Search widget, height does not update

LeidavanHees — Mon, 28 Nov 2022 15:16:49 GMT

Hi Noah,

Thank you very much for your response. I've been playing around with it a bit, but have not been able to make it work for me. Setting the position to "relative" didn't change anything, setting it to "absolute" made the panel with the search-widget disappear (only the header remained).

I thought I could maybe fix that by putting another container around the Search container. This only kind of works if I set the height to a certain size like 300px:

#search-container {
position:absolute;
inline-size: 100%;
}

#search-container2 {
min-height:300px;
}

But the result is not very pretty and the panel doesn't expand if the suggestions are longer than that... I tried making the height update based on it's contents, but no luck so far. Do you have any idea how I could do that?

I also tried setting the Search container position to 'fixed'. That simply shows the search-widget below the panel-header. Which would look alright if it's width would be the same size as the panel-header, which it is not. Is there maybe a way to update the width instead?

Thank you!

Leida

Re: calcite panel with Search widget, height does not update

AnnaWilliams — Tue, 29 Aug 2023 11:18:36 GMT

Hello,

I know this is an old post, landed here looking for a solution to the same issue. I made some minor CSS adjustments https://codepen.io/msamwill/pen/wvRGvzg and the width looks better. I still have not solved the issue of the panel height dynamically adjusting based on the height of the search widget. Did you ever solve it?

Re: calcite panel with Search widget, height does not update

LeidavanHees — Tue, 29 Aug 2023 13:52:46 GMT

Hi Anna,

I didn't find a perfect solution, but did eventually end up with something I'm okay with:

I don't have much time to dive into it today. But I think this is the relevant code:

#search-container { position: fixed; } .esri-search { inline-size: var(--calcite-shell-panel-width)!important; max-inline-size: var(--calcite-shell-panel-max-width)!important; min-inline-size: var(--calcite-shell-panel-min-width)!important; transition: max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)!important; border-radius: 0px 0px 5px 5px !important; --calcite-ui-brand: none !important; } .esri-search__suggestions-menu { border-radius: 0px 0px 3px 3px !important; } .esri-search--show-suggestions .esri-search__suggestions-menu, .esri-search--sources .esri-search__sources-menu { border-top: solid 1px rgba(200,200,200) !important; margin: 0 0 0 0 !important; }

Probably not all of it is relevant for you, like the colors and --calcite-ui-brand stuff. But I didn't have the time to sort it out today.

And not everything may even be needed to get it to work (I stopped fiddeling with it as soon as it worked).

Do let me know if it doesn't work. Maybe I didn't copy all the relevant bits. Good luck!

Re: calcite panel with Search widget, height does not update

AnnaWilliams — Tue, 29 Aug 2023 16:00:25 GMT

Thank you! That is working for me too. 😀

Re: calcite panel with Search widget, height does not update

LeidavanHees — Wed, 30 Aug 2023 07:59:38 GMT

Great! 🙂

Re: calcite panel with Search widget, height does not update

AnnaWilliams — Wed, 30 Aug 2023 13:18:38 GMT

Did you add any JavaScript to handle view resizing? If I change my panel size in JavaScript shellPanel.widthScale = "l" the width of the search widget does not adjust.