Support Article
Checkbox is selected on click of pagination Next button
SA-89555
Summary
On clicking on the Pagination Next button, the 'View all' checkbox near the header is selected.
Error Messages
Not Applicable
Steps to Reproduce
- Configure a checkbox in the header area of the screen.
- Include a grid with pagination in the body area.
- Click the Next page button.
Root Cause
The issue occurred because the CSS styles in the py-mobile-controls file are added in the pyEndUser skin. In that, the checkbox position is set as Absolute for mobile devices. However, the CSS is overridden for desktop devices. When the position is Absolute, the checkbox displays on the screen at that fixed position and is scrolled over the screen when scrolled.
.iOS .checkbox [type="checkbox"],
.microsoft.phone .checkbox [type="checkbox"],
.android .checkbox [type="checkbox"] {
position: absolute;
visibility: hidden;
z-index: 1;
}
When the user scrolled down to click the Pagination Next, the checkbox is placed near Pagination Next. As a result, the checkbox on the top is selected.
Resolution
Perform the following local-change:
CSS:
.iOS .checkbox [type="checkbox"],
.microsoft.phone .checkbox [type="checkbox"],
.android .checkbox [type="checkbox"] {
position: absolute;
visibility: hidden;
z-index: 1;
}
Override the above CSS to that particular checkbox by mentioning its ID and include the below code snippet in the UserWorkForm:
<style>
#harness_id [id*="checkbox_id"] {
position:relative;
}
</style>
Published October 12, 2019 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.