I use CSS speech bubble (http://nicolasgallagher.com/pure-css-speech-bubbles/demo/) in order to implement a chat.
This is an example of screen I ended up with:
The blue bubble is a message from me and the red is from a counterpart.
The piece of code I wrote is:
<p class="inset list" ng-repeat="message in messages | orderBy:'id'"
ng:class="{ true:'triangle-right right', false:'triangle-right left'}
[message.sender == {{ user }} ]">
{[{ message.body}]}
</p>
while {[{ }]} is a symbol of angular parameter.
I would like that the width of the bubble will be fit to the length of the text inside. Please pay attention that the message inside one bubble may include several rows so the width needs to fit to the longest row.
In addition, the blue bubbles need to be alignment to the right.
I tried to insert function for ng-style as function of message.body but I didn't succeed to make the width changed as I wanted...
It would be very kind if one of you can write me detailed and implicit instructions...