Primefaces 7: Scrollbar not moving in IE 11 and Edge browsers.

payalgupta0404 · 17 Jan 2020, 08:59

I have a pop-up with scrollbar enabled. On pressing TAB key, the scrollbar does not move and thus, the field having focus is not visible. Please provide a solution to the issue.

My application is currently supporting 4 browsers [Chrome, Edge, IE 11, Firefox] and only IE 11 and Microsoft Edge are having the problem.

Code: Select all

<!DOCTYPE html>
<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title><h:outputText value="Test Page" /></title>
</h:head>
<h:body>
	<h:form id="scrollForm"
		style="width: 300px; height: 200px; overflow: auto; margin: auto;">
		<h:panelGrid columns="1">
			<p:selectOneMenu style="width: 100px;" id="select1" tabindex="1">
				<f:selectItem itemLabel="Select 1" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select2" tabindex="2">
				<f:selectItem itemLabel="Select 2" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select3" tabindex="3">
				<f:selectItem itemLabel="Select 3" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select4" tabindex="4">
				<f:selectItem itemLabel="Select 4" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select5" tabindex="5">
				<f:selectItem itemLabel="Select 5" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select6" tabindex="6">
				<f:selectItem itemLabel="Select 6" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select7" tabindex="7">
				<f:selectItem itemLabel="Select 7" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select8" tabindex="8">
				<f:selectItem itemLabel="Select 8" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select9" tabindex="9">
				<f:selectItem itemLabel="Select 9" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select10" tabindex="10">
				<f:selectItem itemLabel="Select 10" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select11" tabindex="11">
				<f:selectItem itemLabel="Select 11" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select12" tabindex="12">
				<f:selectItem itemLabel="Select 12" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select13" tabindex="13">
				<f:selectItem itemLabel="Select 13" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select14" tabindex="14">
				<f:selectItem itemLabel="Select 14" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select15" tabindex="15">
				<f:selectItem itemLabel="Select 15" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select16" tabindex="16">
				<f:selectItem itemLabel="Select 16" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select17" tabindex="17">
				<f:selectItem itemLabel="Select 17" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select18" tabindex="18">
				<f:selectItem itemLabel="Select 18" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select19" tabindex="19">
				<f:selectItem itemLabel="Select 19" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select20" tabindex="20">
				<f:selectItem itemLabel="Select 20" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
		</h:panelGrid>
	</h:form>
</h:body>
</h:html>

kukeltje · 17 Jan 2020, 14:00

Tried 8.0RC1? checked the issuelist to see if something was fixed in the mean time?

Oh and what scrollbar are you talking about? And if you replace the p:selectOneMenu's with h: ones? Please investigate and specify a little more. And what if you remove the panelgrid?

payalgupta0404 · 20 Jan 2020, 07:45

Thanks kukeltje for looking into the issue. My application is using Primefaces 7.0.0 and there is no plan of upgrading it in near future.

Regarding the other queries:

The scrollbar mentioned here comes whenever text becomes more than specified height of the form, code from example in the post,
Code: Select all
```
<h:form id="scrollForm" style="width: 300px; height: 200px; overflow: auto; margin: auto;">
```

The issue still persists when the panelgrid component is removed.

It works fine when the p:selectOneMenu's are replaced with h:selectOneMenu's.

Please provide a solution for the same for 7 version.

kukeltje · 21 Jan 2020, 09:50

TRY.... If it works there it is fixed by some commit. The scrollbar that appears there is a plain html one. Look at the generated source in the browser and see if that explains things. If not, try creating a plain html page that demonstrates the same problem (and compare applied css etc with other browsers). For now I don't see a direct reason it is caused by PrimeFaces

payalgupta0404 · 23 Jan 2020, 11:57

Thanks for the reply. Is Community Release available for 8.0RC1 version? If yes, please provide a link for the same so that I could try that too.

23 Jan 2020, 14:21

Code: Select all

        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>8.0.RC2</version>
        </dependency>

Add this to your pom.xml to add PrimeFaces as a repository:

Code: Select all

    <repositories>
        <repository>
            <id>primefaces</id>
            <name>PrimeFaces Maven Repository</name>
            <url>http://repository.primefaces.org</url>
            <layout>default</layout>
        </repository>
        <repository>
            <id>jitpack.io</id>
            <url>https://jitpack.io</url>
        </repository>
    </repositories>

payalgupta0404 · 13 Feb 2020, 08:19

Thanks Melloware. I will try with updated version also.

payalgupta0404 · 02 Jun 2020, 14:31

kukeltje wrote: ↑
21 Jan 2020, 09:50
TRY.... If it works there it is fixed by some commit. The scrollbar that appears there is a plain html one. Look at the generated source in the browser and see if that explains things. If not, try creating a plain html page that demonstrates the same problem (and compare applied css etc with other browsers). For now I don't see a direct reason it is caused by PrimeFaces

Hi kukeltje,
Sorry for replying too late.
I could not reproduce the issue with plain HTML code as it worked fine in both IE 11 and Edge browsers. Could you please help me on fix for this. The test code for both Primefaces and plain HTML is below.

