user6490375 user6490375 - 28 days ago 12
HTML Question

New line being inserted before rendering the text box

I have the following code snippet; but I am not sure why a newline character (a

<br>
tag to be precise) is added between Email and its corresponding text box:



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>My Website!</h3>
<br>
<br>
<br>
<br>
<br>

<form>
<div class="form-group" align="center">
<div class="input-group" style="width=5px">

<center>
<span class="input-group-addon" id="basic-addon1">Email: </span>
<input class="form-control" align="center" type="text" id="EmailId" placeholder="Email" aria-describedby="basic-addon1" />
</center>
</div>
</div>

<div class="form-group" align="center">
<div class="input-group">
<center>
<label for="Password"></label>Password:
<input type="password" class="form-control" id="PasswordId" placeholder="Password" aria-describedby="basic-addon2">
</center>
</div>
</div>

<button type="submit" class="btn btn-default">Login!</button>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>





The output being displayed is:

enter image description here

What changes must be done so that it is displayed on the same line?

Answer

I did couple of changes,

  • Remove the <center> tag
  • Remove manual width
  • Wrap your controls with "row" and then "col-*" div so that your controls move to the center (refer code)
  • Add "text-center" to the parent div of the control

Does it solve your issue?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>My Website!</h3>
<br>
<br>
<br>
<br>
<br>

<form>
<div class="row">
<div class="col-xs-4 col-xs-push-4">
  <div class="form-group">
    <div class="input-group">         
        <span class="input-group-addon" id="basic-addon1">Email: </span>
        <input class="form-control" align="center" type="text" id="EmailId" placeholder="Email" aria-describedby="basic-addon1" />       
    </div>
  </div>
 </div>
  </div>
<div class="row">
<div class="col-xs-4 col-xs-push-4">
  <div class="form-group">
    <div class="input-group">        
        <span class="input-group-addon" >Password</span>
        <input type="password" class="form-control" id="PasswordId" placeholder="Password" aria-describedby="basic-addon2">        
    </div>
  </div>
</div>
  </div>
  <button type="submit" class="btn btn-default">Login!</button>
</form>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Comments