Select to view content in your preferred language

Developer edit - editor widget (remove parts of imported widget)

284
0
06-08-2023 03:27 AM
KennethLindhardt1
Occasional Contributor II

Hi, I can't get my head around this, and I think it's simple enough, if you know how to.

I need the top part to be removed from the Editor widget:

KennethLindhardt1_0-1686219288196.png

I got my experience builder dev edition installed.

I have my custom Editor widget

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

 

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>
    );
  }
}

 

 

For example I can call the CSS of the .esri-editor__panel-toolbar and edit the styling, but to kill that box, I'm lost.

How do I remove those part within my custom widget?

KennethLindhardt1_1-1686220027196.png

 

KennethLindhardt1_2-1686220033307.pngKennethLindhardt1_3-1686220038157.png

 

 

0 Kudos
0 Replies