tcpiper tcpiper - 5 months ago 13
CSS Question

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

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?
enter image description here



$('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 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

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>