How to align the items in a list ul below?

Question

How to align the items in a list ul below?

Navigation

#1 by (5 votes)
#2 by (4 votes)
#3 by (4 votes)
#4 by (4 votes)

5

The idea is to create a chat similar to skype, whatsApp, etc ... Where the messages begin to appear from the bottom up until they reach the height of the ul and the scroll bar appears.

    ul {
        list-style: none;
        height:380px;
        width:500px;
        overflow-y:auto;
        padding:5px;
        background-color:#ccc;
    }
    ul>li {
        height:80px;
        margin-bottom:5px;
        width:100%;
        background-color:#888;
    }

    <ul>
        <li>111111111111</li>
        <li>222222222222</li>
    </ul>

css layout

asked by anonymous 28.05.2015 / 21:18

4 answers

5

I do this by using the display: table and display: table-cell and vertical-align: bottom

display: table - Parent DIV Element

display: table-cell - UL child element with vertical-align: bottom

div {
  display: table;
  width: 100%;
}
ul {
  list-style: none;
  height: 340px;
  width: 100%;
  padding: 5px;
  background-color: #ccc;
  display: table-cell;
  vertical-align: bottom;
}
ul>li {
  height: 80px;
  width: 100%;
  background-color: #888;
}

<div>
  <ul>
    <li>111111111111</li>
    <li>222222222222</li>
  </ul>
</div>

28.05.2015 / 21:35

4

Do this, do you need the ul container to have the exact size of 380px as in the example, you will have to have a div on the outside with this measure for it:

ul {
    list-style: none;
   max-height:380px;
    width:500px;
    overflow-y:auto;
    padding:5px;
    background-color:#ccc;

     position: absolute;
    bottom:0;   
}
ul>li {
    height:80px;
    margin-bottom:5px;
    width:100%;
    background-color:#888;
}

<ul>
    <li>111111111111</li>
    <li>222222222222</li>
</ul>

28.05.2015 / 21:34

4

Alexander , for you to do this chat you have to work with PHP language and bank given as MYSQL because they will be responsible for storing and displaying the other person's response on the screen.

But the functional part where you send it looks something like this:

function sendMsg(){
  var send = $('.send_msg').val();
  if(send){
    $('.display_msg').append('<li>' + send + '</li>');
     $('.send_msg').val('');
     $('.display_msg').scrollTop($('.display_msg').height()); // FALTOU ESTE TRECHO
  }
}

ul {
        list-style: none;
        height:380px;
        width:500px;
        overflow-x:auto;
        padding:5px;
        border: 1px solid #333;
    }
    ul>li {
        margin-bottom:5px;
        background-color:#888;
        padding: 10px;
    }
    ul>li.receive{
        background-color:#ddd;        
    }
    .send_msg{
        border: 1px solid #333;
        height: 50px;
        width: 500px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><ulclass="display_msg">
    <li class="send">111111111111</li>
    <li class="receive">222222222222</li>
</ul>
<textarea class='send_msg'></textarea><br>
<button type="button" onclick="sendMsg()">Enviar</button>

28.05.2015 / 22:04

What is the cost of using the Google Maps API to create routes? How do I know if the calculation generated an integer?

score 4 · Accepted Answer

You create a JavaScript like this:

function updateScroll() {
    var element = document.getElementById("teste");
    element.scrollTop = element.scrollHeight;
}
updateScroll();

var timerId = window.setInterval(1, 1000);

setTimeout(function () {
    clearInterval(timerId)
}, 10000);

In CSS you do not need to change anything, but you can use the following to hide the toolbar (but it will continue to work)

ul::-webkit-scrollbar{
    display: none;

}

Just put an id in the ul and put the name of this id in Javascript in the test place.

Link JSFiddle

function updateScroll() {
    var element = document.getElementById("teste");
    element.scrollTop = element.scrollHeight;
}
updateScroll();

var timerId = window.setInterval(1, 1000);

setTimeout(function () {
    clearInterval(timerId)
}, 10000);

ul {
    list-style: none;
   max-height:380px;
    width:500px;
    overflow-y:auto;
    padding:5px;
    background-color:#ccc;

     position: absolute;
    bottom:0;   
}
ul>li {
    height:80px;
    margin-bottom:5px;
    width:100%;
    background-color:#888;
}


ul::-webkit-scrollbar{
    display: none;

}

<ul id="teste">
    <li>111111111111</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>222222sasa222222</li>
    <li>222222222222</li>
    <li>222222222222</li>
    <li>22asa</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
    <li>222222sasa222222</li>
   <li>222222sasa222222</li>
<li>222222sasa222222</li>
    
    <li>FINAL</li>
    
</ul>