title: How to fit content to modal in angular?
body: <p>I am initializing my modal with </p>
  
  <pre><code>var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'search/profile.html',
      controller: 'ProfileController as profileCtrl'
    });
  </code></pre>
  
  <p>The CSS associated with it is </p>
  
  <pre><code>.modal-content{
      width: 100%;
      length: 100%;
  }
  </code></pre>
  
  <p>Unfortunately, for modals with lots of content, the text will overflow and the modal dimensions will not match it (the white part is the modal):</p>
  
  <p><a href="https://i.stack.imgur.com/47aKy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/47aKy.png" alt="The white part is the modal"></a></p>
  
  <p>How can I fit my content to the modal or fit the modal to the content? A hacky solution that I figured out was to just make the modal very large with length: 10000%, but that is not optimal.</p>