Layout is ... very large - any ideas what might cause it?

[artnaseef]

Using this:

import { ReactFormBuilder } from 'react-form-builder2';
import 'react-form-builder2/dist/app.css';

<ReactFormBuilder/>

The space between drop zone and toolbar is massive white-space, and the toolbar is filling the width of the page - it's almost as if it thinks I'm viewing on a mobile device...

Any ideas on how to track this down is appreciated.

Here is a screen shot.

[artnaseef]

Oh - just found that this project has multiple, very different, versions of boostrap.... trying to fix that.

[artnaseef]

Got bootstrap at 3.4.1 and react-bootstrap at 1.6.7

Still looks the same.

[artnaseef]

Adding this to public/index.html helps - the form builder is still taking over the entire window, but the toolbar is on the right side now:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Added right after this:

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"/>

[artnaseef]

After adding that 4.4.1 boostrap CSS, the window looks like this:

[Kiho]

You should use bootstrap 4.4.1, you can apply css like this https://github.com/Kiho/react-form-builder/blob/master/index.html#L14 if you don't want full width form builder

[joonspoon]

I was able to keep the stylesheets with the component by using Helmet.

<Helmet> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" /> </Helmet> <ReactFormBuilder />

[fadhilrachman]

Oh - just found that this project has multiple, very different, versions of boostrap.... trying to fix that.

thanks broo