bettyblocks/cli

The need to add a wrapper <div> to vendor_bundle components breaks styling

mattixittam opened this issue · 4 comments

mattixittam commented

It seems we cannot use an imported library component as the root for a PageBuilder component. The quick fix is to add a wrapper div.

However, when using for instance React-Bootstrap grid components this intermediate div breaks the styling (in bootstrap a row needs to be a direct descendant of a container, the same is true for a column and a row).

Any idea how I can get this working?

edit: related to React Drag and Drop, it seems. Here's a fix someone did, may be a direction for a solution? react-dnd/react-dnd#1003 (comment)

chielwester commented

Maybe you can wrap it in a div in dev mode only?

return B.env === 'dev' ? <div><Row><Column></Column></Row></div> : <Row><Column></Column></Row>

mattixittam commented

Doesn't really help as that means that dev mode looks vastly different from the built app. Makes it unnecessarily hard to develop imo.

chielwester commented

I know, this is just a possible workaround for now

mattixittam commented

Is a fix for this on the roadmap?

My solution for now is reimplementing some of the React-Bootstrap components as PageBuilder components. Not ideal, a bit of work, but worth it for the dev experience I think.