I have to build a Modular Window for a chat! I allready got a Toolbar and an Flex conatiner which gets filled. Now i got the Problem, that i want to add an Div for a chat input field. I tried nearly everything to align this thing to the bottom but nothing works.
Here is how it should look like:
"Message input" has to be aligned to the bottom
This is my actual HTML-Code:
<div id="chat_dialog" class="modal" style="height: 600px; overflow-y: hidden"> <div class="toolbar_standard"> <div class="toolbar_standard_control_row"> <img src="/static/images/ic_arrow_back_white.svg" class="toolbar-button" data-bind="click: closeChatDialog"> <div style="font-size: 20px; color: white">Chat</div> <div style="font-size: 20px; color: white; padding-left: 40%" data-bind="html: chatPartnerName"></div> <div style="..."></div> </div> </div> <div style="display:flex; height: 100%;"> <div data-bind="foreach: contacts" style="width: 300px; overflow-y: scroll;"> <div class="overviewlist_row waves-effect" style="padding-left: 5px; padding-right: 5px" data-bind="click: $parent.onClick.bind($parent)"> <div> <div> <p data-bind="html: name"></p> </div> </div> </div> </div> <div style="background-color: #e6e6e6; flex-grow: 1; overflow-y: scroll; padding-bottom: 10px"> <div style="height: 80%; display: flex; flex-direction: column;"> <div id="spinner" class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> <div data-bind="foreach: messages" style="padding-left: 15px; min-height: 306px"> <p data-bind="html: message, css: messageClassName"></p> </div> <div style="height: auto"> <div class="input-field col s6" style="background-color: white; height: auto;"> <input id="message_to_send" type="text" class="validate" data-bind="value: message_to_send" style="width: 94%;"> <a id="sendChat" class="clickable-icon" data-bind="click: sendMessage" style="padding-top: 0px"><img src="/static/images/ic_send_black.svg"></a> <label for="message_to_send">Nachricht</label> </div> </div> </div> </div> </div> </div>
And this is how it looks like in the Browser:
Here you can see that is is floating under the Div of the "Messages" and that its dynamically moving whit the size of the "Messages" Div!
How and where do i have to set the the alignment to the bottom?
First point: Don't use inline CSS without any necessity.
You can bring your message to bottom by positioning. Try to change your code as below
Add position:relative
to <div style="height: 80%; display: flex; flex-direction: column;">
and add position:absolute; bottom:0;
position:absolute; bottom:0;
to <div style="height: auto">
.
Edit: If it doesn't bring your message to exact bottom, then you are suppose to work on the height of <div style="height: 80%; display: flex; flex-direction: column;">
on this part.
Just add position: absolute;
and bottom: 0px;
in your textarea or container of textarea
Add position: fixed;
and bottom:0;
to your message input container, to fix the width overlap issue just add property of width: inherit;
that will take the width value of parent element. Otherwise you can assign the parent width to your message container dynamically using JavaScript code :
$(document).ready(()=> {
var parentWidth = $('.parent-element').width();
$('.message-container').width(parentWidth);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.