Sure @mdykstra
Couple things to mention first…
- This doesn’t work well on mobile, the CSS includes a media query for that.
- This whole thing works best with rows set to FLUID for both layouts and pages.
Step 1) On your details page, add a new row at the very top of the page. Inside the row and column, add an HTML component with the following HTML
<div id="detailsSidebar" class="detailsContainer"></div>
Step 2) Place your details component in it’s own row and column below the row you just created.
Step 3) For best results, your details component should be a single column.
Step 4) Get the element ID of your details component by right clicking and inspecting the details component
Step 5) On the page JS tab, add this code and update it with the ID you just got from the details component.
//Appends the details component to the HTMl component container
$(function() {
$('#detailsSidebar').append($('#x_element_page_7_3'));
});
Step 6) Add this CSS to your page CSS tab
@media only screen and (min-width: 992px) {
.detailsContainer {
background: #FAFAFA;
height: 100vh;
/*Sets the width of the side bar*/
width: 425px;
position: fixed;
top: 0;
/* Change 'left' to 'right' to move the sidebar to the right side of the screen. If moved to right side, change all instances below of 'margin-left' to 'margin-right' */
left: 0;
z-index: 5;
overflow-y: hide;
border-right: 2px solid #ccc;
padding: 10px 20px;
}
/* Shifts the whole app's page over the width of the sidebar */
.t-pagecontainer {
margin-left: 425px !important;
}
/* Shifts the breadcrumbs over the width of the sidebar */
.t-breadcrumb {
margin-left: 425px !important;
}
/* Shifts the menu over the width of the sidebar */
.navbar-default {
margin-left: 425px !important;
}
}
That should do it! You can see the end result here -> https://timyoung.tadabase.io/sidebar-details-1#!/sample-page-2/sample-data-table-details/5m9N0njzqk
