I've encountered a peculiar issue with my webcalendar prototype in HTML.
Using bootstrap4, I created a table with "time-buttons" that users can select.
Whenever I click on a random time-button and there are more than 3 buttons (resulting in overflow), the tables stretch wider which is not desired.
Can someone help me understand why this happens? Have I overlooked something?
<!DOCTYPE html>
<html lang="en">
<head>
<title>test.html</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.topcorner{
top: 0px;
right: 4px;
/* position: absolute; */
cursor:pointer;
}
.list-group{
height: 100px;
/* max-width: 90%; */
overflow-y: auto;
}
td {
background-color: lightgrey;
height : 130px;
max-width: 130px;
...