Lotus Shade of Yellow

Vertically stacking members in Dojo List Text Box

Thu, 09 Feb 2012 13:05:26 -0800

The extension library provides the Dojo List Text Box (djextListTextBox) control that, connected to a value picker, makes it possible to create a list whose members are easy to remove. Using the oneUI v2.1, the default display is similar to this:

But, what if you instead wanted list members to be stacked vertically? Something like this:

With some CSS, it is actually quite easy to accomplish. First, put your djextListTextBox inside a panel and give it a style class, let's call it verticalStack. Then, edit your existing or create a new style sheet and add following:

.verticalStack span {
display: block;
margin-left: 0px !important;
}
.verticalStack a span {
display: inline;;
}

What does it all mean? If you take a look at the HTML code that the Dojo List Text Box control generates, you'll see that each list member is actually a <span> tag, which in turn contains an <a> tag that contains a <span> tag.

So, the CSS says that each <span> in the <div> with class verticalStack should have block display style. <span> tags usually have inline display style, which means that multiple <span> tags are displayed in a row, one after the other. display: block will force them to behave like <p> or <div> tags and display one beneath the other.

Now, there is a <span> within the <a> tag. And it is also affected by the block display. And that makes the close button (little x) to be displayed beneath the rest of the list member. This is taken care of by the .verticalStack a span style, which returns normal, inline, display style to all <span> tags that are within a <a> tag that is within an element with .verticalStack class applied.

Finally, using the original style, each list member has applied left margin of 5 pixels to make separetion between consecutive members.We use margin-left: 0px !important to remove that margin and make our members nicely align. The CSS is hierarchical and there are styles higher in the hierarchy that would take precedence, so we need to use !important.

That's all that is needed. Have in mind that this works if you are using oneUI, but it should point you in the right direction even if you are using other layout. And, by applying some more CSS you can easily make it look even better:

Lotus Shade of Yellow

Vertically stacking members in Dojo List Text Box

How expensive is view.getColumnValues()?

Guide: Installing Mercurial server on Red Hat Enterprise Linux

An application is born: Part 4 - Requirement Management

An application is born: Part 3 - Tools

An application is born: Part 2 - Methodology

LotusScript Symphony API broken in 8.5.3?

Solved: Symphony 3.0 installer for Lotus Notes (Domino Collaboration Express)

An application is born: Part 1 - Background

An application is born: Prologue

Resolved: iNotes problems with Domino 8.5.2 FP3

Best place for coding XPages?

Update 2: iNotes problems with Domino 8.5.2 FP3

Update: iNotes problems with Domino 8.5.2. FP3

iNotes problems after upgrading to Domino FP3

Virtualizing Lotus Domino on VMware

Communicating Notes applications

My favourite certificate

Symphony 3.0 installer for Lotus Notes - licensing clarification

Symphony 3.0 installer for Lotus Notes - another case of absurd licensing