spinner is broken in a div with display:table

[liuliu]

hi,

example is here, spinner is not shown correctly, see the screen shot.

<a4j:outputPanel layout="block" style="display:table;border-collapse:separate;border-spacing:2px">
    <rich:inputNumberSpinner inputSize="4" maxValue="10000" style="display:table-cell;"/>
    <h:inputText  style="display:table-cell;"/>
</a4j:outputPanel>

[bleathem]

The Input number spinner explicitly sets the display property to "inline-block":

https://github.com/richfaces/richfaces/blob/master/framework/src/main/resources/META-INF/resources/org.richfaces/input/i…

If you want to change this attribute, you will have to change (many) additional properties to get the spinner to display correctly.

IOW, setting the display property of the inplaceNumberSpinner to table-cell is unsupported.

[liuliu]

fine, it is ok that spinner dont support display:table-cell. but I tried also:

1 wrap the spinner into a span with display:table-cell

2 put the spinner and inputtext into a panelgrid

3 put the spinner and inputtext into a normal div

All of them dont work. I just want to vertical-align the two components, what should i do?

[bleathem]

What is the nature of the failure for these other things you have tried?  Have you tried making sure the spinner component has enough width to render correctly?

[liuliu]

hi,

sorry, my last question is too fast. in case 2 and 3, add vertical-align can do the thing. but i prefer it works on case 1, it is still shown like screen shot.

1.
<a4j:outputPanel layout="block" style="display:table;border-collapse:separate;border-spacing:2px">
    <a4j:outputPanel layout="block" style="display:table-cell;vertical-align:middle;">
        <rich:inputNumberSpinner inputSize="4" maxValue="10000" />
    </a4j:outputPanel>
    <h:inputText  style="display:table-cell;vertical-align:middle;"/>
</a4j:outputPanel>
2.
<h:panelGrid columns="2" cellpadding="2">
    <rich:inputNumberSpinner inputSize="4" maxValue="10000" style="vertical-align:middle;"/>
    <h:inputText  style="display:table-cell;vertical-align:middle;"/>
</h:panelGrid>
3.
<a4j:outputPanel layout="block" >
    <rich:inputNumberSpinner inputSize="4" maxValue="10000" style="vertical-align:middle;"/>
    <h:inputText  style="vertical-align:middle;"/>
</a4j:outputPanel>

[bleathem]

The rich:inputNumberSpinner display fine in a table element, so I suspect there is some other css interfering.  Can you try switching to using a table element just to confirm whether it works or not?

[liuliu]

The case 2 is a table element, it works fine. It is a vertical-align:top on the span or input who creat the problem, but when i disable it in firebug, I get others css problem with spinner.

[liuliu]

another question about spinner, how can I put empty in a spinner? everytime the spinner changes empty to 0.

[bleathem]

liumin hu wrote:

another question about spinner, how can I put empty in a spinner? everytime the spinner changes empty to 0.

Please file a jira issue re: setting the value to empty/null.

[liuliu]

done

[RF-13289] inputspinner : setting the value to empty/null - JBoss Issue Tracker