CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Steve Robinson
Steve Robinson

Reputation: 3939

Add an overlay button inside a text box

In my web app, I have several input fields. When a user hovers over an input item, I want to be able to display a small icon button in the bottom right corner of the input field and when the user presses it, i wanna be able to show a bootstrap popover with a field to add comments.

I dont know how to place a button over an input field.

If I could do that, I can easily add the popover and show on hover etc.

Please help... here's what I have http://jsfiddle.net/WTpPH/.

Do I need to set

z-index: 100

or something?

Upvotes: 1

Views: 9277

Answers (4)

Mohsen Safari
Mohsen Safari

Reputation: 6795

you can use position:absolute; with z-index like this :

HTML

<div>
<input type="text"></input>
<a href='#'>c</a>
</div>

CSS

div{

    position:relative;
}

input{
    position:absolute;
}

a{
    background-color:red;
    position:absolute;
    left:10px;
    top:3px;
}

jsFiddle

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

Here is a more Bootstrap friendly approach..

      <form role="search">
        <div class="input-group add-on">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello popover content."><strong>?</strong></button>
          </div>
        </div>
      </form>

CSS to move the button left:

.add-on .input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

Working demo: http://bootply.com/86596

Upvotes: 1

Spokey
Spokey

Reputation: 10994

input {
    position:relative;
    z-index:9999999999999999;
}
.cc {
    position:absolute;
    left:155px;
    top:15px;
    z-index:9999999999999999999999999;
    display:none;
}

Obviously z-index over-exaggerated >:D. The point is that the elements must have a defined position and the z-index of a must be higher as the rest.

$('input').focus(function () {
    $('.cc').show();
}).focusout(function () {
    $('.cc').hide();
});

FIDDLE

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28387

One way as per your existing code is to set a negative margin on the anchor. 

a { margin-left: -16px; }

See this updated fiddle: http://jsfiddle.net/WTpPH/1/

Another way could be to wrap the input and the anchor in a div which is relatively positioned. Then you can use absolute positioning on the anchor to place it exactly where you want with respect to the div. You will need to carefully set the widths though. 

a { position: absolute; right: 4px; top: 4px; ... }

See this updated fiddle: http://jsfiddle.net/WTpPH/2/

Upvotes: 2

Related Questions