Allow user to resize a div or else

Hi, how can we have a page divided into 2 areas so that users can drag the border in between the two areas. This HTML5 example works ok on Chrome:

When we tried on Webflow on Chrome, the result was a box with drag able corner only.

Best Regards,

1 Like

Something like this perhaps? You’ll need flexbox and some custom code.

1 Like

Exactly like that!

Is it for sale? The custom code you have.

We should also have an option for user to change the division vertical or horizontal.


That’s all the custom code needed.

  // Resizable panel (Desktop/Tablet)
  $.getScript('', function() {
      handleSelector: ".splitter",
      resizeWidth: true,
      resizeHeight: false,
      resizeWidthFrom: 'right',
      resizeHeightFrom: 'bottom',
      onDragEnd: function() { $(window).trigger('resize'); },
      touchActionNone: true,

You’ll need panel-left and splitter elements

1 Like

Structure of the elements


searchpane is flex


panel-left has a min-width


Nice :smiley: Will need to give it a test soon… Thanks. I’ll report back when tested.


got CSS like this…

and HTML here…

I can see some differences to your code which could explain why not yet working. Must get back soon again.


PS: not asking to test-edit it but if you want, the page is the one in the folder of the pages tree:

Actually, it works now!

Javascript was at wrong place and something else which I cannot figure out what - but it works now! Great :slight_smile:

Do you have a published URL for us to look at the final product?

Here, it’s a rough test but you can see the functionality: It does not though remember the dragged position but resets to default when re-clicked. I was still not able to feed in the “style” parameter on that splitter div.

Oh those are just hover and pressed states:



I am trying something similar. The initial example link doesn’t seem to work but it’s pretty similar to this I’ve given it a test but not seem to be working at the moment.

@raulipadding you said you had put your javascript in the wrong place? How did you change it? I wonder if that is the same with mine.

At the moment I have put the custom coder here

and my html looks like this Screenshot 2020-05-31 at 13.01.32

My CSS looks like this Screenshot 2020-05-31 at 13.02.36

Here is a link to the page.

Any help would be really appreciated. thanks

Remember to put the custom code in <script> </script> tags.

1 Like