Question

I am using the Extension Library Application control to provide a left menu on my page, with a banner at the top. Most of the things like footer etc are disabled in the application control. I really don’t care if it conforms to oneui or not, I just want a left menu.

I have a view in the center column. My problem is the center column is not wide enough. Some of the columns are being truncated. Is there anyway to control it’s width? Or even disable the right column?

Or does another have a custom control that is like the application control with just a left column where I can drop a menu control and a column on the right where I can drop a view?

Answer 1

Only the min-width from the center column is set. So it always expands to the maximum width there’s left (within the browser), this of course is limited to the resolution from the users device.

First, I pasted an example below where the right column is displayed only when a certain condition is met. If you’re not intending to use it ever, just remove it completely. Second the .lotusColLeft class controls the left columns’ width, you could reduce it to gain some more width for the center column. Last, if you decide to give the content wrapper in the center column a fixed width, you need to add the overflow property as well to make the center column scrollable. This last option is however, in my opinion, less desirable… Hope it helps.

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>