离子列表项文本溢出不调整列表项的高度

时间:2016-06-03 09:13:17

标签: javascript html css angularjs ionic-framework

代码:

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

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

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

        </label>
        <!-- NO RESULTS MESSAGE END -->
    </form>
</ion-content>

问题截图: Screenshot of the issue

所以我在这里有一个混乱的重复按钮列表。它们中的一些将具有对于项目的宽度而言太长的文本,并且因此截断具有省略号。我已经加入了离子类&#34; item-text-wrap&#34;在列表级别(我也尝试在项目级别使用相同的结果)并且它正在工作,但是当项目的高度被按下一行时,项目的高度不会调整到内容。 / p>

你知道为什么会这样吗/我能做些什么来解决这个问题?

提前致谢!

1 个答案:

答案 0 :(得分:0)

这会对你有所帮助。

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;