I am facing an issue with resizing the text inside an input control when the window is resized. The problem occurs between the width range of 1032px to 575px, where the text inside the input control does not display completely. However, below 575px width, the textbox expands to the full length of the row and the text is visible. I am looking for a solution to resize the text inside the input control within the width range of 575px to 1032px. I have experimented with using "vw" and "vh" for the input control, but it results in the text size decreasing even below 575px width.
<div class="sidebar">
<a href="#" onclick="home_trans()"><i data-feather="home"></i> Home</a>
<a href="#"><i data-feather="plus-circle"></i> New Travel Application</a>
<a href="#"><i data-feather="archive"></i> History</a>
</div>
<div class="content">
<main role="main" class="col-lg-12 col-md-12 col-sm-12 ml-sm-auto px-4">
<div id='loadingmessage' style='display: none'>
<img id="loading-image" src="Images/Loading.gif" alt="Loading..." />
</div>
<div class="form-group" style="margin-top: 90px" id="mai">
<div class="form-group row">
<label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Name:</label>
<div class="col-sm-3">
<input runat="server" class="form-control" id="emp_name" type="text" placeholder="Emp Name" disabled="disabled" />
</div>
<label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Reporting Manager:</label>
<div class="col-sm-3">
<input runat="server" class="form-control" id="rpg_mgr" type="text" placeholder="Reporting Manager" disabled="disabled" />
</div>
</div>
<div class="form-group row" style="margin-top: 20px;">
<label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Emp ID:</label>
<div class="col-sm-3">
<input runat="server" class="form-control" id="emp_num" type="text" placeholder="Emp ID" disabled="disabled" />
</div>
<label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Location:</label>
<div class="col-sm-3">
<input runat="server" class="form-control" id="loc" type="text" placeholder="Location" disabled="disabled" />
</div>
</div>
<div class="form-group row" style="margin-top: 20px;">
<label for="disabledInput" class="col-sm-3 col-form-label" style="text-align: left; font-size: medium">Designation:</label>
<div class="col-sm-3">
<input runat="server" class="form-control" id="desig" type="text" placeholder="Designation" disabled="disabled" />
</div>
</div>
The CSS file for the code above is:
body {
margin: 0;
font-family: "Lato", sans-serif;
padding-top:55px;
}
#loadingmessage {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
.sidebar {
margin: 0;
padding: 0;
width: 150px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
overflow-x:hidden;
padding-top: 55px;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 150px;
margin-top:80px;
padding-right:16px;
}
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
div.content{
margin-top:unset;
}
}
@media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
div.content{
margin-top:unset;
}
}