Below is my index.html for my chrome extension
<!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">
<title>Concert Line-ups</title>
</head>
<body>
<div class="container mt-3" style="width: 4800px;">
<h2>Upcoming Concerts</h2>
<form name="inputform" onsubmit="return false;">
<table>
<tr>
<td><label for="locationcity">Location (City):</label><br></td>
<td><input required type="text" id="locationcity" name="locationcity"><br></td>
</tr>
<tr>
<td><label for="startdate">Start Date:</label><br></td>
<td><input required type="date" id="startdate" name="startdate"><br></td>
</tr>
<tr>
<td><label for="enddate">End Date:</label><br></td>
<td><input required type="date" id="enddate" name="enddate"><br></td>
</tr>
<tr>
<td><input onClick="fetchData()" id='bruh' type="submit" value="Submit"><br></td>
</tr>
</table>
</form>
</div>
<div class="container mt-3" style="height: 4800px;">
<h2>Results:</h2>
<p id="location-city"></p>
<table class="table table-bordered">
<thead>
<tr>
<th>Artist</th>
<th>Date</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td id="concerts"></td>
<td id="date"></td>
<td id="location"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="script.js"></script>
</html>
When i open it as an extension it doesn't display results, however when I open it on my browser window it does. Does anyone know how to fix this? The code is running fine when I run it on my browser, so I think this is some display issue since the chrome extension window is smaller when you click on it (like all chrome extensions). I have even increased it to 4800px (as you can see above) to fit everything in, but it doesnt seem to be working.
