I'm currently working on designing a form within a section that has a width of col-sm-8. The form consists of three columns: label, text input, and username check. I've designated the label to have a width of col-sm-2, the username check to have a width of col-sm-1, and the remaining space for the text input. My initial calculation was to give the text input a width of 5, but the result didn't turn out as expected. I even tried setting it manually to col-sm-7, but it still wasn't long enough. Adjusting the width to col-sm-8 caused scroll bars to appear at the bottom of the page. My goal is to: 1. Set the label's width to col-sm-2 on the left. 2. Set the username check's width to col-sm-1 on the right. 3. Allow the text input to take up the entire width in the middle. How can I achieve this? Below is the code snippet from my previous attempt:
<div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;">
<form name="form_register" id="form_register" method="post" class="form-horizontal">
<fieldset>
<legend class="text-center">Enter your details below.</legend>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username *</label>
<div class="col-sm-7">
<input type="text" name="username" id="username" class="form-control" maxlength="40" required />
</div>
<div class="col-sm-1"><span id="usernameCheck"></span></div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password *</label>
<div class="col-sm-7">
<input type="password" name="password" id="password" class="form-control" maxlength="20" />
</div>
</div>
Although my new code yielded better results, I'm curious if there's a more elegant solution: Change the div of username from
<div class="col-sm-7">
to
<div class="col-sm-7" style="width:75%">