Home/ Questions/Q 7050555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:09:28+00:00

I have a small piece of code that produce PrimeFaces dropdown List p:selectOneMenu ,

  • 0

I have a small piece of code that produce PrimeFaces dropdown List p:selectOneMenu, and I cannot get all the IE to look the same. First of all, here is the code

<h:form id="myForm">
    <h:panelGrid columns="3" columnClasses=",column,">
        Select Food:
        <p:selectOneMenu id="food" required="true" value="#{viewBean.selectedFood}">
            <f:selectItem itemLabel="Select One" itemValue=""/>
            <f:selectItems value="#{viewBean.foodList}"/>
            <p:ajax update=":myForm:errorFood"/>
        </p:selectOneMenu>
        <p:message id="errorFood" for="food"/>
    </h:panelGrid>
    <p:commandButton value="submit" update="myForm"/>
</h:form>

In IE8, it look like below which is horrible. The drop down list is not align with the error message.
enter image description here

both IE6 and IE7 look great (with some variation but below is how I want it to look like)
enter image description here

I try to solve this problem but adding padding-top: 16px; to the second column, which is the column that holding the drop down list, to make the drop down list align with the error message on IE8. Well this make IE8 look right, but make both IE6,7 not align any more. I try to use different doctype like

<!DOCTYPE html>
or
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

but none work. If I dont use doctype at all, then IE6,7,8, the drop down align with the error message, but since IE now in quirk mode, causing more problems then it solves. Any solution please? BTW firefox always look great.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s looking bad in IE8/9 because the <p:selectOneMenu> generates a <div> whose display property is set to inline-block by the ui-selectonemenu class. As IE6/7 doesn’t support this display property and defaults to the element’s default display (which is block for <div>), it looks good in IE6/7. Even though IE8/9 supports inline-block, it works only good on elements which are by default inline, but a <div> is by default block, so it goes havoc in positioning.

    The concrete problem in IE8/9 when using inline-block on elements which are by default block is that the baseline is completely wrong. It’s been set to the element’s text contents instead of the element itself. In your particular case, the bottom line of the text “Select One” is been set to the middle of the table cell instead of the middle of the element itself. So, the vertical alignment looks bad. One of the ways to fix this is to set the vertical alignment to top instead of (default) baseline.

    So, to fix this problem, I’d suggest to override the default style of <p:selectOneMenu> inside a <td> with the following in your custom stylesheet which you load by <h:outputStylesheet>:

    td .ui-selectonemenu {
    vertical-align: top;
}

    An alternative is to set the display property to block:

    td .ui-selectonemenu {
    display: block;
}

    As it’s entirely contained inside a <td> anyway, it won’t have any remarkable side effects in other browsers.

    • 0