Test XHTML Code

Code: Select all

<!DOCTYPE html>
<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title><h:outputText value="Test Page" /></title>
</h:head>
<h:body>
	<h:form id="scrollForm"
		style="width: 300px; height: 200px; overflow: auto; margin: auto;">
		<h:panelGrid columns="1">
			<p:selectOneMenu style="width: 100px;" id="select1" tabindex="1">
				<f:selectItem itemLabel="Select 1" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select2" tabindex="2">
				<f:selectItem itemLabel="Select 2" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select3" tabindex="3">
				<f:selectItem itemLabel="Select 3" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select4" tabindex="4">
				<f:selectItem itemLabel="Select 4" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select5" tabindex="5">
				<f:selectItem itemLabel="Select 5" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select6" tabindex="6">
				<f:selectItem itemLabel="Select 6" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select7" tabindex="7">
				<f:selectItem itemLabel="Select 7" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select8" tabindex="8">
				<f:selectItem itemLabel="Select 8" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select9" tabindex="9">
				<f:selectItem itemLabel="Select 9" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select10" tabindex="10">
				<f:selectItem itemLabel="Select 10" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select11" tabindex="11">
				<f:selectItem itemLabel="Select 11" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select12" tabindex="12">
				<f:selectItem itemLabel="Select 12" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select13" tabindex="13">
				<f:selectItem itemLabel="Select 13" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select14" tabindex="14">
				<f:selectItem itemLabel="Select 14" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select15" tabindex="15">
				<f:selectItem itemLabel="Select 15" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select16" tabindex="16">
				<f:selectItem itemLabel="Select 16" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select17" tabindex="17">
				<f:selectItem itemLabel="Select 17" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select18" tabindex="18">
				<f:selectItem itemLabel="Select 18" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select19" tabindex="19">
				<f:selectItem itemLabel="Select 19" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
			<p:selectOneMenu style="width: 100px;" id="select20" tabindex="20">
				<f:selectItem itemLabel="Select 20" itemValue="" />
				<f:selectItem itemLabel="Item 1" itemValue="item1" />
				<f:selectItem itemLabel="Item 2" itemValue="item2" />
			</p:selectOneMenu>
		</h:panelGrid>
	</h:form>
</h:body>
</h:html>

Test HTML Code

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<title>Test Page</title>
</head>
<body>
	<form id="scrollForm"
		style="width: 300px; height: 200px; overflow: auto; margin: auto;">
		<table>
			<tr><td>
				<select id="select1" name="select1" style="width: 100px;" tabindex="1">
					<option value="">Select 1</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select2" name="select2" style="width: 100px;" tabindex="2">
					<option value="">Select 2</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select3" name="select3" style="width: 100px;" tabindex="3">
					<option value="">Select 3</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select4" name="select4" style="width: 100px;" tabindex="4">
					<option value="">Select 4</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select5" name="select5" style="width: 100px;" tabindex="5">
					<option value="">Select 5</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select6" name="select6" style="width: 100px;" tabindex="6">
					<option value="">Select 6</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select7" name="select7" style="width: 100px;" tabindex="7">
					<option value="">Select 7</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select8" name="select8" style="width: 100px;" tabindex="8">
					<option value="">Select 8</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select9" name="select9" style="width: 100px;" tabindex="9">
					<option value="">Select 9</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select10" name="select10" style="width: 100px;" tabindex="10">
					<option value="">Select 10</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select11" name="select11" style="width: 100px;" tabindex="11">
					<option value="">Select 11</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select12" name="select12" style="width: 100px;" tabindex="12">
					<option value="">Select 12</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select13" name="select13" style="width: 100px;" tabindex="13">
					<option value="">Select 13</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select14" name="select14" style="width: 100px;" tabindex="14">
					<option value="">Select 14</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select15" name="select15" style="width: 100px;" tabindex="15">
					<option value="">Select 15</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select16" name="select16" style="width: 100px;" tabindex="16">
					<option value="">Select 16</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select17" name="select17" style="width: 100px;" tabindex="17">
					<option value="">Select 17</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select18" name="select18" style="width: 100px;" tabindex="18">
					<option value="">Select 18</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select19" name="select19" style="width: 100px;" tabindex="19">
					<option value="">Select 19</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
			<tr><td>
				<select id="select20" name="select20" style="width: 100px;" tabindex="20">
					<option value="">Select 20</option>
					<option value="item1">Item 1</option>
					<option value="item2">Item 2</option>
				</select>
			</td></tr>
		</table>
	</form>
</body>
</html>

02 Jun 2020, 15:28

Can you also try with the latest version of Edge: Version 83.0.478.37 (Official build) (64-bit)

payalgupta0404 · 03 Jun 2020, 10:24

Hi Melloware,

I downloaded the latest version of Edge: Version 83.0.478.44 (Official build) (64-bit) and the scrollbar is working fine.
But the issue still persist for IE 11 browser; do you have any information about any patch or update available for IE also?

Primefaces 7: Scrollbar not moving in IE 11 and Edge browsers.

Who is online