Muszę zbudować modułowe okno na czacie! Dostałem pasek narzędzi i kontiner flex, który się wypełnia. Teraz mam problem, że chcę dodać div na pole wejściowe czatu. Próbowałem prawie wszystko, aby dostosować tę rzecz do dna, ale nic nie działa.

Oto jak to powinno wyglądać:

enter image description here

"Wejście wiadomości" musi być wyrównane do dołu

To jest mój rzeczywisty kod HTML:

<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>

I tak wygląda w przeglądarce:

Tutaj możesz zobaczyć, że jest unoszący się pod dowództwem "Wiadomości" i że jego dynamicznie porusza się rozmiar wielkości "Wiadomości" Div!

enter image description here

Jak i gdzie muszę ustawić wyrównanie na dole?

3
Tim 8 wrzesień 2017, 11:42

3 odpowiedzi

Najlepsza odpowiedź

Pierwszy punkt: Nie używaj Inline CSS bez konieczności.

Możesz przynieść wiadomość na dole, pozycjonowanie. Spróbuj zmienić swój kod jak poniżej

Dodaj position:relative do <div style="height: 80%; display: flex; flex-direction: column;"> i dodaj position:absolute; bottom:0; do <div style="height: auto">.

Edytuj: Jeśli nie przyniesie Ci wiadomości do dokładnego dna, należy pracować na wysokości <div style="height: 80%; display: flex; flex-direction: column;"> na tej części.

2
RaJesh RiJo 8 wrzesień 2017, 08:52

Dodaj position: fixed; i bottom:0; do kontenera wejściowego wiadomości, aby naprawić problem z nakładaniem szerokości Wystarczy dodać właściwość width: inherit;, która będzie miała wartość szerokości elementu macierzystego. W przeciwnym razie dynamicznie możesz przypisać szerokość nadrzędną do kontenera komunikatu za pomocą kodu JavaScript:

$(document).ready(()=> {
      var parentWidth = $('.parent-element').width();
      $('.message-container').width(parentWidth);
});
0
Slimani Ibrahim 16 luty 2021, 08:24

Wystarczy dodać position: absolute; i bottom: 0px; w textlai lub pojemniku Textarea

1
Myco Claro 8 wrzesień 2017, 08:58