vue-datagrid
vue-datagrid copied to clipboard
revolist
Adding [hidden] { display: none !important ; } breaks scrolling when focusing elements outside viewport
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
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.
