https://community.esri.com/t5/arcgis-experience-builder-questions/itemselector-component-doesn-t-work-properly-if/m-p/1608338#M18593 <P>Hi&nbsp;<a href="https://community.esri.com/t5/user/viewprofilepage/user-id/2839">@KenBuja</a>&nbsp;. Try this: add h-100 to the parent div, add flex-grow-1 to the item selector div, and add flex-shrink-0 to the button div.&nbsp;</P><LI-CODE lang="markup"> &lt;SidePopper position="right" title="Template Layer" isOpen={showSidePopper &amp;&amp; !urlUtils.getAppIdPageIdFromUrl().pageId} toggle={onCloseSidePopper} trigger={sidePopperTrigger?.current} &gt; &lt;div className="d-flex flex-column h-100"&gt; &lt;div className='data-item-search flex-grow-1'&gt; &lt;ItemSelector itemType={SupportedItemTypes.FeatureService} portalUrl={portal.url} mode={ItemSelectorMode.Simple} onSelect={onItemSelect} onRemove={onItemRemove} selectedItems={selectedItems} &gt;&lt;/ItemSelector&gt; &lt;/div&gt; &lt;/div className="d-flex justify-content-center flex-shrink-0"&gt; &lt;Button variant='contained' color='primary' onClick={onDoneClicked} disabled={selectedTemplateItem == null} &gt; Done &lt;/Button&gt; &lt;/div&gt; &lt;/SidePopper&gt;</LI-CODE><P>&nbsp;</P> Wed, 23 Apr 2025 01:41:51 GMT Allen_Zhang 2025-04-23T01:41:51Z https://community.esri.com/t5/arcgis-experience-builder-questions/itemselector-component-doesn-t-work-properly-if/m-p/1608249#M18588 <P>I'm using the <A href="https://developers.arcgis.com/experience-builder/storybook/?path=/docs/components-jimu-ui-basic-item-selector-itemselector--docs" target="_self">ItemSelector</A> in my custom widget (v1.17), but I'm having difficulty getting it to work correctly. I want to have the simple list in a SidePopper along with a button to accept the choice. This code</P><LI-CODE lang="javascript"> &lt;SidePopper position="right" title="Template Layer" isOpen={showSidePopper &amp;&amp; !urlUtils.getAppIdPageIdFromUrl().pageId} toggle={onCloseSidePopper} trigger={sidePopperTrigger?.current} &gt; &lt;div className="d-flex flex-column"&gt; &lt;div className='data-item-search'&gt; &lt;ItemSelector itemType={SupportedItemTypes.FeatureService} portalUrl={portal.url} mode={ItemSelectorMode.Simple} onSelect={onItemSelect} onRemove={onItemRemove} selectedItems={selectedItems} &gt;&lt;/ItemSelector&gt; &lt;/div&gt; &lt;/div className="d-flex justify-content-center"&gt; &lt;Button variant='contained' color='primary' onClick={onDoneClicked} disabled={selectedTemplateItem == null} &gt; Done &lt;/Button&gt; &lt;/div&gt; &lt;/SidePopper&gt;</LI-CODE><P>will give me a list of 18 items. The list doesn't add more items as I scroll down and regardless of what I put in the Search box, I get a maximum of 18 entries.&nbsp;</P><P><div class="lia-vid-container video-embed-center"><div id="lia-vid-6371801029112w180h540r863" class="lia-video-brightcove-player-container"><video-js data-video-id="6371801029112" data-account="6161463677001" data-player="default" data-embed="default" class="vjs-fluid" controls="" data-application-id="" style="width: 100%; height: 100%;"></video-js></div><script src="https://players.brightcove.net/6161463677001/default_default/index.min.js"></script><script>(function() { var wrapper = document.getElementById('lia-vid-6371801029112w180h540r863'); var videoEl = wrapper ? wrapper.querySelector('video-js') : null; if (videoEl) { if (window.videojs) { window.videojs(videoEl).ready(function() { this.on('loadedmetadata', function() { this.el().querySelectorAll('.vjs-load-progress div[data-start]').forEach(function(bar) { bar.setAttribute('role', 'presentation'); bar.setAttribute('aria-hidden', 'true'); }); }); }); } }})();</script><a class="video-embed-link" href="https://community.esri.com/t5/video/gallerypage/video-id/6371801029112">(view in My Videos)</a></div></P><P>I've tried a variety of classNames, but nothing seems to work. Only if I add an explicit height in pixels (percentage doesn't work either) will I get a list that adds more items as I scroll down.&nbsp;</P><LI-CODE lang="javascript"> &lt;div className="data-item-search" style={{ height: '500px' }}&gt; &lt;ItemSelector itemType={SupportedItemTypes.FeatureService} portalUrl={portal.url} mode={ItemSelectorMode.Simple} onSelect={onItemSelect} onRemove={onItemRemove} selectedItems={selectedItems} &gt;&lt;/ItemSelector&gt; &lt;/div&gt;</LI-CODE><P><div class="lia-vid-container video-embed-center"><div id="lia-vid-6371801126112w190h540r405" class="lia-video-brightcove-player-container"><video-js data-video-id="6371801126112" data-account="6161463677001" data-player="default" data-embed="default" class="vjs-fluid" controls="" data-application-id="" style="width: 100%; height: 100%;"></video-js></div><script src="https://players.brightcove.net/6161463677001/default_default/index.min.js"></script><script>(function() { var wrapper = document.getElementById('lia-vid-6371801126112w190h540r405'); var videoEl = wrapper ? wrapper.querySelector('video-js') : null; if (videoEl) { if (window.videojs) { window.videojs(videoEl).ready(function() { this.on('loadedmetadata', function() { this.el().querySelectorAll('.vjs-load-progress div[data-start]').forEach(function(bar) { bar.setAttribute('role', 'presentation'); bar.setAttribute('aria-hidden', 'true'); }); }); }); } }})();</script><a class="video-embed-link" href="https://community.esri.com/t5/video/gallerypage/video-id/6371801126112">(view in My Videos)</a></div></P><P>Obviously, this isn't responsive. What's the proper way to style this component and the button to make it fill the SidePopper?</P> Tue, 22 Apr 2025 19:36:58 GMT https://community.esri.com/t5/arcgis-experience-builder-questions/itemselector-component-doesn-t-work-properly-if/m-p/1608249#M18588 KenBuja 2025-04-22T19:36:58Z https://community.esri.com/t5/arcgis-experience-builder-questions/itemselector-component-doesn-t-work-properly-if/m-p/1608338#M18593 <P>Hi&nbsp;<a href="https://community.esri.com/t5/user/viewprofilepage/user-id/2839">@KenBuja</a>&nbsp;. Try this: add h-100 to the parent div, add flex-grow-1 to the item selector div, and add flex-shrink-0 to the button div.&nbsp;</P><LI-CODE lang="markup"> &lt;SidePopper position="right" title="Template Layer" isOpen={showSidePopper &amp;&amp; !urlUtils.getAppIdPageIdFromUrl().pageId} toggle={onCloseSidePopper} trigger={sidePopperTrigger?.current} &gt; &lt;div className="d-flex flex-column h-100"&gt; &lt;div className='data-item-search flex-grow-1'&gt; &lt;ItemSelector itemType={SupportedItemTypes.FeatureService} portalUrl={portal.url} mode={ItemSelectorMode.Simple} onSelect={onItemSelect} onRemove={onItemRemove} selectedItems={selectedItems} &gt;&lt;/ItemSelector&gt; &lt;/div&gt; &lt;/div className="d-flex justify-content-center flex-shrink-0"&gt; &lt;Button variant='contained' color='primary' onClick={onDoneClicked} disabled={selectedTemplateItem == null} &gt; Done &lt;/Button&gt; &lt;/div&gt; &lt;/SidePopper&gt;</LI-CODE><P>&nbsp;</P> Wed, 23 Apr 2025 01:41:51 GMT https://community.esri.com/t5/arcgis-experience-builder-questions/itemselector-component-doesn-t-work-properly-if/m-p/1608338#M18593 Allen_Zhang 2025-04-23T01:41:51Z https://community.esri.com/t5/arcgis-experience-builder-questions/itemselector-component-doesn-t-work-properly-if/m-p/1608553#M18608 <P>Unfortunately, that didn't work either. The ItemSelector would now add items as I scrolled down, but the div was still too long for the SidePopper.</P><P>However, it was close. This is what finally worked for me</P><LI-CODE lang="javascript"> &lt;SidePopper position="right" title="Template Layer" isOpen={showSidePopper &amp;&amp; !urlUtils.getAppIdPageIdFromUrl().pageId} toggle={onCloseSidePopper} trigger={sidePopperTrigger?.current} &gt; &lt;div className="d-flex flex-column h-100"&gt; &lt;div className="data-item-search flex-grow-1 h-75"&gt; &lt;ItemSelector itemType={SupportedItemTypes.FeatureService} portalUrl={portal.url} mode={ItemSelectorMode.Simple} onSelect={onItemSelect} onRemove={onItemRemove} selectedItems={selectedItems} &gt;&lt;/ItemSelector&gt; &lt;/div&gt; &lt;div className="d-flex justify-content-center mb-2"&gt; &lt;Button variant="contained" color="primary" onClick={onDoneClicked} disabled={selectedTemplateItem == null} &gt; Done &lt;/Button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/SidePopper&gt;</LI-CODE><P>&nbsp;</P> Wed, 23 Apr 2025 16:01:35 GMT https://community.esri.com/t5/arcgis-experience-builder-questions/itemselector-component-doesn-t-work-properly-if/m-p/1608553#M18608 KenBuja 2025-04-23T16:01:35Z