Salesforce LiveAgent Timestamp

Question

i have this problem with liveagent chatwindow configuration ; my Timestamp for every message is located down on the page like in this picture

I want to have this result ; every message must have his own timestamp.

How can i solve this problem ?

       <!--<div id="photo-container" class="photocontainer">
               <img id="agentphoto" src=""/>
       </div>-->
       <div style="top: 7px; left: 7px; right: 7px; bottom: 7px; background: none; z-index: 0; position: absolute; ">
           <div>

               <div id="brand"/>
               <!--<div id="userPhoto">
                   <img id="agentphoto" src=""/>   
               </div>-->

           </div>
           <div id="transcript" >
               <liveAgent:clientChatAlertMessage />
               <liveAgent:clientChatStatusMessage />
               <table id="waitingMessage" cellpadding="0" cellspacing="0">
               <tr>
                   <td>{!$Label.Connect_Agent}</td>
               </tr>
               </table>


               <liveAgent:clientChatLog showTimeStamp="true" />


           </div>

           <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right: 67px;bottom: 30px">
               <liveagent:clientChatInput />
               <!--<liveAgent:clientChatSendButton label="{!$Label.Send_Chat}" />-->
               <div id="image">
                   <img src="/resource/1488906234000/InvioChat" onclick="SfdcApp.LiveAgent.Chasitor.sendMessage();"/>   
               </div>
           </div>
       </div>
       <liveAgent:clientChatEndButton label="{!$Label.End_Chat}" />
   </div>
 </div>

Styles Used

#liveAgentChatLogText .timestamp {
   display: inline-block;
   font-size: 0.85em;
   font-weight: 200;
   color: #929A9D;
   text-transform: uppercase;
   padding: 8px 0px 8px 0px;
   position: absolute;
   bottom: -30px;
}

#liveAgentChatLogText .operator .timestamp {
   left: 0px;
}

#liveAgentChatLogText .client .timestamp {
   right: 0px;
}

Answer 1

I couldn't work on your page as you have not posted the entire page code. I tried to create a Custom chat page with the required behavior. Here is the code. You can update this page with your colors and images. Hope this will help.

<apex:page showHeader="false" controller="Chatwindowcontroller" cache="true">
<style>
    html {
        padding: 20px; 
    }
    body { 
        background-color: #778899;
        overflow: hidden; 
        width: 100%; 
        height: 100%; 
        padding: 20px; 
        margin: 0 
    }
    #waitingMessage { 
        color:white;
        height: 100%; 
        width: 100%; 
        vertical-align: middle; 
        text-align: center; 
        display: none; 
     }
    #liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
    #liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
    .liveAgentChatInput {
        top:8px;
        height: 25px;
        border-width: 1px;
        border-style: solid;
        border-color: #BB0000;
        padding: 2px 0 2px 4px;
        background: #fff;
        display: block;
        width: 99%;
    }
    .liveAgentSendButton {
        display: block;
        width: 60px;
        height: 31px;
        padding: 0 0 3px;
        position: absolute;
        top: 0;
        right: -67px;
    }
    #liveAgentChatLog {
        border-color: #BB0000;
        background-image:linear-gradient(#DDEEFF, #AABBCC);
        box-shadow: 10px 10px 5px #888888;
        border-radius: 10px;
        padding:10px;
        width: auto;
        height: auto;
        top: 3px;
        position: absolute;
        overflow-y: auto;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .client{
        text-align:right;
    }
    span.client + span {
        text-align:right;
    }    
</style>

<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute; padding:10px;">
<liveAgent:clientchat >
    <liveAgent:clientChatSaveButton label="Save ChatC" />
    <liveAgent:clientChatEndButton label="End ChatC" />
    <div id="photo-container" class="photocontainer">
        Hello<img id="agentphoto" src=""/>
    </div>    
    <div id="prechatdata">
    </div>
    <div style="top: 30px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index: 0;">
        <liveAgent:clientChatAlertMessage />
    <liveAgent:clientChatStatusMessage />
    <table id="waitingMessage" cellpadding="0" cellspacing="0">
    <tr>
    <td>Please wait while you are connected to an available agent.</td>
    </tr>
    </table>
    <div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute; word-wrap: break-word; z-index: 0;">
        <liveAgent:clientChatLog agentTypingLabel="Agent is typing...." visitorNameLabel="Doctor" showTimeStamp="true" />
    </div>
    <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right: 67px;">
        <liveagent:clientChatInput /><liveAgent:clientChatSendButton label="SendC"/>
    <liveAgent:clientChatFileTransfer />
    </div>
    </div>
</liveAgent:clientchat>
</div>
</apex:page>

Chat Screen