change tabpanel direction

Forum to discuss the new web client version of Servoy.

change tabpanel direction

Postby wichmann » Wed Oct 07, 2020 10:17 am

Hi,
i would like to change the direction in the tabpanel (bootstrapcomponents-tabpanel) from top to right.
Different attempts with css like "float: left" did not bring success.
Is this even possible?

BR
Andreas
DataBit GmbH
Mühletobel
CH-9217 Neukirch an der Thur
wichmann
 
Posts: 23
Joined: Fri Apr 12, 2013 2:44 pm

Re: change tabpanel direction

Postby paronne » Thu Nov 05, 2020 9:54 am

Hi Andreas,

to achieve that you need to target different element within the bootstrap-tabpanel in CSS.
Specifically the tabpanel has such feature: when there are more tabs than available width, the tabpanel will have some sort of pagination allowing the user to navigate tabs.
Changing the direction "top-right" you will have to drop such feature.

Try this CSS:

Code: Select all
/* use 100% of available width and disable tabs pagination */
.bts-tabpanel > .nav-tabs {
   min-width: 100%;   
}
/* align tabs to the right */
.bts-tabpanel .nav-tabs li {
   float: right;
}


Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: change tabpanel direction

Postby wichmann » Mon Nov 09, 2020 11:52 pm

Hi Paolo,

so far so good, but when I try your code, the upper taps disappear, but no tabs appear on the right side. :roll:

Regards
Andreas
DataBit GmbH
Mühletobel
CH-9217 Neukirch an der Thur
wichmann
 
Posts: 23
Joined: Fri Apr 12, 2013 2:44 pm

Re: change tabpanel direction

Postby paronne » Tue Nov 10, 2020 6:06 pm

Hi Andreas,

i tried the CSS on the Bootstrap Tabpanel. Is working for me.
is this the result you expect (see image below) ?

Image

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: change tabpanel direction

Postby wichmann » Fri Nov 13, 2020 12:43 am

Hi Paolo

no, the result should look like the image below.

screenshot_4181.png


BR
Andreas
You do not have the required permissions to view the files attached to this post.
DataBit GmbH
Mühletobel
CH-9217 Neukirch an der Thur
wichmann
 
Posts: 23
Joined: Fri Apr 12, 2013 2:44 pm

Re: change tabpanel direction

Postby paronne » Mon Nov 16, 2020 1:39 pm

Hi Andreas,

sorry for my misunderstanding. Thought you were trying to align the tabs at the top/right corner.

The result you are looking for isn't officially supported by the bootstrap tabpanel.
With some advanced CSS (see below) i could get close to your desired result in Chrome/Mozilla, not in IE.
However you can easily encounter limitations, e.g. not having enough height to display all tabs, tabs not fitting would be hidden.
I strongly recommend to use a different UI pattern.

Code: Select all
.svy-wrapper > * > .bts-tabpanel > .nav-tabs {
   min-width: 42px;   
}

.svy-wrapper > * > .bts-tabpanel > .tab-content {
    right: 42px;
    top: 0;
}

.svy-wrapper > * > .bts-tabpanel > .nav-tabs {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 42px;
    bottom: 0;
    height: 100%;
}

.svy-wrapper > * > .bts-tabpanel .nav > li > a {
   writing-mode: vertical-lr;
   -webkit-writing-mode: vertical-lr;
     -ms-writing-mode: vertical-lr;
   padding: 10px 5px;
}

.svy-wrapper > * > .bts-tabpanel ~ .absoluteTopRight {
   display:none;
}


Best regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 4 guests