expand tabcontainer

1
Hi there, how is it possible in css to expand the tabs in the tabcontainer to 100% automatically? At the moment all tabs are on the left.
asked
3 answers
2

Hi Daniel,

As Lukas mentioned, you can achieve this by adding some custom styles. There are several ways to achieve this, other way is to add below custom CSS to _tabcontainer.scss. This form post may help you to know more about how to add custom styles. 

Another easy way without adding any custom style is to use  ‘tab-mobile’ class. This is a helper class already available in the CSS that works similar to below code but with some more styles, you can add this class on tabcontainer and see if this fits your requirements. 

.mx-tabcontainer .mx-tabcontainer-tabs li {
    display: table-cell;
    float: none;
    width: 1%;
    text-align: center;
}

  

Hope this helps!

answered
1

Hi Daniel,

If I got you right you would like to have your tabs span the whole width of your page?

add a class (eg. ‘tabcontainer’ to your tab container)

the CSS:

 

.tabcontainer {  
    .nav-tabs {
        display: flex;
        li {
            flex: 1;
        }
    }
}

 

If you need more information about styling and how to apply it, check out Calypso – https://docs.mendix.co/howto/front-end/calypso  for versions 8.x.x :)

 

answered
0

thanks guys. Problem solved.

answered