Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding [hidden] { display: none !important ; } breaks scrolling when focusing elements outside viewport #39

Open
koendeschacht opened this issue Mar 15, 2022 · 1 comment
Open

Adding [hidden] { display: none !important ; } breaks scrolling when focusing elements outside viewport #39

koendeschacht opened this issue Mar 15, 2022 · 1 comment

Comments

@koendeschacht
Copy link

koendeschacht commented Mar 15, 2022 •
edited

When you add a style

[hidden] {
display: none !important ;
}

The table does not scroll to the right when you use the keyboard to focus a cell on the far right of the table.

Test case:

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@revolist/revogrid@latest/dist/revo-grid/revo-grid.js"></script>
  <title>test revogrid</title>
  <style>
 [hidden] {
        display: none !important;
 }
 </style>
</head>
<body>
<h1>Test revogrid</h1>

If you use the keyboard arrows to move the focused cell to the right the scroll bar does not follow the focus.
<br><br>

<revo-grid style="height: 200px"/>
<script>
const grid = document.querySelector('revo-grid')
let columns = []
let values = []
for (let i = 0; i < 20; i++) {
  values.push({})
}
for (let col = 0; col < 40; col++) {
  columns.push({ prop: `col${col}`, name: `col${col}` })
  for (let i = 0; i < values.length; i++) {
    values[i][`col${col}`] = `col${col}`
  }
}

grid.columns = columns
grid.source = values
</script>
</body>
</html>

You can also try this it at

https://koendeschacht.be/test_revogrid.html
@koendeschacht koendeschacht mentioned this issue Mar 15, 2022
Open
@manoharbabu-2007
Copy link

hi ,
i m manohar, i have doubt on revo-grid concept in playwright,
can u explain how to read revogrid data for playwright.
i tried below line in playwright
const grid = document.querySelector('revo-grid');

error showing 'document' is undefined
so ,please explain reading revogrid data for playwright automation.

@koendeschacht koendeschacht mentioned this issue Mar 21, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@koendeschacht @manoharbabu-2007