Select to view content in your preferred language

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

06-08-2023 03:27 AM
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:


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 &&
    ) {
      mvc = (

 //   <div
   // className="header"
    //style={{ height: "0px", overflow: "auto", objectPosition: "500px"}}

    return (
        style={{ height: "auto",objectPosition: "200px"}}

        <div ref={this.myRef}>



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?






0 Kudos
0 Replies