CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DonBananMike
DonBananMike

Reputation: 53

Div changes position when fadeIn()

I'm trying to make a dynamic search in some custom divs, and the search function works well with some Javascript and fadeIn() and fadeOut(), but when the first custom div fades out and then fades in again, the div has moved aprox. 10 px above the others.

Code: (See JSFiddle for full HTML) http://jsfiddle.net/fxdu5355/ HTML:

<div class="col-lg-12">
<div class="col-lg-12">
    <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="panel panel-primary">
            <div class="panel-heading">
                Search
            </div>
            <div class="panel-body">
                <div class="col-lg-8 col-md-10 col-sm-12">
                    <input type="text" class="form-control" id="search" title="Search Silos" placeholder="Search"/>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-12 no-link">
    <ul id="siloList">
        <li>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="no-link">
                    <div class="panel panel-info silo-link silo-panel">
                        <div class="panel-heading">
                            <h3>Novo Nordisk</h3>
                        </div>
                        <div class="panel-body">
                            12 private Sources<br/>
                        </div>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="no-link">
                    <div class="panel panel-info silo-link silo-panel">
                        <div class="panel-heading">
                            <h3>Coloplast</h3>
                        </div>
                        <div class="panel-body">
                            27 private Sources<br/>
                        </div>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="no-link">
                    <div class="panel panel-info silo-link silo-panel">
                        <div class="panel-heading">
                            <h3>Antarktis</h3>
                        </div>
                        <div class="panel-body">
                            2 private Sources<br/>
                        </div>
                    </div>
                </a>
            </div>
        </li>
        <li>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="no-link">
                    <div class="panel panel-info silo-link silo-panel">
                        <div class="panel-heading">
                            <h3>Novartis</h3>
                        </div>
                        <div class="panel-body">
                            143 private Sources<br/>
                        </div>
                    </div>
                </a>
            </div>
        </li>
    </ul>
</div>

Javascript search function:

$("#search").keyup(function ()
{
    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val();
    // Loop through the comment list
    $("#siloList li").each(function ()
    {
        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0)
        {
            // Show the list item if the phrase matches and increase the count by 1
            $(this).fadeOut();
        }
        else
        {
            $(this).fadeIn();
        }
    });
});

I hope someone can help me here.

Thanks in advance.

/Mike

Upvotes: 2

Views: 118

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272406

Removing display: inline rule on #siloList seems to fix the issue.

Updated Demo

Upvotes: 3

Related Questions