Yolanda Gesop asked 5 months ago
Hi!
I want to embed a formidable view in a page of my webpage. But it has a large items. So the table view is not visible at all. Maybe its because css of my web. My web have a responisve desing. But the content doesn't starts at the top left. The text or content has a small indent on left. (But in a tablet or mobile the marge is smaller).
I want to embed the register vien in a page with an horizontal slide bar to move left-right and see all the table. Is it possible? How?
I share a screenshot of the preview. The web page header is not displayed for privacy. But you can see how the table vieb doesn't starts on the left top, also yoy can see that the table continues to the right but is not seen. Also you will see the vertical slide bar on the right, but no one horizontal slide bar on the bottom.
Thanks!
Victor Font answered 5 months ago
Please login or Register to submit your answer
Hi, it is easy
1.- Install the Plugin Code Snippets
2.- In the Header and Footer area into Code Snippets, paste the next code:
.tableFixHead {
overflow-y: auto; /* make the table scrollable if height is more than 200 px */
height: 600px; /* gives an initial height of 200px to the table */
}
.tableFixHead thead th {
position: sticky; /* make the table heads sticky */
top: 0px; /* table head will be placed from the top of the table and sticks to it */
}
table thead th:first-child {
left: 0;
z-index: 2;
}
table tbody td:first-child {
position: sticky;
background: #eee;
left: 0;
z-index: 1;
}
table {
border-collapse: collapse; /* make the table borders collapse to each other */
width: 100%;
}
th,
td {padding: 6px 12px;
border: 1px solid #ccc;}
th {background: #eee;}
tr:hover {background-color: #D6EEEE;}
3.- Now in the TOP field of your View List, paste the next:
4.- Now in the LLOWER field of your view List, paste the next:
5.- Now you List View has a Vertical and Horizonatl Bar
Regards
<p>Sorry see attached pics for "Next:" step No 3 and 4, comment, it is not showing the code!</p>
I can not upload images 🙁 to explain the code for Step 3 and 4