Question

我最近添加了一个简单的ZK ThemeProvider，它添加了一些CSS文件，工作正常，但似乎有一个奇怪的副作用...我的索引页面看起来像这样...

<?page id="iframe" title="${labels.title}"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver" ?>
<zk>
   <include src="/zk/content/outerContainer.zul" id="outerContainer" sclass="outerContainerLayout" apply="com.example.RootComposer"/>
</zk>

但不知何故，ZK最终将这种风格融入了include-div ......

style="width:100%;height:100%;"

100％的宽度和高度不正确，但我不知道它们来自哪里。有趣的是，它恰好包括 - 不包括以下内容。除此之外，当我尝试将事物包装到另一个包含时 - 两者都获得100％，但仍然不是层次结构中的包含。

任何人都知道zk会添加这种奇怪的风格吗？

Answer 1

解决方案位于documentation：

如果此组件是其父组件的唯一子组件，则为默认宽度和身高将变为100％。

不知何故，只有在使用ThemeProvider时才会发生这种情况（或者之前还有一些其他副作用阻止它）。无论如何，在我的索引页面添加一个（隐藏的）空div解决了这个问题：

<?page id="iframe" title="${labels.title}"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver" ?>
<zk>
   <include src="/zk/content/outerContainer.zul" id="outerContainer" sclass="outerContainerLayout" apply="com.example.RootComposer"/>
   <div sclass="hidden"/> <-- Cannot have a poor, sad, alone include -->
</zk>

现在include-div的样式是空的，应该是这样。

ZK ThemeProvider设置包含元素样式宽度100％

1 个答案: