Select to view content in your preferred language

Styling - change size of widget (API 4.x)

1503
1
01-17-2022 12:33 AM
ZA1
by
Occasional Contributor

Hi

I am struggling with adjusting the styling (heights) of widgets. 

 

Example:

(Green box below) In this editor widget I could change the height of the content panel 

(Red box below)  However, none of the CSS classes allow me to change the feature scroll list 

ZA1_0-1642407860020.png

Changing the height on these CSS classes does not change size of red box 

esri-item-list__scroller
esri-item-list esri-widget
esri-item-list__filter-container

Ideally: Is there a way to change size of widget, and the child nodes change accordingly? 

Or if this is not possible, does anyone know how to change the size of the feature list scroll (shown above)

 

Thanks

 

 

0 Kudos
1 Reply
JeffreyWilkerson
Frequent Contributor

Just messing around with the Esri Editor widget sample (Editor sample code ), I added this and could get some size changes.   Somewhere in the CSS is your desired goal.  

<style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      .esri-editor .esri-item-list__scroller {
        max-height: 450px;
      }
      .esri-view-height-small .esri-expand .esri-widget--panel, .esri-view-height-small .esri-expand .esri-widget--panel-height-only, .esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel, .esri-view-height-small .esri-ui-corner .esri-component.esri-widget--panel-height-only {
          max-height: 620px;
          min-height: 500px;
      }
      .esri-ui .esri-editor .esri-item-list__scroller {
          max-height: 390px;
      }
</style>