Ionic list item text overflow not adjusting the height of the list item
<p>Code:
</p>

<pre><code>&lt;ion-header-bar align-title="center" class="bar-positive"&gt;
    &lt;div class="button button-clear" ng-click="closeGlobalTaskModal()"&gt;Cancel&lt;/div&gt;
    &lt;h1 class="title"&gt;Add Global Task&lt;/h1&gt;
    &lt;div class="button button-clear" ng-click="saveAndCloseGlobalTaskModal()"&gt;Done&lt;/div&gt;
&lt;/ion-header-bar&gt;

&lt;ion-content&gt;
    &lt;form class="list item-text-wrap"&gt;
        &lt;!-- GLOBAL TASK NAME BOX START --&gt;
        &lt;label class="item item-input"&gt;
        &lt;input type="text" placeholder="Enter Global Task Name" ng-model="globalTask.taskName" ng-keyup="maxLengthValidation()"&gt;
        &lt;h6 class="eag-character-count"&gt;{{globalTask.taskName.length}}/{{maxLength}}&lt;/h6&gt;

        &lt;/label&gt;
        &lt;!-- GLOBAL TASK NAME BOX END --&gt;
        &lt;ion-item class="item-divider"&gt;Category:&lt;/ion-item&gt;
        &lt;!-- SEARCH BOX START --&gt;
        &lt;label class="item item-input" name="Search"&gt;
            &lt;i class="icon ion-search placeholder-icon"&gt;&lt;/i&gt;
            &lt;input type="search" placeholder="Search" ng-model="globalTask.task"&gt;
        &lt;/label&gt;
        &lt;!-- SEARCH BOX END --&gt;
        &lt;!-- GOBAL TASK CODES (ng-repeat) START --&gt;
        &lt;label class="item item-radio" collection-repeat="globalTaskItem in globalTaskList | filter:globalTask.task"&gt;
            &lt;input type="radio" name="group" ng-model="SelectedValue" ng-click="selectedGlobaltask(globalTaskItem)" ng-checked="{{checked}}"&gt;
            &lt;div class="item-content"&gt;
                {{globalTaskItem.standardCodeName}}
            &lt;/div&gt;
            &lt;i class="radio-icon ion-checkmark"&gt;&lt;/i&gt;
        &lt;/label&gt;
        &lt;!-- GOBAL TASK CODES (ng-repeat) END --&gt;
        &lt;!-- NO RESULTS MESSAGE START --&gt;
        &lt;label class="item" ng-if="results.length == 0"&gt;
            &lt;strong&gt;No results found...&lt;/strong&gt;

        &lt;/label&gt;
        &lt;!-- NO RESULTS MESSAGE END --&gt;
    &lt;/form&gt;
&lt;/ion-content&gt;
</code></pre>

<p></p>

<p>Screenshot of issue:
<a href="https://i.stack.imgur.com/aryO1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aryO1.png" alt="Screenshot of the issue"></a></p>

<p>So I've got a bit of a messy ng-repeating list of radio buttons here. Some of them will have text that is too long for the width of the item and as such truncates with ellipsis. I've included the ionic class "item-text-wrap" at the list level (I've also tried at the item level with the same result) and it is working, however the height of the item does not adjust to the content when it's pushed down a line.</p>

<p>Do you know why this is happening/what I can do to fix this?</p>

<p>Thanks in advance!</p>