CODEWITHSUNDEEP
css
user2178521
user2178521

Reputation: 843

Display data in div from bottom to top in chat box

I have a chat message fetch data out and place in div

ORDER BY message_id DESC LIMIT 10

datas fetch out desc and limit 10 and use while loop out put all data.

the data is from top to bottom now.

however I need the data display from bottom to top

so the update message will display at bottom.

Upvotes: 0

Views: 5432

Answers (2)

redexp
redexp

Reputation: 5065

Here my solution with display: flex

<div class="messages-scroller">
  <div>
    <div class="spacer"></div>
    <div class="messages">
      <div class="message">Test</div>
    </div>
  </div>
</div>

.messages-scroller {
    position: relative;
    overflow-y: auto;
}

.messages-scroller > div {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    min-height: 100%;
}

.spaser {
    flex: 1 1 auto;
}

.messages {
    flex: 0 1 auto;
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

What you need is display: table; and display: table-cell; properties

div.wrap {
    display: table;
    height: 300px;
    width: 200px;
    background: #eee;
}

div.cell {
    display: table-cell;
    vertical-align: bottom;
    padding: 5px;
}

div.cell span {
    display: block;
    padding: 5px;
}

Demo

Upvotes: 3

Related Questions