Xpages editbox/datepicker control not scrolling in IE 7 inside a scrollable div

Question

In my case, I need to show around 15 column in a form. So I decided to show that table inside a div with horizontal scrollable to avoid the hor-scroll to entire page.

Works fine in firefox, but the strange part is in IE 7, editboxes and date pickers were not scrolling. They are fixed. Other labels, textarea, etc., were scrolling.

But there is not css applied, I tried the same in test xpage without any css but resulting the same.

I have the doubt on the following style in default style sheet - xsp.css

.xspInputFieldEditBox {
    border: 1px solid #B3B3B3;
    height: 1.25em;
    line-height: 1.5em;
    margin: 0 0.1em;
    overflow: hidden;   <---
    position: relative; <---
}

And my table with div is like this.. Test Sample table..

<xp:div style="color: red;overflow-x: scroll;width: 600px;">
    <xp:table>
        <xp:tr>
            <xp:td>
            <xp:label value="Label" id="label1"></xp:label>
            </xp:td>
            <xp:td>
            <xp:label value="Label" id="label2"></xp:label>
            </xp:td>
            ...
            ...
            <xp:td>
            <xp:label value="Label" id="label13"></xp:label>
            </xp:td>
            <xp:td>
            <xp:label value="Label" id="label14"></xp:label>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
            <xp:inputText id="inputText1"></xp:inputText>
            </xp:td>
            <xp:td>
            <xp:inputText id="inputText2"></xp:inputText>
            </xp:td>
            ...
            ...
            <xp:td>
            <xp:inputText id="inputText13"></xp:inputText>
            </xp:td>
            <xp:td>
            <xp:inputText id="inputText14"></xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
            <xp:inputText id="inputText15">
            <xp:dateTimeHelper id="dateTimeHelper5"></xp:dateTimeHelper>
            <xp:this.converter>
            <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
            </xp:inputText>
            </xp:td>
            ...
            ...
            <xp:td>
            <xp:inputText id="inputText28">
            <xp:dateTimeHelper id="dateTimeHelper18"></xp:dateTimeHelper>
            <xp:this.converter>
            <xp:convertDateTime type="date"></xp:convertDateTime>
            </xp:this.converter>
            </xp:inputText>
            </xp:td>
        </xp:tr>
    </xp:table>
</xp:div>

I have tried in many ways by inheritting css, but no luck. Thanks in advance.

May be the below link help me but, how can I override the xsp.css for those particular styles. http://stackoverflow.com/questions/2233438/strange-scrolling-behavior-in-ie-with-checkboxes-in-a-scrollable-div — flykarthick, May 29 '13 at 09:10

Michael Saiz · Accepted Answer · 2013-05-29T09:48:48.940

1

A short solution is: If you are using the standard XPage css you have to set disableTheme="true" in your <xp:inputText id="inputText1" disableTheme="true"></xp:inputText> ,then the fields will scroll in IE7, but they will loose all css properties, so you maby have to add some styles by yourself.

so you could use:

    <xp:inputText id="inputText1"
        disableTheme="${javascript:!context.getUserAgent().isIE(6,7);}">
    </xp:inputText>

To just disable the Theme for older IE Browsers...

edited May 29 '13 at 09:48

answered May 29 '13 at 09:43

Michael Saiz

1,640
12
20

Thank you very much @Michael Saiz. It working awesome. I will take care of other css properties. I have been trying this for last 1 1/2 hours... thanks a lot.. – flykarthick May 29 '13 at 09:50
But for the date picker, its not helping me. Date picker field getting scrolled but date picker image is not scrolling... – flykarthick May 29 '13 at 10:02
Hmm.. i had the same scrol problem with IE8 and it worked for me there, also with the Datepicker filds. Or do you mean scroling the fields while picking a date? The problem with that is that when the dialog box is opening the css for the box get lodaed from the dojo/css.. – Michael Saiz May 29 '13 at 10:08

Xpages editbox/datepicker control not scrolling in IE 7 inside a scrollable div

1 Answers1