Bonjour,
Voila je rencontre un petit problème avec mon code.
Je dois surement utiliser une mauvaise façon avec mon HTML et mon CSS.
Je fais un t'chat où 2 utilisateurs communiquent.
Les messages de l'uns sont à droite, ce de l'autre, à gauche. Chacun d'une couleur différente.
J'ai mis un background-color sur mon texte, et y ait mit du padding, mais ça se découpe sur l'extrémité gauche ou droite :/
Ce que je fais
<div class="panel-body u-chat-messages" scroll-glue/>
<ul class="media-list" scroll-glue/>
<span ng-repeat="dialogue in vm.dialogues" class="animated fadeIn">
<li ng-if="vm.user.id == dialogue.author_id" class="media u-message">
<span class="media-body">
<p class="text-right">
<span class="u-right-message">
{{ dialogue.message }}
</span>
</p>
</span>
</li>
<li ng-if="vm.user.id != dialogue.author_id" class="media u-message">
<span class="media-body">
<p>
<span class="u-left-message">
{{ dialogue.message }}
</span>
</p>
</span>
</li>
</span>
</ul>
</div>
.u-chat-messages {
height: 500px;
overflow-y: scroll;
}
.u-chat-messages li {
border-radius: 0px;
}
.u-chat-messages .u-message {
margin: 5px 10px 0px 10px;
border-radius: 5px;
}
.u-chat-messages .u-message p{
color: white;
}
.u-chat-messages .u-message .u-left-message {
background-color: $u-blue;
padding: 4px 32px 13px 8px;
}
.u-chat-messages .u-message .u-right-message {
background-color: $u-orange;
padding: 5px 10px 13px 8px;
}
Ce que je veux
http://hpics.li/b42ee36
Ce que j'obtiens
http://hpics.li/6fa07bf