Page 1 of 1
tabs with multiple rows
Posted: Wed Jun 20, 2018 11:51 am
by amit
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?
Re: tabs with multiple rows
Posted: Sat Jun 30, 2018 12:17 am
by admin
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
Re: tabs with multiple rows
Posted: Sat Jun 30, 2018 8:50 am
by toms
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
Re: tabs with multiple rows
Posted: Thu Jul 05, 2018 12:42 am
by admin
.
Re: tabs with multiple rows
Posted: Fri Jul 06, 2018 7:53 pm
by amit
Toms, I'd be very interested to see how you did that and I believe that should fix the display problem.
Re: tabs with multiple rows
Posted: Tue Jul 10, 2018 8:10 am
by toms
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.
Re: tabs with multiple rows
Posted: Wed Jul 11, 2018 3:21 am
by admin
amit,
I have just added this to nuBuilder...
nuSetVerticalTabs()
https://wiki.nubuilder.cloud/ ... rticalTabs
Steven
Re: tabs with multiple rows
Posted: Wed Sep 05, 2018 3:34 am
by amit
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.
Re: tabs with multiple rows
Posted: Sun Sep 09, 2018 12:10 am
by admin
.