Setting Split Pane divider with CSS in NG

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

Setting Split Pane divider with CSS in NG

Postby wvitpr » Mon Jun 03, 2019 7:19 am

Hi,
Is it possible to set the split pane divider location through CSS.. Ideally I want to give it a percentage eg. 70%
Regards,
Phillip Routley

Worldview IT
Sydney, Australia
User avatar
wvitpr
 
Posts: 187
Joined: Tue Apr 24, 2007 1:38 am

Re: Setting Split Pane divider with CSS in NG

Postby paronne » Mon Jun 03, 2019 8:49 am

Hi,

using CSS to change the dividerLocation is not a real public API of the splitPane;
if you are using the NGClient and an Anchored form you can set the dividerLocation to a value between 0 and 1 to use a % value of the available width, for example

Code: Select all
elements.splitpane.dividerLocation = 0.7


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

Re: Setting Split Pane divider with CSS in NG

Postby wvitpr » Mon Jun 03, 2019 8:52 am

Ok, so 1 = 100%

Sent from my ASUS_Z01KD using Tapatalk
Regards,
Phillip Routley

Worldview IT
Sydney, Australia
User avatar
wvitpr
 
Posts: 187
Joined: Tue Apr 24, 2007 1:38 am

Re: Setting Split Pane divider with CSS in NG

Postby wvitpr » Mon Jun 03, 2019 9:50 am

Hi,
I just tried it without luck, its not setting the divider based on the anchored form.. only the fixed width. So in developer form width 640, if I set the divider location to 0.5 I get 320.. not 2000 which is the width of the form anchored to the right.
Regards,
Phillip Routley

Worldview IT
Sydney, Australia
User avatar
wvitpr
 
Posts: 187
Joined: Tue Apr 24, 2007 1:38 am

Re: Setting Split Pane divider with CSS in NG

Postby paronne » Tue Jun 04, 2019 11:09 am

Hi,
is your splitpane anchored both LEFT & RIGHT ?
I have an Anchored form with a splitpane anchored both to the LEFT & to the RIGHT and i am setting the dividerLocation to 0.5 at the onLoad. It works nicely for me.
You can see here my setup: Image

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

Re: Setting Split Pane divider with CSS in NG

Postby wvitpr » Tue Jun 04, 2019 12:10 pm

Hi Paolo,
Yes its anchored both left and right, I am using CSS positioning though, not sure if that makes a difference.
Regards,
Phillip Routley

Worldview IT
Sydney, Australia
User avatar
wvitpr
 
Posts: 187
Joined: Tue Apr 24, 2007 1:38 am

Re: Setting Split Pane divider with CSS in NG

Postby paronne » Wed Jun 05, 2019 9:34 am

Hi,

yes that's it indeed. Currently it really has to be an Anchored form, not Simple CSS.
You can re-create (has to be a new form, you cannot change to Anchored your simple CSS form) the form containint the splitpane as Anchored; when the solution type is NG Client or NG Module the Anchored form type is filtered out in the new Form Wizard; you can temporarely change the solution type to Normal, create the anchored form where you will use your splitpane and finally switch back the solution type to NG.
I have created a request for R&D to look at the dividerLocation in Simple CSS forms, possibly will be supported in the future; you can follow up at https://support.servoy.com/browse/SVY-13792

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

Re: Setting Split Pane divider with CSS in NG

Postby wvitpr » Wed Jun 05, 2019 10:34 am

Ok Thanks, and thanks for the request..
Regards,
Phillip Routley

Worldview IT
Sydney, Australia
User avatar
wvitpr
 
Posts: 187
Joined: Tue Apr 24, 2007 1:38 am

Re: Setting Split Pane divider with CSS in NG

Postby wvitpr » Thu Jun 06, 2019 2:43 am

paronne wrote:Hi,

yes that's it indeed. Currently it really has to be an Anchored form, not Simple CSS.
You can re-create (has to be a new form, you cannot change to Anchored your simple CSS form) the form containint the splitpane as Anchored; when the solution type is NG Client or NG Module the Anchored form type is filtered out in the new Form Wizard; you can temporarely change the solution type to Normal, create the anchored form where you will use your splitpane and finally switch back the solution type to NG.
I have created a request for R&D to look at the dividerLocation in Simple CSS forms, possibly will be supported in the future; you can follow up at https://support.servoy.com/browse/SVY-13792

Regards


Hi,
So I am using this split pane form in combination with sidenav webcomponent, when trying to add the new form created as you suggested via the containForm property in sidenav, its not available, is this because the sidenav component is only CSS positioning ?
Regards,
Phillip Routley

Worldview IT
Sydney, Australia
User avatar
wvitpr
 
Posts: 187
Joined: Tue Apr 24, 2007 1:38 am

Re: Setting Split Pane divider with CSS in NG

Postby paronne » Thu Jun 06, 2019 9:10 pm

Hi Phillip,

i see; indeed the sidenav and other components (any other component than the default tabpanel/splitpanel component) don't allow mixing of SimpleCSS forms with Anchored forms.
If you re-create also your form with the sidenav as Anchored, you will be able to place in it the Anchored splitpane form; note you won't be able to set any SimpleCSS forms as containedform of your sidenav; i guess this won't be a problem for you since you will place the ancored splitpane in it.
If the Anchored splitpane approach finally doesn't work well for you, you can consider other options, as setting the dividerLocation at the onShow or at the onResize of the form;

Code: Select all
   var w = controller.getFormWidth();
   elements.split.dividerLocation = w/2;


Or use a styleClass and CSS, however using CSS approach the user won't be able to change the dividerLocation

Code: Select all
.split-50 > .split-panes.horizontal > .split-pane1 {
   width: 50% !important;
}

.split-50 > .split-panes.horizontal > .split-pane2 {
   left: 50% !important;
}


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


Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 3 guests