How to create sticky bottom search box Bootstrap (React)

Question

I have been trying for hours trying different examples I have found, and none seem to work.

What I want to do (without the custom JS): http://jsfiddle.net/paulalexandru/Z2Lu5/

However, I can't get it to work within Bootstrap. I am specifically using React-Bootstrap (I have changed the below code to normal HTML for those unfamiliar with React/React-Bootstrap), but I don't believe that to be the problem. I have a setup along the lines of:

<body>
    <div class="container-fluid main">
        <div class="row">
            <div class="col-md-2 sidebar"
                <my sidebar elements>
            </div>
            <div class="col-md-10">
                <some random empty div (that will fill in the future)>
                <div class="search">
                    <div className="panel-group">
                        <div className="panel panel-default">
                            <div className="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
                                    <input type="text" onchange="handleChange()" />
                                </a>
                            </div>
                            <div id="searchResultsContainer" className="panel-collapse collpase">
                                <div className="panel-body">
                                    <my table containing search results from the server>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

However, no matter how hard I try

.search {
    position: fixed;
    bottom: 0;
    width: 100%;
}

You will also notice stuff to try and make the search results accordion, but that's useless to me until I can get this box to stay at the bottom.

My guess is that the Rows/Columns of Bootstrap are causing some issues. I can't move the search box out of the grid and to the bottom (which does work) because it then also covers the sidebar, and I am using the grid system to keep the search box dynamically sized/placed.

Also, I tried this but it didn't seem to work: Making expandable fixed footer in Bootstrap 3?

maryisdead · Answer 1 · 2015-03-24T10:09:06.303

The solution is position: fixed (you can see the other example using it as well). It should work no matter what framework you are using.

body
{
    margin: 0;
    padding: 0;
}
.search
{
    background: rgba(255,0,0,0.5);
    bottom: 0;
    position: fixed;
    width: 100%;
}

@media only screen and (min-width: 550px)
{
    .search
    {
        left: 50%;
        margin-left: -250px;
        width: 500px;
    }
}

@media only screen and (min-width: 850px)
{
    .search
    {
        margin-left: -400px;
        width: 800px
    }
}

<div class="container-fluid main">
        <div class="row">
            <div class="col-md-2 sidebar">
                <div>my sidebar elements</div>
            </div>
            <div class="col-md-10">
                <div>some random empty div (that will fill in the future)</div>
                <div class="search">
                    <div className="panel-group">
                        <div className="panel panel-default">
                            <div className="panel-heading">
                                <a data-toggle="collapse" data-parent="#accordion" href="#searchResultsContainer">
                                    <input type="text" onchange="handleChange()" />
                                </a>
                            </div>
                            <div id="searchResultsContainer" className="panel-collapse collpase">
                                <div className="panel-body">
                                    <div>my table containing search results from the server</div>                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

JSFiddle

You will notice in that example though, that the search box "footer" is breaking out of its 10-width column and taking up the entire 12 columns. How do I avoid that? — Matthew Herbst, Mar 24 '15 at 09:36
You can either try to tack on Bootstrap's `.container` (which is responsible for the responsive widths) to your `.search` and see how it turns out or roll your own code. I updated my example to cover basic cases. — maryisdead, Mar 24 '15 at 10:08
Come to think about it, you'd rather have to try out attaching `.col-md-5` instead of `.container`, but still not sure if this would work. — maryisdead, Mar 24 '15 at 10:16

How to create sticky bottom search box Bootstrap (React)

1 Answers1