Hi Bill Fleming,
The horizontal List view is the key here.
Add a list view and give your text in that view and make it horizontal. Also, do some styling to make your text as Tabs.
To make a list horizontal use CSS styling to achieve it.
Eg: flex stayling: display: flex; flex-direction: row;
I am sure I am missing something…
Original:
Following applied style:
display: flex;
flex-direction: row
Results:
Looks like it chopped the tab size. In addidtion to going across, I need the full width.
Hey Bill,
In the standard Mendix styling there is a class you can apply to list views to render them horizontally. You should play with these a little bit and use the styling applied to get your desired result:
lv-col-md-2 – The number is the width of the container using the basic 12 column size. So with the two there would be 6 columns per row (ie 2 * 6 = 12)
lv-col-md-3 = 4 columns
lv-col-md-4 = 3 columns
lv-col-md-6 = 2 columns
But I believe you can manipulate the styling to fit even more options on a given row.
Hope this helps!
Hi Bill,
I am adding few CSS classes here. Try using that.
.listview-horizontal > ul {
display: flex;
margin-left: 25px;
}
@for $i from 2 to 13
{
$wide : 100/$i;
.listview-hor-#{$i}
{
> ul > li {
display:inline-grid !important;
width: percentage($wide)/100;
}
}
}
.mx-listview.list-no-border {
padding-top: 10px;
}
.mx-listview.list-no-border > ul > li,
.mx-listview.list-no-border > ul > li:last-child {
border: none;
}
.mx-listview.list-no-border > ul {
display: flex;
}
.mx-listview.list-no-border > ul > li {
flex: 1 0 auto;
}
EDIT:
For 2 Objects:
For 3 Objects:
Good Lucj. :)