search

Ameobea / react-control-panel

embeddable panel of inputs for parameter setting
https://control-panel.ameo.design/
MIT License
21 stars 5 forks source link

issues using this panel with deckgl #15

Open tamir-jether opened 4 years ago

tamir-jether commented 4 years ago

I'm trying to add a control panel over a deckgl map.

even if im only adding the import line: import ControlPanel, { Button, Checkbox, Multibox, Select, Text, Color, Range, Interval, Custom, } from 'react-control-panel';

My deck gl map almost disappears entirely, and i get a page of 5% the deckgl map, 95% white screen.

Removing the import fixes that. I wonder if im doing anything wrong or misses something.

Thanks!

Ameobea commented 4 years ago

Hey, that sounds like a CSS conflict.

I forked the base of this from the base control-panel project and looking at their code it seems that they used a lot of generic class names like .container. So it's possible that either DeckGL or your own code has a class like .container or .control-panel that is getting its styles destroyed by react control panel's when it's imported in.

Could you check and see if that's the case? If so, I can look into tagging a release with more specific class names for some of the internals. I think it would be a good change to have in general tbh.

Thanks for reporting this btw