Is there anyway that the search bar of the table will be floating while scrolling down not disappear like the image shown becasue it is hard for customers that we have to scroll back to the top to search.
I think that we have to use CSS can anyone demonstrate please?
I would have to use your classes, but you need to add a custom CSS class to the collection. Then, use dev tool and CTRL+SHIFT+C (windows) to find the search bar element. Use the selector to set the position to sticky. Add a top: whatever you want, and a left or right too.
The search bar can even be at the same position, but when you start scrolling, it can be fixed to the screen with the sticky position.
Of course give me a few minutes
You want it on mobile too right?
Yes, please.
Got it! Give me more time please
I was able to do it on mobile, but not on pc yet.
It’s ok for just mobile. Thank you.
Add floating-search-bar as custom CSS class in the collection.
Here is the CSS for both Desktop and Mobile view :
div:has(> label > input+button.clear-search-button) {
position: fixed;
}
div:has(>.floating-search-bar) {
overflow: auto;
height: calc(100% - 99999px);
margin-top: 0;
}
#main-root:not(:has(>div.is-mobile)) .floating-search-bar>div>div>div>div>div:first-child {
position: sticky;
top: 16px;
z-index: 100;
}
#nav-root>div::after {
content: var(--tw-content);
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
#nav-root>div span {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
opacity: 1;
}
#main-root div:has(>h2) {
display: none;
}
Here is what it looks like:
Sorry for the delay!
1 Like
Forgot to tell you to add this.
Post edited!
1 Like
Thank you man. You are the best. Could you help a little more. It seems to be an overlap between the search box with pictures and texts in mobile as an image attached
1 Like
Just to test something, can you remove the in-app filters?
What os happening on the desktop version?
Do you have other custom CSS active right now ?
No, I don’t have other custom CSS