Xpages combobox size bigger then inputText size

Question

I have a table with inputTexts and comboBoxes within it. In edit mode is all working fine, but in read mode, the text within the comboBoxes seem to have padding, but they don't. I checked with Chrome and it seem that the combobox has, by default, another element inside it, a table which contains the text.

Question: How can I remove that table inside the combobox in order for the elements to align better, withouth having to put margin-left and margin-top to the combobox?

Answer 1

Use custom renderers (which is the most elegant way but also advanced).

http://openntf.org/XSnippets.nsf/snippet.xsp?id=remove-table-tag-for-listboxes-in-read-mode-for-all-instances-in-one-go

Answer 2

You can use the rendered property. Show comboBox only if document is in editmode

rendered="#{javascript:document1.isEditable()}"

and add a computed field which shows the value as plain text with the rendered property

rendered="#{javascript:!document1.isEditable()}"

As an alternative, you can use Brad Balassaitis' solution from his blog. He deletes nested tables onClientLoad.

Or, you work with css classes.