title: JSQMessagesViewController message bubbles are aligning irregular
body: <p>I am developing an app using <code>JSQMessagesViewController</code>. But there is problem that message bubbles are aligning irregular order in <code>collectionView</code>. </p>
  
  <p>Here is a Screenshot</p>
  
  <p><a href="https://i.stack.imgur.com/rIfO5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rIfO5.png" alt="enter image description here"></a></p>
  
  <p>Here is the code: </p>
  
  <pre><code>import UIKit
  
  class mDetailContainerViewController: JSQMessagesViewController, JSQMessagesCollectionViewDelegateFlowLayout{
  
  
      var userName = ""
      var messages = [JSQMessage]()
      let incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
      let outgoingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.greenColor())
  
      override func viewDidLoad() {
          super.viewDidLoad()
  
          self.userName = "iPhone"
  
          for i in 1...10{
  
              var sender =  (i%2 == 0) ? "Syncano" : self.userName
              var message = JSQMessage(senderId: sender, displayName: sender, text: "Text")
              self.messages += [message]
  
  
          }
  
          self.collectionView.reloadData()
          self.senderDisplayName = self.userName
          self.senderId = self.userName
          // Do any additional setup after loading the view.
      }
  
      override func didReceiveMemoryWarning() {
          super.didReceiveMemoryWarning()
          // Dispose of any resources that can be recreated.
      }
  
      override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -&gt; JSQMessageData! {
          var data = self.messages[indexPath.row]
          return data
      }
  
      override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -&gt; JSQMessageBubbleImageDataSource! {
          var data = self.messages[indexPath.row]
          if (data.senderId == self.senderId){
  
              return self.outgoingBubble
  
          }else{
  
              return self.incomingBubble
  
          }
      }
  
      override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -&gt; JSQMessageAvatarImageDataSource! {
          return nil
      }
  
      override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -&gt; Int {
          return self.messages.count
      }
  
      override func didPressSendButton(button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: NSDate!) {
          var message = JSQMessage(senderId: senderId, displayName: senderDisplayName, text: text)
          messages += [message]
          self.finishSendingMessage()
      }
  
      override func didPressAccessoryButton(sender: UIButton!) {
  
      }
  </code></pre>
  
  <p>I searched the solution a bit on the internet, but all the instructions are just complicated. I did not figure out anything. Besides, I am not sure that I found a solution. If someone will explain the solution simply, I will be pleased. </p>
  
  <p>Note: <code>JSQMessagesViewController</code> is shown in container view. </p>
  
  <p>Lastly, how can I change the send button title and text field placeholder with using localizations.</p>
  
  <p>Thanks. </p>