I am encountering a peculiar issue with an input-group in my cshtml file which features a Bootstrap addon. The problem arises on mobile devices, where upon focusing on the input field, the page scrolls horizontally to the right, revealing the right margin of the page. This off-page scrolling persists until the input box loses focus, at which point the page reverts back to center. How can I ensure that the page remains centered when the input is focused?
<div class="col-xs-12 text-left m-b-20" data-bind="validationElement: hin">
<div>
<span id="hin"
data-bind="resourceText: 'Resource/File/Path/HIN', css: { error: hin.isModified() && !hin.isValid() }"></span>
</div>
<div class="input-group">
<span class="input-group-addon" style="background-color: white;" id="basic-addon3"><b>C</b></span>
<input id="hinInput" type="text" inputmode="numeric" class="form-control" aria-describedby="basic-addon3"
placeholder="HIN" data-bind="validationOptions: {insertMessages: false}"
onfocus="document.getElementById('hin').classList.add('focused');"
onblur="document.getElementById('hin').classList.remove('focused');" autocomplete="off" />
</div>
<p class="validationMessage" data-bind="validationText: hin"></p>
</div>
Various attempts have been made to resolve this issue, such as adjusting font sizes, including sizing options for the input-group class, and modifying padding and margins around the div container. Despite these efforts, the page continues to shift horizontally on mobile devices when the input is focused. The only solution that somewhat works involves listening for scroll events and manually resetting the scroll position back to 0 in the X plane.
Edit: Here is the CSS for the input element's class
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #d9dce5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Further CSS for the input-group bootstrap class:
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.input-group .form-control:focus {
z-index: 3;