Streaming live at 10am (PST)

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,


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


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


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: