Autocomplete list not aligned properly under selectInputText

Question

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

Doctype looks okay. Do you see this in all browsers or only in IE? Are you using ICEfaces own CSS or overriding it in some way? If you see this in all browsers and you're not overriding ICEfaces own CSS, then I'd report it as a bug to ICEfaces guys and/or check if there isn't a newer version. — BalusC, Feb 01 '12 at 12:36
I will check in all browsers tomorrow. If I do not use this code in popuppanel then autocomplete list appears just below the selectinputtext. — Jacob, Feb 01 '12 at 14:52
@BalusC I am not overriding Icefaces CSS with mine. When I tested in FF autocomplete list is not appearing at all. Firebug shows `A is null ...ar G=F-I;var A=F+$(D).getHeight();var B=E+G;if(H — Jacob, Feb 02 '12 at 04:35
Well, I'd report it as bug to them and/or upgrade. Or just post at their own forum. ICEfaces community support is not big here as at their own forum. I myself for instance have never used it so I know nothing about its specific quirks. — BalusC, Feb 02 '12 at 04:55
@BalusC In the past I have posted a few questions and did not get any response at all. I cannot try their latest releases either as my JSF version 1.0 — Jacob, Feb 02 '12 at 05:04
@BalusC FYI, I have changed my popuppanel model value to false and then autoselection list values are getting displayed correctly under inputext however inputtext is appearing just below my datatable. Quite strange! — Jacob, Feb 02 '12 at 08:13

score 1 · Accepted Answer · answered Aug 31 '12 at 07:36

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;
                                   }

score 1 · Answer 2 · answered Feb 02 '12 at 11:58

1

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.

answered Feb 02 '12 at 11:58

Dennis Bayer

109
5

Thanks for your answer. I would appreciate if you could provide some solutions as I am struggling with this for the past 2 days. Appreciated. – Jacob Feb 02 '12 at 12:01
Hm, as far I can remember we have the following setup: `auotcompletetxt(position:static)`, `iceSelInpTxtList(position:absolute)`. In addition we added `` in our main template so that IE 8 uses browsermode: ie8 and documentmode: ie8-standard. – Dennis Bayer Feb 02 '12 at 12:15
One doubt is I have selectInputText, I do not have autocomplete and inputList. – Jacob Feb 02 '12 at 15:54
Hi, I just stumbled on this. [Regression ICE-4974, caused by ICE-5465 - ice:selectInputText list not positioned correctly in IE8](http://www.icefaces.org/JForum/posts/list/16636.page). Perhaps it's useful for you. – Dennis Bayer Feb 07 '12 at 14:49
Thanks for pointing to that article. I have seen a similar article on the same issue. Icefaces fixed that issue in 2.0 release. Seriously thinking of moving to primefaces due to the fact that icefaces I have encountered a lot of bugs and issues. From my friends I came to know that primefaces is better when compared to Icefaces and their support is not that good for non enterprise customers. – Jacob Feb 07 '12 at 18:15

Autocomplete list not aligned properly under selectInputText

2 Answers2

Linked