在HTML中为ng-animation强制行高

Force row height in HTML for ng-animation

本文关键字：ng-animation HTML 中为      更新时间：2023-09-26

我有一个AngularJS模块，其中一个页面显示了一个主题和子主题表。每个主题都是一个包含两行的tbody元素:一行表示主题名称，另一行包含一个嵌套表，其中的行是子主题。每个主题都有一个展开/折叠按钮来控制子主题，即ng-显示/隐藏子主题表所在的行:

<table>
    <tbody ng-repeat="topic in topics">
        <tr>
            <td>{{topic.name}}</td>
            <td class="toggle-subtopics" ng-click="toggleSubtopics(topic)"><a href="#">Expand / collapse</a></td>
        </tr>
        <tr class="test-height" ng-show="topic.expanded">
            <td colspan=2>
                <table>
                    <tr ng-repeat="subtopic in topic.subtopics">
                        <td>{{subtopic.name}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

我希望子主题行出现/消失与ng-animation，但主要问题是，无论我做什么，我似乎无法控制这一行的高度。

小提琴

为了控制td的高度，你需要修改line-height而不是height

小提琴

代码片段:

.test-height {
    line-height: 40px !important; /* This doesn't affect the height of the row */
}

选项1:

更新代码:

.table > tbody > tr >td {
    line-height: 40px !important;
}

更新小提琴选项1

选项2:

如果你不想打乱bootstrap全局空间，你可以创建自己的类，并将其分配给单独的td

更新代码:

.fixed-height {
    line-height: 40px !important;
}

更新的小提琴选项2

Try This:

.test-height {
    height: 3px; 
   overflow:hidden;
   display:block;
}
相关文章：