Dynamic Tabs

0
After trying to load the TabExtension test and encountering over 1k errors I thought I would just ask…   I want to dynamically CREATE tabs (based on a list) and use an attribute for the title.  Is it possibly to create tabs this way? If so, please advise as to how.  
asked
4 answers
0

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;

answered
0

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.

 

 

 

answered
0

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!

answered
0

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. :)

answered