When i change the browser size, the forms are responsive until around 490px at which point they overflow the page to the right and a horizontal scrollbar is added. All forms are the exact same style, and they all have the same issue. One thing I think may be causing this issue is the side bar which goes down the left of the page which may be messing with the grid structure, but I am still not sure how to fix it.
Here is an example of one of the pages including a form that has this issue:
<meta charset="UTF-8">
<link rel="shortcut icon" href="/static/images/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Add Event</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="/static/css/base.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body data-new-gr-c-s-check-loaded="14.991.0" data-gr-ext-installed="">
<header>
<div class="" style="display: table; width: 100%">
<div style="display: table-cell; vertical-align: middle">
<button onclick="location.href='/'" class="image-link image-link-logo" title="Home"></button>
</div>
<div style="display: table-cell; width: 100%; vertical-align: middle">
<form action="/search/" method="GET" class="search-form">
<input id="query-input" type="text" name="query" placeholder="Search...">
</form>
</div>
<div style="overflow: auto; display: table-cell; vertical-align: middle">
<div class="dropdown">
<button class="image-link image-link-profile" title="Account"></button>
<div class="dropdown-list">
<p>
User: rohan
</p>
<a href="/account/profile/">
<span class="fas fa-user-circle" aria-hidden="true"></span> Profile
</a>
<a href="/account/edit/rohan/">
<span class="fas fa-cog" aria-hidden="true"></span> Settings
</a>
<a href="/accounts/logout/">
<span class="fas fa-sign-out-alt" aria-hidden="true"></span> Sign Out
</a>
</div>
</div>
</div>
</div>
</header>
<div id="navigation" class="breadcrumbs">
<a href="/">Home</a>/
</div>
<div id="content" style="display: table; height: 100%">
<div class="side-menu dropdown-container" data-hide-function="hideSideMenu">
<button class="hide-btn"><i class="fas fa-bars" aria-hidden="true"></i></button>
<a href="/" style=""><i class="fa fa-home" aria-hidden="true"></i> <span>Home</span></a><button class="dropdown-btn" style=""><i class="fa fa-book" aria-hidden="true"></i> <span>Course</span><span> <i class="fa fa-caret-right" aria-hidden="true"></i></span></button><div class="dropdown-container" data-function="_loadCourseNavigator" data-context="{}" data-url="/courseListAjax"></div><a href="/announcements/view/" style=""><i class="fab fa-discourse" aria-hidden="true"></i> <span>Announcements</span></a><a href="/calendar/view/" style=""><i class="fas fa-calendar-week" aria-hidden="true"></i> <span>Calendar</span></a></div>
<div style="display: table-cell; width: 100%; height: 100%">
<div class="container">
<div class="row">
<div class="module">
<div class="col-12">
<form method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="N50di2txANxf9zkpprgbikd2FGdvDXB4ZBJ3JUgQbl3Us5d7pfkm53ENQlOOowZE">
<label for="id_title">Title:</label><input type="text" name="title" maxlength="200" required="" id="id_title">
<label for="id_description">Description:</label><textarea name="description" cols="40" rows="10" required="" id="id_description"></textarea>
<label for="id_start_time">Start time:</label><input type="datetime-local" name="start_time" required="" id="id_start_time">
<label for="id_end_time">End time:</label><input type="datetime-local" name="end_time" required="" id="id_end_time">
<label for="id_course">Course:</label><select name="course" required="" id="id_course">
<option value="" selected="">---------</option>
<option value="2">1234</option>
<option value="1">123</option>
</select>
<button type="submit" class="button effect"><span class="fas fa-calendar-plus" aria-hidden="true"></span> Add New
Event
</button>
</form>
</div>
</div>
</div>
</div>
</body>
I am using Django so this form is being created from that using {{form}} tags which is why some things may look a bit weird, I have tried to get the best HTML representation of the page. Any help much appreciated!
question from:
https://stackoverflow.com/questions/65854215/html-form-not-being-responsive-past-490px 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
