我正在使用Extension Library Application控件在我的页面上提供左侧菜单,顶部有一个横幅。应用程序控件中禁用了诸如页脚等大多数内容。我真的不在乎它是否符合oneui,我只想要一个左菜单。
我在中心栏中有一个视图。我的问题是中心列不够宽。一些列被截断。无论如何要控制它的宽度?或者甚至禁用右栏?
或者另一个是否有一个自定义控件,就像应用程序控件只有一个左列,我可以放下一个菜单控件和一个右边的列,我可以删除一个视图?
答案 0 :(得分:2)
仅设置中心列的最小宽度。所以它总是扩展到左边的最大宽度(在浏览器中),这当然仅限于用户设备的分辨率。
首先,我粘贴了一个示例,只有在满足某个条件时才会显示右列。如果您不打算永远使用它,只需将其完全删除即可。其次,.lotusColLeft类控制左列的宽度,您可以减少它以获得更多的中心列宽度。最后,如果您决定将中间列中的内容包装器赋予固定宽度,则还需要添加overflow属性以使中心列可滚动。然而,在我看来,最后一个选项不太可取......希望它有所帮助。
CUSTOM CONTROL
<!-- CUSTOM CONTROL -->
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle"></xp:callback>
<xe:this.facets>
<!-- REMOVE THE ROW BELOW IF THE RIGHT COLUMN IS NEVER USED -->
<xp:callback facetName="facetRight" id="facetRight" xp:key="RightColumn"></xp:callback>
<xp:callback facetName="facetLeft" id="facetLeft" xp:key="LeftColumn"></xp:callback>
</xe:this.facets>
<xe:this.configuration>
<xe:oneuiApplication titleBar="false" placeBar="false"
footer="false" legal="false" productLogo="/logo.gif">
</xe:oneuiApplication>
</xe:this.configuration>
</xe:applicationLayout>
</xp:view>
XPAGE
<!-- XPAGE -->
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<style>
.lotusColLeft { width:100px }
/* UNCOMMENT THESE LINES TO SEE THE LAST OPTION IN ACTION
.hugeWidth { width:2000px }
.lotusContent { overflow-x: scroll; }
*/
</style>
<xc:layout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle" styleClass="hugeWidth">MiddlePanel</xp:panel>
<!-- REMOVE THE ROW BELOW IF THE RIGHT COLUMN IS NEVER USED, OR DEFINE ITS CONDITION -->
<xp:panel xp:key="facetRight" rendered="#{javascript:viewScope.hasView}">RightPanel</xp:panel>
<xp:panel xp:key="facetLeft">LeftPanel</xp:panel>
</xp:this.facets>
</xc:layout>
</xp:view>