lost my header

tiwariC — Thu, 21 Sep 2023 11:53:50 GMT

Dear Colleagues, I am very new to JavaScript and cannot make a header on this map I have designed with help from sdk, any assistance here would be appreciated.

<html lang="en">
<head>

<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Pie charts | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>

#filter {
background-color: white;
width: 400px;
}
.btns {
float: right;
padding-top: 5px;
}
#error {
color: red;
display: none;
}

#heading {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #f0f0f0;
}

.header {
text-align: left;
background: #cca1a2;
color: rgb(255, 255, 255, 0.9);
height: 44px;
display: flex;
align-items: center;
font-weight: bolder;
font-size: 24pt;
}

.header img {
height: 40px;
margin: 0 8px 0 8px;
}
</style>

const legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");

view.ui.add(
new Expand({
content: document.getElementById("filter"),
view: view,
expandIcon: "sliders-horizontal",
expandTooltip: "Filter"
}),
"top-right"
);

const filterBy = document.getElementById("filterBy");
const operator = document.getElementById("operator");
const filterPct = document.getElementById("filterPct");

document.getElementById("resetBtn").addEventListener("click", () => {
document.getElementById("error").style.display = "none";
layer.featureEffect = null;
filterPct.value = null;
});
});
</script>

</head>
<body>
<div id="viewDiv"></div>
<calcite-card id="filter">
<h3>FILTER BY:</h3>
<calcite-segmented-control id="filterBy">
<calcite-segmented-control-item value="Provision_of_NFIs" checked>Provision of NFI </calcite-segmented-control-item>
<calcite-segmented-control-item value="Provision_of_Winter_Clothes">Provision of Winter Clothes</calcite-segmented-control-item>
<calcite-segmented-control-item value="Support_winter_energy_needs">Support Winter Energy Needs</calcite-segmented-control-item>
</calcite-segmented-control>
<span>
<calcite-select id="operator" style="width: 50%; float: left">
<calcite-option value=">" selected>Greater than</calcite-option>
<calcite-option value="<">Less than</calcite-option>
</calcite-select>
<calcite-input id="filterPct" type="number" min="0" max="100" suffix-text="%"></calcite-input>
</span>
<span id="error">All fields must have value in order to filter.</span>
<span class="btns">
<calcite-button id="resetBtn" appearance="outline">Reset</calcite-button>
<calcite-button id="filterBtn">Filter</calcite-button>
</span>
</calcite-card>
</body>
</html>

Re: lost my header

vmvargas — Thu, 21 Sep 2023 15:57:15 GMT

I hope it is helpful

codepen.io

Re: lost my header

tiwariC — Fri, 22 Sep 2023 07:50:11 GMT

I don't what the difference was, but I stubbed in my code into your template and it worked like charm. Thank you!

Re: lost my header

Justin_Greco — Sat, 23 Sep 2023 15:40:25 GMT

Since you are using the Calcite Design System, I would recommend wrapping everything in a calcite-shell and then use the header slot.

<calcite-shell> <h2 slot="header">Title</h2> </calcite-shell>

Also there is now the calcite-navigation component, which is one of the new components. You can use the header slot on it too:

<calcite-shell> <calcite-navigation slot="header"> <calcite-navigation-logo slot="logo" heading="My App Title"> </calcite-navigation-logo> </calcite-navigation> </calcite-shell>

Also just a note on including code in your posts on the Community, you can use the </> button and paste your code in. Much easier to read that way.

topic Re: lost my header in ArcGIS JavaScript Maps SDK Questions

lost my header

Re: lost my header

Re: lost my header

Re: lost my header