首页 > 解决方案 > 袖口列表未显示

问题描述

我正在使用 Angular.JS 和 tizen 来创建智能电视应用程序。我想获得要在我的视频应用程序上显示的字幕列表,但我不断收到此错误:“错误:caph-list 的容器和模板视图应该有自己的大小,例如宽度和高度。”

在我的主要 html 上,我在这里有一个“设置”指令: <settings></settings>

它使用 settings.html 在这里显示一个 caph 列表: <caph-list container-class="container" wrapper-class="setting-wrapper" items="item in subtitles"> <div class="item" focusable>{{item}}</div> </caph-list>

我已经在我的 settings.html 中尝试了容器和包装器的各种设置,例如:

<div class="container">
    <div class="wrapper">
        <caph-list container-class="container" wrapper-class="setting-wrapper" items="item in 
subtitles">
<div class="item" focusable>{{item}}</div> 
        </caph-list>
    </div>
</div>

但我仍然遇到同样的错误。

这是容器和包装类上使用的 CSS:

.container {
    width: 800px;
    height: 100px;
    background-color: red;
}
.setting-wrapper {
    width: 400px;
    height: 100px;
    left: 50px;
    background-color: green;
}
.item {
    width: 20px;
    height: 20px;
    background-color: blue;
    margin: 10px;
}

这是开头的字幕数组:

$scope.subtitles = ["1","2","3"]

选择视频时,此数组将更改为包含字幕信息的一系列对象。

标签: javascriptangularjstizensamsung-smart-tv

解决方案


您的容器的宽度可能为 0 px。尝试设置绝对值而不是百分比,即 800 像素而不是 60%),并确保父元素具有宽度和高度(不是 0。)


推荐阅读