title: Nativescript: Make label span width of its content, then wrap at a max width
body: <p>I am trying to create a messaging view with a layout similar to iMessage, where a chat "bubble" is the size of its content, until it gets to be a certain width. Like this:
  <img src="https://d3vv6lp55qjaqc.cloudfront.net/items/0n3N1H3Y0E1u1w273G1u/Screenshot%202016-08-30%2015.40.42.png" alt="screenshot"></p>
  
  <p>With nativescript, I cant find a layout that will accommodate this. I tried using GridLayout, but the auto nature of the column appears to mean that it will be the size of the content, even if the content's size expands beyond the view.</p>
  
  <pre><code>&lt;GridLayout width="100%" columns="40, auto" rows="auto, 20" class="msg them" visibility="{{is_me ? 'collapsed' : 'visible'}}"&gt;
      &lt;Image class="authorimg" col="0" stretch="aspectFill" verticalAlignment="top" src="{{user.profile_photo ? user.profile_photo.sizes.tiny_square : ''}}" /&gt;
      &lt;StackLayout class="msg_text" col="1"&gt;
          &lt;Label text="{{message}}" textWrap="true" verticalAlignment="top" /&gt;
      &lt;/StackLayout&gt;
      &lt;Label class="msg_timestamp" text="{{author}}" verticalAlignment="top" row="1" colSpan="2" /&gt;
  &lt;/GridLayout&gt;
  </code></pre>
  
  <p>That produces this:
  <img src="https://d3vv6lp55qjaqc.cloudfront.net/items/3T3k1H2B3t0t1Z383c3f/Screenshot%202016-08-30%2015.44.01.png?X-CloudApp-Visitor-Id=196928" alt="screenshot"></p>
  
  <p>Notice the longer ones dont wrap, despite textWrap=true on the Label. </p>
  
  <p>The other side of the coin is this:</p>
  
  <pre><code>&lt;GridLayout width="100%" columns="40, *" rows="auto, 20" class="msg them" visibility="{{is_me ? 'collapsed' : 'visible'}}"&gt;
      &lt;Image class="authorimg" col="0" stretch="aspectFill" verticalAlignment="top" src="{{user.profile_photo ? user.profile_photo.sizes.tiny_square : ''}}" /&gt;
      &lt;StackLayout class="msg_text" col="1"&gt;
          &lt;Label text="{{message}}" textWrap="true" verticalAlignment="top" /&gt;
      &lt;/StackLayout&gt;
      &lt;Label class="msg_timestamp" text="{{author}}" verticalAlignment="top" row="1" colSpan="2" /&gt;
  &lt;/GridLayout&gt;
  </code></pre>
  
  <p>The only difference being the columns in the gridlayout, in this case its set to * (use the rest of the available area). That however, produces this:</p>
  
  <p><img src="https://d3vv6lp55qjaqc.cloudfront.net/items/0O3F1S3y1k0p2U0t0z14/Screenshot%202016-08-30%2015.47.09.png" alt="screenshot"></p>
  
  <p>Notice that the shorter messages span the whole width. I need something similar to width="auto" on the Label I guess. I cant figure out a layout that will accommodate the best of both implementations, small bubbles for little text, and wrapping bubbles for long text.</p>