CODEWITHSUNDEEP
twitter-bootstrapposition
Melbfella
Melbfella

Reputation: 11

Bottom align collapsed div inside another div

I'm trying to create a little chat client to plug into my website, and am having trouble aligning a collapsed div to the bottom of it's container div.

I have a div with two chat windows (also divs) in it - by default both windows are maximized.

When I minimize one of the windows, the panel collapses upwards, at the top of the container div.

When both are minimized, it works as desired, with both minimized bars at the bottom of the page.

I'd paste images, but I'm new to stackoverflow and can't post images.

How can I force the collapsed div to the bottom of the container, when another div inside it is not minimized?

It can be seen in action here :

ChatTest

And here's the code :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css" media="screen"></style>
    <script src="Scripts/chat.js"></script>
    <script src="Scripts/jquery-3.1.1.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>

    <style>     

        .panel-resizable {
            resize: both;
            overflow: hidden;
        }

        .chat-container {
            bottom: 0;
            right: 0;
            position: fixed;
            /*height: 500px;*/
            max-height: 500px;
            /*border: 1px solid blue;*/
        }

        .chatblah {
            bottom: 0;
            /*position: fixed;*/
            float: right;
            margin-left: 0;
            right: 0;
            /*border: 1px solid green;*/
        }

        .chat-window {
            bottom: 0;
            float: right;
            margin-left: 10px;
            right: 10px;
            max-width: 280px;
            max-height: 500px;
            min-width: 280px;
            /*border: 1px solid red;*/
        }

            .chat-window > div > .panel {
                border-radius: 5px 5px 0 0;
            }

        .icon_minim {
            padding: 2px 10px;
        }

        .top-bar {
            background: #666;
            color: white;
            padding: 10px;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>

        <div class="chat-container">
            <div class="chatblah">
                <div class="panel panel-warning table-responsive chat-window">
                    <div class="panel-heading top-bar">
                        <div class="col-md-8 col-xs-8">
                            <h3 class="panel-title">
                                <a data-toggle="collapse" href="#collapse_1">Fred</a>
                            </h3>
                        </div>
                        <div class="col-md-4 col-xs-4" style="text-align: right;">
                            <a data-toggle="collapse" href="#collapse_1"><span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span></a>
                            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
                        </div>
                    </div>
                    <div id="collapse_1" class="panel-collapse collapse in">
                        <div class="panel-body panel-resizable">
                            <input type="hidden" id="txtChatID_1" value="1" />
                            <table style="width: 260px;">
                                <tbody>
                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top; border: 1px solid white">
                                            <img src="Images/defaultuser.png" style="width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #EDF5FC; border: 1px solid white">This is a test message that will go over a couple of lines.  The quick brown fox jumped over the lazy dog</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>You • 12:07am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->


                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top">
                                            <img src="Images/defaultuser.png" style="border: 1px solid white; width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #F2F2F2; border: 1px solid white">This is a response to that message</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>Joan • 12:09am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->




                                    <!--Message Input-->
                                    <tr>
                                        <td colspan="2">
                                            <textarea class="form-control chatInput" rows="3" id="txtMessage_1" placeholder="Type a message....."></textarea>
                                        </td>
                                    </tr>
                                    <!--End Message Input-->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="chatblah">
                <div class="panel panel-warning table-responsive chat-window">
                    <div class="panel-heading top-bar">
                        <div class="col-md-8 col-xs-8">
                            <h3 class="panel-title">
                                <a data-toggle="collapse" href="#collapse_2">Joan</a>
                            </h3>
                        </div>
                        <div class="col-md-4 col-xs-4" style="text-align: right;">
                            <a data-toggle="collapse" href="#collapse_2"><span id="minim_chat_window2" class="glyphicon glyphicon-minus icon_minim"></span></a>
                            <a href="#"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>
                        </div>
                    </div>
                    <div id="collapse_2" class="panel-collapse collapse in">
                        <div class="panel-body panel-resizable">
                            <input type="hidden" id="txtChatID_2" value="1" />
                            <table style="width: 260px;">
                                <tbody>
                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top; border: 1px solid white">
                                            <img src="Images/defaultuser.png" style="width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #EDF5FC; border: 1px solid white">This is a test message that will go over a couple of lines.  The quick brown fox jumped over the lazy dog</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>Fred • 12:07am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->


                                    <!--Chat Message element-->
                                    <tr>
                                        <td style="width: 26px; vertical-align: top">
                                            <img src="Images/defaultuser.png" style="border: 1px solid white; width: 24px; height: 24px" />
                                        </td>
                                        <td style="background-color: #F2F2F2; border: 1px solid white">This is a response to that message</td>
                                    </tr>
                                    <tr>
                                        <td class="text-right" colspan="2">
                                            <h5><small>You • 12:09am 19 Dec 2017</small></h5>
                                        </td>
                                    </tr>
                                    <!--End Chat Message element-->




                                    <!--Message Input-->
                                    <tr>
                                        <td colspan="2">
                                            <textarea class="form-control chatInput" rows="3" id="txtMessage_2" placeholder="Type a message....."></textarea>
                                        </td>
                                    </tr>
                                    <!--End Message Input-->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

Any and all suggestions most welcome.

Thanks in advance.

Upvotes: 0

Views: 516

Answers (2)

Lorem Ipsum
Lorem Ipsum

Reputation: 357

Just add a class fix to second .chatblah div and then use this css

.chatblah.fix {
    position: absolute;
    right: 290px;
}

Here is the screenshot http://prntscr.com/hpz073

Upvotes: 1

DennisFrea
DennisFrea

Reputation: 1122

You can use flexbox and use flex-direction: column; and justify-content: flex-end; to align your chat elements to bottom.

.chat-container {
    bottom: 0;
    right: 0;
    position: fixed;
    /* height: 500px; */
    max-height: 500px;
    /* border: 1px solid blue; */
    display: flex;
    flex-direction: row;
}

.chatblah {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

Upvotes: 0

Related Questions