Shae LaRie Shae LaRie - 27 days ago 9
CSS Question

Put div in drop up

I have a div in my footer that I would like to put inside a drop-up.
I tried this but it wont put the div inside the button. I found it here
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu-dropup&stacked=h

this is what its doing
https://jsfiddle.net/tmfmtocf/
Does anyone know how to do this?
My footer...

<footer id="chat">
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropup Example
<span class="caret"></span>
</button>
<div class="boxContainer">
<h2 style="color:red;">Chat</h2>
<div id="scrollBox" style="height:100px;width:100%;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
<ul id="discussion"></ul>
</div>
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
</div>
</div>
</footer>


Thanks!

Answer

If you already have bootstrap loaded on your page then you just need to add the class of dropdown-menu to your boxContainer like so:

    <footer id="chat">
        <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                Dropup Example
                <span class="caret"></span>
            </button>
            <div class="boxContainer dropdown-menu">
                <h2 style="color:red;">Chat</h2>
                <div id="scrollBox" style="height:100px;width:100%;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
                    <ul id="discussion"></ul>
                </div>
                <input type="text" id="message" />
                <input type="button" id="sendmessage" value="Send" />
                <input type="hidden" id="displayname" />
            </div>
       </div>
</footer>

Fiddle Demo Fiddle

Comments