Fixed interactivity issue

JacobWeinbren · Jan 26, 2024 · 51c907f · 51c907f
1 parent 2bbc82c
commit 51c907f
Showing 1 changed file with 7 additions and 11 deletions.
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -25,7 +25,7 @@ const optionsHtml = knessetYears
 	})
 	.join("");
 
-const dropdownHtml = `<label for="json-selector" class="sr-only">Select Knesset Election</label><select id="json-selector" class="p-2" onchange="window.loadNewData()">${optionsHtml}</select>`;
+const dropdownHtml = `<label for="json-selector" class="sr-only">Select Knesset Election</label><select id="json-selector" class="p-2 fixed bottom-[calc(4rem+350px)] left-1/2 transform -translate-x-1/2 z-10" onchange="window.loadNewData()">${optionsHtml}</select>`;
 ---
 
 <html>
@@ -51,16 +51,12 @@ const dropdownHtml = `<label for="json-selector" class="sr-only">Select Knesset
 	</head>
 	<body>
 		<div id="geocoder" class="geocoder fixed top-4 left-4 z-10"></div>
-		<div
-			id="chart-container"
-			class="fixed bottom-16 left-0 w-full max-h-[350px] z-10 flex justify-center items-center flex-col"
-		>
-			<div id="dropdown-container" class="mb-4">
-				<Fragment set:html={dropdownHtml} />
-			</div>
-			<canvas id="chart" class="bg-white rounded border shadow p-4"
-			></canvas>
-		</div>
+
+		<Fragment set:html={dropdownHtml} />
+		<canvas
+			id="chart"
+			class="bg-white max-h-[350px] max-w-[500px] rounded border shadow p-4 z-10 fixed bottom-10 left-1/2 transform -translate-x-1/2"
+		></canvas>
 
 		<script>
 			declare global {