• listinline displays vertically instead of horizontally.

    By Ronald B Hall 2 years ago

    Our developers' new applications are currently having an issue with listinline displaying on a webpage page vertically instead of horizontally, however, this is not the issue with Xpages created in the past. Currently, the libraries we are using belong to the ExtensionLibraryOpenNTF-901v00_17.20160428-0214 update. Below is the code the developers use, source, and a snapshot of the issue:

    Code:


    <xp:view xmlns:xp=“http://www.ibm.com/xsp/core”

    xmlns:xe="http://www.ibm.com/xsp/coreex">
    
    <xp:table>
                            <xp:tr>
                                <xp:td>
                                    &amp;#160;&amp;#160;
                                    <xe:popupMenu id="popupMenu2"
                                        styleClass="button"
                                        style="background-color:rgb(47,53,53);color:rgb(255,255,255)"
                                        disableTheme="true">
                                        <xe:this.treeNodes>
    
                                            <xe:basicLeafNode
                                                href="https://nisd.net/partnerships/partnerships-information"
                                                label="Partnerships Information" styleClass="button">
                                            </xe:basicLeafNode>
    
                                            <xe:basicLeafNode
                                                href="https://nisdpartners.nisd.net" label="Partner Portal"
                                                styleClass="button">
                                            </xe:basicLeafNode>
                                            <xe:basicLeafNode
                                                href="https://nisd.net/partnerships/partner-perks-guidelines"
                                                label="Partner Perks Guidlines" styleClass="button">
                                            </xe:basicLeafNode>
                                            <xe:basicLeafNode
                                                label="Partnership Example: Capital Group"
                                                styleClass="button">
                                                <xe:this.href><![CDATA[https://www.youtube.com/watch?v=4bUbsMzb1aI&amp;feature=youtu.be]]></xe:this.href>
                                            </xe:basicLeafNode>
                                            <xe:basicLeafNode
                                                label="New Partners Apply" href="/NewPartnerReqX.xsp"
                                                styleClass="button">
                                            </xe:basicLeafNode>
    
                                            <xe:basicLeafNode
                                                label="Returning Partner Login" href="PartnersX.xsp"
                                                styleClass="button">
                                            </xe:basicLeafNode>
                                            <xe:basicLeafNode
                                                submitValue="CampusWishX.xsp"
                                                label="Partnership Opportunities" styleClass="button">
    
                                            </xe:basicLeafNode>
                                            <xe:basicLeafNode
                                                submitValue="VolunteerEvents.xsp"
                                                label="Partner Volunteer Opportunities"
                                                styleClass="button">
                                            </xe:basicLeafNode>
                                        </xe:this.treeNodes>
                                        <xp:eventHandler
                                            event="onItemClick" submit="true" refreshMode="complete"
                                            id="eventHandler1">
                                            <xp:this.action><![CDATA[#{javascript:sessionScope.put("vname",context.getSubmittedValue());
    

    context.reloadPage();}]]>

                                        </xp:eventHandler>
                                    </xe:popupMenu>
                                </xp:td>
                                <xp:td>
                                    &amp;#160;
                                    <xe:popupMenu id="popupMenu1"
                                        disableTheme="true"
                                        style="background-color:rgb(47,53,53);color:rgb(255,255,255)">
                                        <xe:this.treeNodes>
    
    
    
                                            <xe:basicLeafNode
                                                submitValue="PartnersbyNameX.xsp" label="Partner Perks"
                                                styleClass="button">
    
                                            </xe:basicLeafNode>
                                            <xe:basicLeafNode
                                                submitValue="VolunteerEvents.xsp"
                                                label="Volunteer Opportunities" styleClass="button">
                                            </xe:basicLeafNode>
                                        </xe:this.treeNodes>
                                        <xp:eventHandler
                                            event="onItemClick" submit="true" refreshMode="complete" id="eventHandler2">
                                            <xp:this.action><![CDATA[#{javascript:sessionScope.put("vname",context.getSubmittedValue());
    

    context.reloadPage();}]]>

                                        </xp:eventHandler>
                                    </xe:popupMenu>
                                </xp:td>
                                <xp:td id="td1">
                                    <xe:popupMenu id="popupMenu3"
                                        style="color:rgb(255,255,255);background-color:rgb(0,0,0)"
                                        disableTheme="true">
                                        <xe:this.treeNodes>
    
    
                                            <xe:basicLeafNode
                                                label="Wish List" submitValue="WishLandingX.xsp"
                                                styleClass="button">
                                            </xe:basicLeafNode>
                                            <xe:basicLeafNode
                                                label="Campus Admin Login" href="/CampusX.xsp"
                                                styleClass="button">
                                            </xe:basicLeafNode>
    
                                            <xe:basicLeafNode
                                                submitValue="VolunteerEvents.xsp"
                                                label="Volunteer Opportunities" styleClass="button">
                                            </xe:basicLeafNode>
                                        </xe:this.treeNodes>
                                        <xp:eventHandler
                                            event="onItemClick" submit="true" refreshMode="complete"
                                            id="eventHandler3">
                                            <xp:this.action><![CDATA[#{javascript:sessionScope.put("vname",context.getSubmittedValue());
    

    context.reloadPage();}]]>

                                        </xp:eventHandler>
                                    </xe:popupMenu>
                                </xp:td>
                                <xp:td>
                                    <xe:popupMenu id="popupMenu4"
                                        disableTheme="true">
                                    </xe:popupMenu></xp:td>
                            </xp:tr>
                        </xp:table>
                        <xp:br></xp:br><xp:panel style="background-color:rgb(47,53,53);width:100%" id="menuPanel" styleClass="panel">
                    <xe:listInline id="listInline1">
    
    
                        <xp:button value="PARTNER PORTAL MAIN"
                            id="button1" styleClass="button">
    
    
                            <xp:eventHandler event="onclick"
                                submit="true" refreshMode="complete">
                                <xp:this.action><![CDATA[#{javascript:sessionScope.put("vname","PartnersbyNameX.xsp");
    

    context.reloadPage();}]]>

                            </xp:eventHandler>
                            <xp:eventHandler event="onmouseover"
                                submit="false">
                                <xp:this.script><![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu4').getMenuCtor()})]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:button>
                        <xp:button id="button2" styleClass="button" value="PARTNERS">
            <xp:eventHandler event="onmouseover" submit="false">
                <xp:this.script><![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu2').getMenuCtor()})]]></xp:this.script>
            </xp:eventHandler>
            </xp:button>
            <xp:button id="button3" styleClass="button" value="EMPLOYEES">
            <xp:eventHandler event="onmouseover" submit="false">
                <xp:this.script><![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu1').getMenuCtor()})]]></xp:this.script>
            </xp:eventHandler>
            </xp:button>
            <xp:button id="button4" styleClass="button"
                value="CAMPUS">
    
                <xp:eventHandler event="onmouseover" submit="false">
                    <xp:this.script><![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu3').getMenuCtor()});]]></xp:this.script>
                </xp:eventHandler>
            </xp:button>
                            <xp:button id="button6" styleClass="button"
                value="">
    
                <xp:eventHandler event="onmouseover" submit="false">
                    <xp:this.script><![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu4').getMenuCtor()})]]></xp:this.script>
                </xp:eventHandler>
                            </xp:button></xe:listInline>
            </xp:panel>
        <xp:br></xp:br>
    </xp:view>
    

    b

    Source:

    xsp.ajax.renderwholetree=false
    xsp.client.script.radioCheckbox.ie.onchange.trigger=early-onclick
    xsp.persistence.mode=file
    xsp.resources.aggregate=true
    xsp.library.depends=com.ibm.xsp.extlib.library,com.ibm.xsp.extlibx.library,com.ibm.xsp.extlib.relational.library
    xsp.save.links=UseWeb

    Thanks
    Brian