How to location an absolute div after an input in bootstrap?

Question

All I want is just make an absolute <div>a message</div> on the right side of an input, so the div won't affect static layout. But I found the location was wrong. How should I do it?

$('input').each(function(i, input){
  var input = $(input);
  var top = input.offset().top;
  var left = input.offset().left+input.outerWidth();
  var attrs = {top:top, left:left, position:'absolute'};
  input.focus(function(){
    var tip = $('<div>a message</div>');
    tip.css(attrs);
    tip.insertAfter(input)});
});

<link href="http://cdn.jarsj.cn/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
  <div class="page-header">
    <h1>Test Page</h1>
  </div>
  <div class="row">
    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation"><a href="/">Home</a></li>
        <li role="presentation"><a href="profile">Profile</a></li>
        <li role="presentation"><a href="messages">Messages</a></li>
      </ul>
    </div>
    <div class="col-md-5">
      <div class="panel panel-primary">
        <div class="panel-heading">fill the form please.</div>
        <div class="panel-body">
        <form>
          <div class="form-group">
            <label for="username">username</label>
            <input type="text" class="form-control" id="username_id" name="username">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="http://cdn.jarsj.cn/jquery-1.11.0.min.js"></script>
<script src="http://cdn.jarsj.cn/bootstrap.min.js"></script>

Answer 1

You have calculated the position relative to the beginning of the document. So avoid placing absolutely-positioned element into any block.

For absolutely positioned elements (those with position: absolute or position: fixed), the top property specifies the distance between the top margin edge of the element and the top edge of its containing block.

The first relatively positioned parent block becomes the containing block for absolutely positioned elements. In your case this is <div class="col-md-5">. Bootstrap adds the position: relative property to all its columns.

So use

tip.appendTo('body')});

instead of

tip.insertAfter(input)});

$('input').each(function(i, input){
  var input = $(input);
  var top = input.offset().top;
  var left = input.offset().left+input.outerWidth();
  var attrs = {top:top, left:left, position:'absolute'};
  input.focus(function(){
    var tip = $('<div>a message</div>');
    tip.css(attrs);
    tip.appendTo('body')});
});

<link href="http://cdn.jarsj.cn/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
  <div class="page-header">
    <h1>Test Page</h1>
  </div>
  <div class="row">
    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation"><a href="/">Home</a></li>
        <li role="presentation"><a href="profile">Profile</a></li>
        <li role="presentation"><a href="messages">Messages</a></li>
      </ul>
    </div>
    <div class="col-md-5">
      <div class="panel panel-primary">
        <div class="panel-heading">fill the form please.</div>
        <div class="panel-body">
          <form enctype="multipart/form-data" method="post">
            <p>
              <label for="username">user</label>
              <input id="id_username" name="username" type="text" />
            </p>
            <input type="submit" value="submit"/>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="http://cdn.jarsj.cn/jquery-1.11.0.min.js"></script>
<script src="http://cdn.jarsj.cn/bootstrap.min.js"></script>

Answer 2

There are several ways to do this. 3 easiest ways are:

1. Add display:inline-blockto both your input and your message div.
2. Add float:left to input.
3. Add float:right to message div.