Autocomplete list not aligned properly under selectInputText

问题

I have a selectInputText in my jsf <ice:panelPopup page which gets invoked upon clicking a button.

Issue I am facing is selectInputText has autocomplete list and the list is getting displayed in the right bottom corner of my jsf page. How can I make the autocomplete list displayed just below the selectInputText. Below is the screenshot of my selectInputText You can see my list getting appeared in the right bottom corner, I have greyed out the list values though.

Regards

Code in my jspx

<h:panelGrid id="popupBody2" width="100%" cellpadding="0" cellspacing="0" column="1">
                <ice:form id="frm">                                        
                 <tr>
<td>
                        <h:outputText value="Select City" />                        
                          <ice:selectInputText rows="10" width="300"
                        listVar="city"
                        valueChangeListener="#{bean.method}"
                        listValue="#{bean.list}">
                         <f:facet name="selectInputText">
                   <ice:panelGrid columns="3" columnClasses="cityCol">
                         <ice:outputText value="#city.state}"/>                           
                   </ice:panelGrid>
  </f:facet>
          </ice:selectInputText>           
                    <ice:panelGrid columns="2">                        
                        <ice:outputText id="country" 
                                      visible="false"  value="#{bean.currentCity.country}"/>                       
                    </ice:panelGrid>

update 1

<f:view xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ice="http://www.icesoft.com/icefaces/component"
        xmlns:t="http://myfaces.apache.org/tomahawk">
        <ice:outputDeclaration doctypeRoot="HTML"
                doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
                doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />              
        <html>
        <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
        <title>Employees List</title>
        <link rel='stylesheet' type='text/css' href='./xmlhttp/css/xp/xp.css' />
        </head>

Update 2

回答1:

this may help you http://jforum.icesoft.org/JForum/posts/list/16636.page

but I found that it will just work for the ie7 so I slightly changed the code to work in ie7,8,9. Here is my code

if (Prototype.Browser.IE || navigator.userAgent.indexOf("MSIE 8") > -1) {
                                       var savedPos = element.style.position;
                                       element.style.position = "relative";
                                       update.style.left = element.offsetLeft + "px";
                                       update.style.top = (element.offsetTop + element.offsetHeight) + "px";
                                       element.style.position = savedPos;
                                   }

回答2:

Thus I'm not able to comment directly yet (<50 rep), I post it as an answer. As BalusC stated out there is a bug in 1.8.2 which caused to render the suggestionlist somewhere else in IE8. This is an issue about relative/absolute positioning. So the solution was to override the css position-attribute for iceSelInpTxtList. Alternatively you could try to modify the enclosing container (change position attribute). I'd provide our solution, but I'm not able to access and search the code at the moment.

来源：https://stackoverflow.com/questions/9095103/autocomplete-list-not-aligned-properly-under-selectinputtext

标签

jsf

icefaces-1.8