topic Developer edit - editor widget (remove parts of imported widget) in ArcGIS Experience Builder Questions

topic Developer edit - editor widget (remove parts of imported widget) in ArcGIS Experience Builder Questions https://community.esri.com/t5/arcgis-experience-builder-questions/developer-edit-editor-widget-remove-parts-of/m-p/1297036#M7174 <P>Hi, I can't get my head around this, and I think it's simple enough, if you know how to.</P><P>I need the top part to be removed from the Editor widget:</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_0-1686219288196.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72631iC681FE3F5B5EC037/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_0-1686219288196.png" alt="KennethLindhardt1_0-1686219288196.png" /></span></P><P>I got my experience builder dev edition installed.</P><P>I have my custom Editor widget</P><P>and I have an idea that I could go in an remove the class part of the editor widget, that I'm loading in. Actually I could just call the hight 0 px, but I can't figure out which names I need to call and how to set it up</P><P> </P><LI-CODE lang="javascript">const css = ` .esri-editor__scroller { overflow-y: auto; padding-top: 200px; padding-bottom: $cap-spacing; } .esri-editor__content-group { max-height: 1em; } .esri-editor__panel-toolbar { --divider-border: 0px solid var(--calcite-ui-border-2); background-color: Blue; border-bottom: var(--divider-border); display: flex; max-height: 0em; flex-direction: row; } .header { border-block-end-width: 1px; border-block-end-style: solid; position: sticky; inset-block-start: 0px; z-index: 400; inline-size: 0px; align-items: stretch; background-color: Red; justify-content: flex-start; background-color: var(--calcite-ui-foreground-1); border-block-end-color: var(--calcite-ui-border-3); flex: 0 0 auto; max-height: 1em; ` if ( this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds[0] ) { mvc = ( <JimuMapViewComponent useMapWidgetId={this.props.useMapWidgetIds?.[0]} onActiveViewChange={this.activeViewChangeHandler} /> ); } // <div // className="header" //style={{ height: "0px", overflow: "auto", objectPosition: "500px"}} //></div> return ( <div className="widget-js-api-editor" style={{ height: "auto",objectPosition: "200px"}} > <div ref={this.myRef}> <style> {css} </style> </div> {mvc} </div> ); } }</LI-CODE><P> </P><P> </P><P>For example I can call the CSS of the <SPAN>.esri-editor__panel-toolbar and edit the styling, but to kill that box, I'm lost.</SPAN></P><P><SPAN>How do I remove those part within my custom widget?</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_1-1686220027196.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72632iBA33611383038117/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_1-1686220027196.png" alt="KennethLindhardt1_1-1686220027196.png" /></span></P><P> </P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_2-1686220033307.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72633i9B1E609D1327E9D2/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_2-1686220033307.png" alt="KennethLindhardt1_2-1686220033307.png" /></span><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_3-1686220038157.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72634iE10A147490FEB4BA/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_3-1686220038157.png" alt="KennethLindhardt1_3-1686220038157.png" /></span></P><P> </P><P> </P> Thu, 08 Jun 2023 10:28:16 GMT KennethLindhardt1 2023-06-08T10:28:16Z Developer edit - editor widget (remove parts of imported widget) https://community.esri.com/t5/arcgis-experience-builder-questions/developer-edit-editor-widget-remove-parts-of/m-p/1297036#M7174 <P>Hi, I can't get my head around this, and I think it's simple enough, if you know how to.</P><P>I need the top part to be removed from the Editor widget:</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_0-1686219288196.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72631iC681FE3F5B5EC037/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_0-1686219288196.png" alt="KennethLindhardt1_0-1686219288196.png" /></span></P><P>I got my experience builder dev edition installed.</P><P>I have my custom Editor widget</P><P>and I have an idea that I could go in an remove the class part of the editor widget, that I'm loading in. Actually I could just call the hight 0 px, but I can't figure out which names I need to call and how to set it up</P><P> </P><LI-CODE lang="javascript">const css = ` .esri-editor__scroller { overflow-y: auto; padding-top: 200px; padding-bottom: $cap-spacing; } .esri-editor__content-group { max-height: 1em; } .esri-editor__panel-toolbar { --divider-border: 0px solid var(--calcite-ui-border-2); background-color: Blue; border-bottom: var(--divider-border); display: flex; max-height: 0em; flex-direction: row; } .header { border-block-end-width: 1px; border-block-end-style: solid; position: sticky; inset-block-start: 0px; z-index: 400; inline-size: 0px; align-items: stretch; background-color: Red; justify-content: flex-start; background-color: var(--calcite-ui-foreground-1); border-block-end-color: var(--calcite-ui-border-3); flex: 0 0 auto; max-height: 1em; ` if ( this.props.hasOwnProperty("useMapWidgetIds") && this.props.useMapWidgetIds && this.props.useMapWidgetIds[0] ) { mvc = ( <JimuMapViewComponent useMapWidgetId={this.props.useMapWidgetIds?.[0]} onActiveViewChange={this.activeViewChangeHandler} /> ); } // <div // className="header" //style={{ height: "0px", overflow: "auto", objectPosition: "500px"}} //></div> return ( <div className="widget-js-api-editor" style={{ height: "auto",objectPosition: "200px"}} > <div ref={this.myRef}> <style> {css} </style> </div> {mvc} </div> ); } }</LI-CODE><P> </P><P> </P><P>For example I can call the CSS of the <SPAN>.esri-editor__panel-toolbar and edit the styling, but to kill that box, I'm lost.</SPAN></P><P><SPAN>How do I remove those part within my custom widget?</SPAN></P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_1-1686220027196.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72632iBA33611383038117/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_1-1686220027196.png" alt="KennethLindhardt1_1-1686220027196.png" /></span></P><P> </P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_2-1686220033307.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72633i9B1E609D1327E9D2/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_2-1686220033307.png" alt="KennethLindhardt1_2-1686220033307.png" /></span><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="KennethLindhardt1_3-1686220038157.png" style="width: 400px;"><img src="https://community.esri.com/t5/image/serverpage/image-id/72634iE10A147490FEB4BA/image-size/medium?v=v2&px=400" role="button" title="KennethLindhardt1_3-1686220038157.png" alt="KennethLindhardt1_3-1686220038157.png" /></span></P><P> </P><P> </P> Thu, 08 Jun 2023 10:28:16 GMT https://community.esri.com/t5/arcgis-experience-builder-questions/developer-edit-editor-widget-remove-parts-of/m-p/1297036#M7174 KennethLindhardt1 2023-06-08T10:28:16Z