xpages - comboBox generates a table instead of span in readmode web

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

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.