tabs with multiple rows

amit · Unread post by **amit** » Wed Jun 20, 2018 11:51 am

I'm working on a project management form and have a number of tabs. It will break the tabs onto multiple rows. The problem is that labels are wrapped to a second line even though there is enough room to display the label "risk managment" on the first row.
Besides, the active tab (standards) overlaps in such a way that another tab (quality) is not fully visible anymore. How can the visualisation be optimised?

Unread post by **admin** » Sat Jun 30, 2018 12:17 am

amit,

You'll need to find another way.

If you put too many fields (even though you are talking about Tabs) on 1 Form the server may not be able to save anything properly because of PHP's ini settings.

Steven

toms · Unread post by **toms** » Sat Jun 30, 2018 8:50 am

Hi,

I created a script to turn the tabs into vertical arranged tabs. If you (or anyone is interested) I can publish its source code.

vertical tabs.png

Short video:
https://vimeo.com/277757547

Unread post by **admin** » Thu Jul 05, 2018 12:42 am

amit · Unread post by **amit** » Fri Jul 06, 2018 7:53 pm

Toms, I'd be very interested to see how you did that and I believe that should fix the display problem.

toms · Unread post by **toms** » Tue Jul 10, 2018 8:10 am

Here you go:

1. Create a new Object of Type HTML.
Recommended position: Top: 0, Left 0, Width 200, Height 500.

HTML:

Code: Select all

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Segoe UI", Helvetica, "Helvetica Neue", Arial, sans-serif;}

/* Style the tab */
.vtab {
    float: left;
    width: 30%;
    height: 132;
    border-right: 1px solid rgba(0, 0, 0, 0.08);  
    background-color:  #FDFDFD;

}

/* Style the buttons inside the tab */
.vtab button {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    text-align: left;
    cursor: pointer;
    margin: 0 0 3px 0;
    height: 25px;
    padding: 0px 12px;
    background-color: #F4F8F9;
    border: 1px solid #ccc;
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px;
    outline: none;
    white-space: nowrap;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333;
    border-color: rgba(0, 0, 0, 0.08);  
}

/* Change background color of buttons on hover */
.vtab button:hover {
    background-color: #eee;
    border-left: 2px solid #c01c00;

}

/* Create an active/current "vtab button" class  #e8f3ff */
.vtab button.active {
    background-color: #ffffff;;
    border-right: none;
    border-left: 2px solid #c01c00;
    
}

.vtab button:first-of-type {
    margin-top: 4px;
}


</style>
</head>

<body>
<div class="vtab" id="vtab"></div>

<script>



$(function() {
 
   var i = $('.nuTabSelected')[0].id.replace('nuTab','');   
   $('.nuTab[id^="nuTab"]').each(function (index) {  
      $(".vtab").append('<button class="tabbuttons' + ((i == index)? ' active' : '') + '" name="tabs[]" onclick="openTab(event, \''+$(this).html()+'\')">'+ $(this).html() +'</button>');
   }) 	

  // Set vtab width to the parent width
  $('button.tabbuttons').css('width',$('#vtab').parent().width());   
  $('#vtab').css('width',$('#vtab').parent().width());   
  $('#vtab').css('height',$('#vtab').parent().height());   

});

function openTab(evt, tab) {

    tabbuttons = document.getElementsByClassName("tabbuttons");
    for (i = 0; i < tabbuttons.length; i++) {
        tabbuttons[i].className = tabbuttons[i].className.replace(" active", "");
    }
    evt.currentTarget.className += " active";  
	nuSelectTabByTitle(tab);
	
	$('#vtab').parent().show();	
}	

function nuSelectTabByTitle(tab) {

    $('[id^=nuTab]').each(function (index) {
        if ($(this).html() == tab) {
            var tabNumber = +index -1;
            var e = document.getElementById('nuTab' + tabNumber);
            nuSelectTab(e);
            $('.nuTab[id^="nuTab"]').hide();
            return true;
        }
    });
}

</script>
</body>

2. Add this JS to your form:

Code: Select all

if (nuFormType() == 'edit') {

    $('.nuTab[id^="nuTab"]').hide();
    $('#vtabs').show();
    $('#nuTabHolder').height(1);
    $('#nuTabHolder').css({"height":"1px"} );
}

You're done. You might want to modify the css colors to match your design, since I use a custom style sheet.

Unread post by **admin** » Wed Jul 11, 2018 3:21 am

amit,

I have just added this to nuBuilder...

nuSetVerticalTabs()

https://wiki.nubuilder.cloud/ ... rticalTabs

Steven

amit · Unread post by **amit** » Wed Sep 05, 2018 3:34 am

Guys, thank you! I think I'll go for Tom's solution as it looks a little more attractive from a visual point of view.

Unread post by **admin** » Sun Sep 09, 2018 12:10 am

nuBuilder Forum

tabs with multiple rows

tabs with multiple rows

Re: tabs with multiple rows

Re: tabs with multiple rows

Re: tabs with multiple rows

Re: tabs with multiple rows

Re: tabs with multiple rows

Re: tabs with multiple rows

Re: tabs with multiple rows

Re: tabs with multiple rows