Xpages dojo listTextBox vertical stack?

Question

How do I stack items in a djListTextBox field to line up vertically instead of horizontally? They don't even break cleanly between values when it comes to the boundaries of the cell or panel .

I saw a solution HERE, but this solution claims that values displayed in djextListTextBox are surrounded by span and a tags, and therefore I can put some css on it (e.g. "verticalStack"), but the html I get is this without any span tags around each item:

<input type="text" dojoType="extlib.dijit.ListTextBox" msep="^^" 
class="verticalStack" id="view:_id1:_id2:OneUIMainAreaCallback:NAICSCodes" 
name="view:_id1:_id2:OneUIMainAreaCallback:NCodes" value="Oilseed^^Apple 
Orchards^^Synthetic Dye">

Answer 1

This solution works for OneUI themes on 9.0.1:

<?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">
    <xp:this.beforePageLoad><![CDATA[#{javascript:
        sessionScope.test = ["aaa", "bbb", "ccc"]
    }]]></xp:this.beforePageLoad>
    <xp:this.resources>
        <xp:styleSheet
            href="/yourCssFile.css"></xp:styleSheet>
    </xp:this.resources>
    <xe:djextListTextBox
        id="djextListTextBox1"
        value="#{sessionScope.test}">
    </xe:djextListTextBox>
</xp:view>

with CSS file

.lotusInlineList span {
    display: block;
    margin-left: 0px !important;
}

.lotusInlineList a span {
    display: inline;
}