html - 核心标题面板不可见?

标签 html polymer web-component

我做了一个简单的例子来显示网页中的核心标题面板( polymer 网络组件)。但我在浏览器中没有看到任何内容,并且控制台 (Chrome) 中也没有错误。

有人可以告诉我我做错了什么吗?我想我至少应该看到核心标题面板内的文本。

代码:

<!doctype html>
<html>

<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<script src="bower_components/platform/platform.js"></script>

<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
</head>

<body unresolved touch-action="auto" fullbleed vertical layout>

<core-header-panel fit>
<div class="core-header">Welcome</div>
<div class="content">Bla bla bla</div>
</core-header-panel>
</body>

</html>

最佳答案

默认情况下,core-header-panel 没有任何明确的高度,因此通常您需要告诉它填充其父级。您可以通过在标题面板上使用 fit 属性并在正文上使用 fullbleed 来完成此操作(因此正文的高度为 100%)。

我刚刚将你的代码扔进 jsbin 中,我看到标题面板的内容出现了。 http://jsbin.com/letat/2/edit

您使用的是 Chrome 还是其他浏览器?

关于html - 核心标题面板不可见?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24575310/

相关文章:

html - css 页脚图像不会显示

Polymer:从另一个脚本调用动态自定义元素的方法

html - 移动设备上的 SVG 图像无法正常显示

javascript - 将 HTML 文件转换为 PDF

javascript - polymer :我可以更改纸抽屉面板的内容吗?

javascript - 如何在 Polymer 中使纸菜单按钮下拉透明?

drop-down-menu - 动态生成的 paper 下拉菜单初始选择问题

javascript - Polymer 2.0 - "this.shadowRoot.querySelector"总是返回 null

java - Selenium - 尝试单击多个 "Remove"按钮,但出现 StaleElementReferenceException

css - CSS 选择器中的/deep/and::shadow 是什么意思?