CODEWITHSUNDEEP
jquerycsswidthpadding
Wordpressor
Wordpressor

Reputation: 7543

jQuery width() animation creates padding (possible CSS issue)

Animating width() with jQuery creates some sort of padding below.

I have an element (input) that is hidden because the parent has overflow: hidden. When user clicks on link the link itself disappears and changes width to the one of the input so the inputs magically appears. Unfortunately it creates some sort of a padding, only during the animation.

Here's a jsfiddle (click on the "s" box or just anywhere on the HTML):

http://jsfiddle.net/46XxU/1/

Here's the JS:

 jQuery('#search').on('click', function(){
        event.stopPropagation();
        var formWidth = jQuery(this).children('form').width();
        jQuery(this).children('form').animate({left: "0"});
        jQuery(this).animate({width: formWidth});
        jQuery('#search form input').focus();
    });

    jQuery('html').click(function(){
        jQuery('#search').animate({width: "2rem"});
        jQuery('#search form').animate({left: "2rem"});
        jQuery('#search form input').val('');
    });

And HTML: 

<div id="menu">
    <a href="#" class="link">Other links</a>
     <a href="#" class="link">Other links</a>
  <div id="search">
    <i class="icon">s</i>
    <form method="get" action="">
    <input type="text" placeholder="type to search..." />
   </form>
  </div>
</div>
<p>Click on "s" to show search input. Or anywhere on the site to hide it. Why does it add some kind of margin / padding on click?</p>
<marquee>Welcome! It's 1999 all over again!</marquee>

And CSS:

body {
    padding: 0;
    margin: 0;
    text-align: center;
}

#menu {
    text-align: right;
    background: #555;
    margin: 0 auto;
    width: 500px;
    overflow: hidden;
}

#search {
    display: inline-block;
    width: 2rem;
    cursor: pointer;
    position: relative;
}

#search,
#search i {
  line-height: 2rem;
  text-align: center;
  width: 2rem;
  height: 2rem;
  background: #eee;
}

#search form {
    position: absolute;
    top: -2px;
    left: 2rem;
    width: 180px;
}

#search form input {
    position: relative;
    height: 2rem;
    border: 0;
    width: 180px;
    background: #efefef;
}

marquee {
    width: 500px;
    margin: 0 auto;
}

And Fiddle again: http://jsfiddle.net/46XxU/1/

Upvotes: 0

Views: 441

Answers (1)

Laxmana
Laxmana

Reputation: 1706

if you see when you click on #search the jquery put an overflow: hidden style element and that's is that make that sort of padding. Also if you put:

#search{
  overflow:hidden;
}

the padding is showing permanently. So something is greating that extra space and that's is the menu container. Just put #menu{height: 2rem;}

That should fix the problem.

Working example : http://jsfiddle.net/46XxU/2/

UPDATE #1: Most likely the a links makes that extra space so that's way the height of #menu is greater that the search input.

UPDATE #2: Because with my first solution the links wasn't be showing very well I make some changes to html and css to make it right. http://jsfiddle.net/46XxU/3/

Upvotes: 1

Related Questions