daattali/colourpicker

colourpicker stuck within small splitLayout <div>

ralphwetzel opened this issue · 3 comments

ralphwetzel commented

Hi!
I would like to put two color pickers side by side in a shiny splitLayout. When clicking on the input box to open the picker, this gets stuck within the <div>.

splitpanel

The picker should 'break out' of the <div> and become the topmost layer, like e.g. the dropdown area of selectize.

Regards, Ralph

daattali commented

Can you please include a reproducible example with code

daattali commented

I don't think this is a bug specific to colourInput, because I just tested a selectInput() and the dropdown has the same behaviour. That suggests that the problem is with splitLayout

ralphwetzel commented

Thanks for your feedback.
This made me investigate in the shiny code for the way splitLayout is implemented. To my surprise it is just a hardcoded e.g. <div style="width: 50%;"> and not based on a bootstrap grid.
When using a bootstrap grid setup, colourpicker works like a charm:

tags$div(class = 'row',
  tags$div(class = 'col-xs-6',
           colourInput('color1', "Color 1:")),
  tags$div(class = 'col-xs-6',
           colourInput('color2', "Color 2:"))
)

This is a bit more coding effort - yet it's worth it.
Thanks for you support & your contribution to the shiny world!

Ralph