Using bootstrap responsive form inside a dhtmlx modal window

Suite and Optimus Suite 5
#1

Hi, I am working on a dhtmlx application based on data and forms. When a user wants to edit a form, a dhtmlx modal window is opened with the whole form in it, generated from data. The current form is made of a mix of JavaScript, JQuery and dhtmlx controls and is shown in one or two columns, depending on the width of the modal window.

I want to make the form responsive to the size of the modal form. I used Bootstrap for my tests and it seems Bootstrap is using the size of the screen. Bootstrap does not seem to be able to “see” the space given by the dhtmlx modal window, so I cannot get the form to be responsive.

I would prefer (a lot) to keep the current dhtmlx modal window and use Bootstrap to get a responsive form inside of it. Is there any way to do this?

Thank you very much for you help.

PS: On a normal page, a would use (Bootstrap) a container with a single row in it, and adjust the width of my controls (label + input) to be col-xs-12, col-sm-6, col-md4, as an example, so Bootstrap would rearrange the columns and where the controls are dynamically (responsive design). I want this in my dhtmlx modal window.

I made a small JSFiddle with a bootstrap modal to show an example of what I want. The fiddle uses a bootstrap modal, while I need to do this in a dhtmlx modal window.
[url]https://jsfiddle.net/davidgourde/42ze5wgv/[/url]

#2

Hi

And what the problem? Just init window, add rotate listeners and call dhxWins.window(id).setDimension(width, height)

#3

Why should I use rotate listeners? And why should I use dhxWins.window(id).setDimension?

My goal is not to change the dimension of the window with code. My goal is to get bootstrap to react correctly to size changes made by the user. As an example: Bootstrap have classes to set the size of each div, like col-xs-12 (is the screen is super small, like mobile, the div takes all the width of the screen), col-sm-6 (if the screen is small, like a tablet, the div takes half the width of the screen). These do not work when the user change the dimension of a dhtmlx modal window, as bootstrap do not seem to be able to see and adapt to the size of the modal window’s size.

#4

Hi

We’re not responsible for Bootstrap.

Regarding DHTMLX - by the default window will not change size, so you need to do this manually. For tablet - device rotation (orientation change), for desktop - browser resize. After this you have to call setDimension()