calcite panel with Search widget, height does not update

[LeidavanHees]

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>

        <div id="search-container"></div>

      </calcite-panel>

Widget:

      const search= new Search({

        view,

        container: "search-container"

      });

Any help would be much appreciated!

Leida.

[Noah-Sager]

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".

[LeidavanHees]

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

[AnnaWilliams]

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?

[LeidavanHees · Accepted solution]

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!

[AnnaWilliams]

Thank you!  That is working for me too. 😀

[LeidavanHees]

Great! 🙂

[AnnaWilliams]

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.