After attempting to create a basic form page using Bootstrap, I encountered an issue with the background color. Instead of sticking with the default white background, I decided to override the "form-control" class's background color and use light gray instead.
However, this change resulted in part of the right side getting cut off unexpectedly. I suspect it has something to do with the background color adjustment, but I'm not sure. That's why I need help figuring it out!
Here is an image showing the problem:
https://i.sstatic.net/d9joR.png
Below is the code snippet that is causing the issue:
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.formKeepLeft {
display: flex;
}
.skipLine {
clear: left;
}
.form-control, .form-control:focus {
width: 100%;
border-radius: 0px;
background-color: lightgray;
}
.skipLine {
display: block;
}
</style>
<div class="row">
<div class="col-6">
<!--- Col 1 --->
<form>
<div class="formKeepLeft">
<div class="form-group">
<label for="inputEmail">Namn</label>
<input type="input" class="form-control " size="100%" id="inputName" placeholder="">
</div>
<div class="form-group" style="padding-left: 10px;">
<label for="inputPassword">E-post</label>
<input type="email" class="form-control " size="100%" id="inputEmail" placeholder="">
</div>
</div>
<!-- Form row 2 -->
<div class="form-group skipLine">
<label for="inputPassword">Ämne</label>
<input type="input" class="form-control " size="100%" id="inputÄmne" placeholder="">
</div>
</form>
</div>
</div>
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>Upon resizing the page, the cutoff issue becomes more prominent. It seems to work fine for col-lg sizing, but misbehaves with other sizes. Attempting to tweak the background-size property didn't yield any positive results.
My goal is illustrated in this reference image:
https://i.sstatic.net/EGZrH.png
The image showcases the desired outcome without any cut-off on the right side. If anyone has suggestions or solutions, I would greatly appreciate the help.
Thank you in advance for your support!