CODEWITHSUNDEEP
jquerycss
golaz
golaz

Reputation: 71

Space above input, jQuery + Css3

Why when I click on the input, it creates a space above? ... how get rid of space?

Demo

HTML:

<form method="post" id="form">
    <input type="text" class="textinput" />
    <div class="info_form">Utilizează imagini de calitate: o imagine valorează cât o mie de cuvinte!</div>
    <br/>
    <input type="text" class="textinput" />
    <div class="info_form">Utilizează imagini de calitate: o imagine valorează cât o mie de cuvinte!</div>
</form>

JS:

jQuery(document).ready(function () {
    jQuery(".info_form").hide();
    jQuery("input").on("focus", function () {
        jQuery(".info_form").hide();
        jQuery(this).next('div.info_form').show();
    });

    jQuery(document).click(function (e) {
        if (!jQuery(e.target).is('input')) {
            jQuery(".info_form").hide();
        }
    });
});

CSS:

.textinput {
    width:40%;
    padding:6px;
    color:#666;
    margin-bottom:15px;
    border: 1px solid rgba(130, 130, 130, 0.4);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    box-shadow: 0 0 10px #eaeaea inset;
    -moz-box-shadow: 0 0 10px #eaeaea inset);
    -webkit-box-shadow: 0 0 10px #eaeaea inset);
}
.info_form {
    position:relative;
    display:inline-block;
    border:1px solid #d1d1d1;
    color:#333;
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    padding:8px;
    top:21px;
    margin-left:10px;
    width:280px;
    font-family:"Verdana", Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height: 18px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.info_form:before {
    position: absolute;
    right: 100%;
    top: 20%;
    border: solid transparent;
    content:" ";
    border-right-color: #88b7d5;
    border-width: 5px;
    margin-top: -3px;
}

Upvotes: 0

Views: 51

Answers (1)

jonsuh
jonsuh

Reputation: 2875

It's caused because .info_form has position: relative. You'd need to make it absolutely positioned.

.info_form {
    position: absolute;
}

However, that'll throw off the positioning.

Here's a solution where you wrap the input field and bubble in a container that's positioned relatively, and then adjust the z-index of the tooltip so it's on top.

Working Fiddle: DEMO

Adjust the left and top position of .info_form accordingly if you don't like how it's positioned.

Upvotes: 1

Related Questions