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 &&
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?