Hi Guys,
looking to see if anybody has some suggestions for this one, I'm trying to setup some of our catalog items to use MRVS for ease in items that frequently have multiple items submitted (we were previously just having them attach an excel sheet but would like to do it all on platform).
99% of use is from customers on service portal, and as you can see from the screenshot we have quite a few options so it doesn't look that great. I can obviously extend the container to be fluid and it makes it easier to see most of the options without scrolling, but the rest of our portal pages use the fixed width so it looks a bit out of place on this one page.
I tried turning it into a flexible table with cards using some CSS on the page, and while that worked I couldn't get it to display any labels for the column headings, just the values.
Anybody got any bright ideas on how I could tackle the display of this on the portal to make it look a bit nicer for MRVS with lots of columns?
Here is the CSS I was using for the flexible table if anybody is interested:
/* Responsive MRVS Table
@media (max-width: 1534px) {
.table.table-bordered.table-striped.m-b-xs,
.table.table-bordered.table-striped.m-b-xs thead,
.table.table-bordered.table-striped.m-b-xs tbody,
.table.table-bordered.table-striped.m-b-xs th,
.table.table-bordered.table-striped.m-b-xs td,
.table.table-bordered.table-striped.m-b-xs tr {
display: block;
width: 100%;
}
.table.table-bordered.table-striped.m-b-xs thead {
display: none;
}
.table.table-bordered.table-striped.m-b-xs tr {
margin-bottom: 1rem;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 2px 4px #eee;
padding: 0.5em 0.5em 0.5em 0.5em;
}
.table.table-bordered.table-striped.m-b-xs td {
border: none;
position: relative;
padding-left: 50%;
min-height: 2.5em;
box-sizing: border-box;
background: #fff;
margin-bottom: 0.5em;
}
.table.table-bordered.table-striped.m-b-xs td:before {
position: absolute;
top: 0;
left: 0;
width: 48%;
padding-left: 10px;
white-space: normal;
font-weight: bold;
color: #333;
content: attr(data-label);
}
}
*/
Cheers!
