Setting Split Pane divider with CSS in NG

Classic Servoy
1

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

2

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

elements.splitpane.dividerLocation = 0.7

Regards,
Paolo

3

Ok, so 1 = 100%

Sent from my ASUS_Z01KD using Tapatalk

4

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.

5

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:

1891×933 114 KB

Regards,
Paolo

6

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

7

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

8

Ok Thanks, and thanks for the request…

9

paronne:
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 ?

10

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;

	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

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

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

Regards,
Paolo