comboBox generates a table instead of span in read

Question

When viewing a Xpage on the web containing a table with a comboBox in a column the html generated by Domino creates a table for the combobox but a span for other components (tested currently on textFields and computedFields).
This is then rendered with a pixel of vertical alignment difference that annoys me.
How can I overcome this?

<table>
        <tbody>
            <tr>
                <td colspan="3">
                    <table id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyName">
                        <tbody>
                            <tr>
                                <td>
                                    AVANZA SWEDEN
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyShort">AVANZA SWEDEN</span>
                </td>
            </tr>
        </tbody>
    </table>

In edit mode the difference is still there but the generated html of the combobox is not a table but a select and then I can control it using css.
See picture below.

Example read mode

Example edit mode (css edited):

<xp:table>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty name:"
                    id="counterpartyName_Label1"
                    for="CounterpartyName"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:comboBox
                    id="CounterpartyName"
                    value="#{document1.CounterpartyName}"
                    required="true"
                >
                </xp:comboBox>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty short:"
                    id="counterpartyShort_Label1"
                    for="CounterpartyShort"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.CounterpartyShort}"
                    id="CounterpartyShort"
                    required="true"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Bic Code:"
                    id="bicCode_Label1"
                    for="BicCode"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.BicCode}"
                    id="BicCode"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
    </xp:table>

Answer 1

3 possible actions (in depending complexity) :

• write your own drop down component
• add a text field. Use the visible property to show/hide only one based on read/edit mode
• use css and padding (can take negative values) to move one pixel

Answer 2

I see you have accepted an answer but I am proposing an alternate solution which simply eliminates the generated HTML. I realize that this can be a tedious solution :)

I had a similar problem with XPages generating tables for checkbox group. Tim Tripcony suggested me to create a custom renderer to modify the output of the control. Its a little tricky at first but once you get a hang of it it does a pretty good job. In your case of read-only fields, it would be more simple :)

1. Create a custom renderer

Here I create a custom renderer Java class called pkg.MyRenderer. You can create this Java file in "Code > Java". Here I just output the selected value of the combo box and nothing else.

package pkg;

import java.io.IOException;
import java.io.Writer;
import javax.faces.component.UISelectOne;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.render.Renderer;

public class MyRenderer extends Renderer {
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        UISelectOne obj = (UISelectOne)component;
        Writer writer = context.getResponseWriter();
        writer.write(obj.getValue().toString());
    }

    public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    }
}

2. Register your custom renderer

Now in the Package Explorer go to "YourDatabase.nsf > WebContent > WEB-INF > faces-config.xml". There you need to register your custom renderer. You just need to make sure the component-family is same as the one to which the combo box belongs to.

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
    <render-kit>
        <renderer>
            <component-family>javax.faces.SelectOne</component-family>
            <renderer-type>pkg.MyRendererType</renderer-type>
            <renderer-class>pkg.MyRenderer</renderer-class>
        </renderer>
    </render-kit>
</faces-config>

3. Assign your custom renderer to control

As you want the custom renderer to be active only when it is in reading only mode you check for it and then set the rendererType of control as the renderer-type defined in faces-config.xml i.e. pkg.MyRendererType.

Here I check if the control comboBox1 is in read-only mode, if yes then use pkg.MyRendererType else use the control's renderer.

<xp:comboBox id="comboBox1" .....>
    <xp:this.rendererType><![CDATA[${javascript:var cb:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox1");
cb.isReadonly() ? "pkg.MyRendererType" : cb.getRendererType();}]]></xp:this.rendererType>
.....
.....
.....
</xp:comboBox>

When you run this with control on read-only mode then only the value of combo box is displayed and nothing else (no tables, yay!). And when the control is not in read-only mode then a drop-down list is shown as before.

Answer 3

problem is that the inner table has its own borders (as always: one for the table itself and one for the td) which need to be collapsed. Just create some CSS to handle this:

1. give your outer table its own style-class e.g. "myOuterTable"

2. your css would then address any table inside ".myOuterTable", like this:

   table.myOuterTable table {border-collapse: collapse;}

This works fine in both edit and read mode because only in read mode you have that extra "inner" table; in edit mode, there's nothing to be collapsed...

works even in IE, btw...

Hope it works for you

Answer 4

This code will fix all comboboxes on the page with dojo, run onClientLoad:

if("#{javascript:document1.isEditable()}" == "false"){
    // Search for all nested tables with ids
    dojo.query('table td table[id]').forEach(function(node) {
        var value = '';

        // Locate the first table cell, which contains the value
        dojo.query('td:first-child', node).forEach(function(innerNode) {
            value = innerNode.innerHTML;
        });

        // Replace the table with only the value (or a blank)
        node.outerHTML = value;
    });
}

Notes:

• Update the name of the document in line 1 to match the name of the document on your page.
• This code assumes that your combobox is already nested in a table cell. If that's not the case, you can refine the selector in line 3.
• If you run into conflicts with this affecting other tables in your page, you may need to refine the selector in line 3.