how to align a glyphicon to a form? - html

Question

I'm very sorry if this is just a simple question but I'm really bad when it comes to alignment/positioning of elements and stuff like that so here it goes.
My problem is shown here:
http://imgur.com/a/xscLJ
I just want the glyphicon to appear beside the textfield not above it. Just that. I tried putting it inside the form tag but the result is the same. Here is my code.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"></span>
</div>
</div>
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
I also have a script that will show the glyphicon if the password is wrong. (it's basically a password-accepting textfield)
<?php
echo "<script type='text/javascript'>
$('#loginwrong2').show();
</script>";
?>

Answer 1

From http://getbootstrap.com/css/#forms-control-validation
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
Example fiddle: https://jsfiddle.net/s8p0xyyc/

Answer 2

if you are using bootstrap, you should use bootstrap to design the form
<?php
echo "<script type='text/javascript'>$('#loginwrong2').show();</script>";
?>
<div class="container">
<div class="row">
<div class="col-md-1">
<span id="loginwrong2" class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em; display:none;"></span>
</div>
<div class="col-md-11">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
</div>
PD: this is not a php question

Answer 3

Just add the right classes and move back the span with the incon inside the form
<div id="form" class="collapse in form-group ">
<form method="POST" class="form-inline has-feedback" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
<span id="loginwrong2" class="glyphicon glyphicon-remove-circle form-control-feedback" aria-hidden="true" style="color: red; font-size: 2em;"></span>
</form>
</div>

Answer 4

Thanks for everyone who answered! I got what I want by making a div for the glyphicon and a div for the form. Both divs has the display: inline-block in their styles.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"> </span>
</div>
</div>
<div style="display: inline-block;">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>

Answer 5

Change your css make <span id="loginwrong2"> {position:absolute;left:12%;top:10%}
See this
http://www.bootply.com/BLgAr0zrLA