I have a somewhat mobile responsive header, but there are some dropdown menus that I would like to keep flush to the edge of the header element regardless of changes in viewport size as the header adjusts.
I tried putting those dropdowns in their own element such as a div or section and adding all the same css from the individual selectors, but I did not make progress there.
// The Dropdown for New-units
const newUnitDropdown = document.querySelector(".new_units");
newUnitDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<i class="fas fa-circle"></i>
<span>New Units</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
`;
// The Dropdown for Overlay
const overlayDropdown = document.querySelector(".overlay");
overlayDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Select Overlay</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
`;
// The Dropdown for Cities
const cityDropdown = document.querySelector(".cities");
cityDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a city</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href='#' data-value="oak" class='oak dropdown-item'>
Oakland, CA
</a>
<a href='#' data-value="san" class='san dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
`;
const dropdown = document.querySelector(".dropdown");
document.querySelector(".dropdown-trigger").addEventListener("click", (e) => {
dropdown.classList.toggle("is-active");
});
document.addEventListener(
"click",
(event) => {
// event.preventDefault();
if (event !== null && event.target instanceof HTMLElement) {
const element = event.target;
if (element.matches(".dropdown-item.oak")) {
console.log("Oakland was clicked");
customMap.addOakland();
data.forEach((label) => customMap.addCircleMarker(label));
console.log("inside the if conditional", data);
dropdown.classList.toggle("active");
}
if (element.matches(".dropdown-item.san")) {
console.log("San Francisco was clicked");
customMap.addSanFran();
data.forEach((label) => customMap.addCircleMarker(label));
dropdown.classList.toggle("active");
}
}
},
false
);
// Checkbox Menu
const checkboxMenu = document.querySelector(".checkbox");
checkboxMenu.innerHTML = `
<nav class="panel">
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" id="myInput" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<ul id="myUL">
<li><a class="panel-block is-active">
<input type="checkbox" id="density" name="density" value="density">
Density
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="holc" name="" value="holc">
HOLC
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="tcac" name="" value="tcac">
TCAC
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="population" name="" value="population">
Population
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="zoning" name="" value="zoning">
Zoning
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
</ul>
</nav>
`;
const fetchLabel = () => {
let input, filter, ul, li, a, i, textValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
textValue = a.textContent || a.innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
};
const input = document.querySelector("input");
input.addEventListener("input", (event) => {
fetchLabel();
});.checkbox {
position: absolute;
z-index: 2;
top: 200px;
left: 200px;
}
.cales {
width: 250px;
}
.cities {
position: absolute;
z-index: 2;
top: 95px;
left: 350px;
border: 1px solid black;
}
.container {
display: flex;
}
.fas.fa-circle {
color: #fe0302;
padding: 2px;
}
.hero {
background-color: #e5e7e9;
}
.hero-body {
padding: 12px;
}
/* style the map box */
#map {
width: 100%;
height: 500px;
overflow: auto !important;
position: relative;
/* z-index: -2; */
}
.navbar-item {
font-weight: bold;
}
.new_units {
position: absolute;
z-index: 2;
top: 95px;
/* left: 100px; */
display: flex;
border: 1px solid black;
}
.overlay {
position: absolute;
z-index: 2;
top: 95px;
left: 180px;
border: 1px solid black;
}
.panel {
background-color: white;
border: 1px solid black;
}
.title {
font-size: 4rem;
}
.title:not(:last-child) {
margin-bottom: 0;
margin-right: 1.5rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css"
/>
<link rel="stylesheet" href="src/custom.css">
<title>CALES Maps POC</title>
</head>
<body>
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">
CALES
</h1>
<span class="cales">Comprehensive Assessment of Land Use Entitlements</span>
<div class="navbar-brand">
<span class="navbar-burger" data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Map & Data
</a>
<a class="navbar-item">
Rankings
</a>
<a class="navbar-item">
Topics
</a>
<a class="navbar-item">
Cities
</a>
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Updates
</a>
</div>
</div>
</div>
</nav>
</div>
</section>
<div id="map" style="height: 100vh;"></div>
<div class="new_units"></div>
<div class="overlay"></div>
<div class="checkbox"></div>
<div class="cities"></div>
<script type="text/javascript" src="./src/index.ts"></script>
</body>
</html>S Fiddle does not do it justice though. I would copy it over to a code editor and use a browser. I have had a friend tweak it in JS Fiddle where using display: inline-block fixes it...in JS Fiddle, not in the browser.
This is what it looks like in iPad Pro:
So again I am trying to get that dropdown to be flush to the gray navbar regardless of iPad Pro view or thereabouts. I am only worried about the iPad Pro view mostly for now.
Would love for that logo not to break like that when resized. This is all from Bulma CSS.
