flexdashboard icon indicating copy to clipboard operation
flexdashboard copied to clipboard

Reactive UI takes up entire column when used outside of sidebar

Open THargreaves opened this issue 6 years ago • 0 comments

Reproducible Example

render_issue_mre.Rmd.txt

(Remove the .txt from the end - only included so GitHub would let me upload it)

Actual Behaviour

I have two UI elements being generated in a column (the problem doesn't exist when column is a sidebar but for my actual use case it I need them to be in an actual column). The first is reactive, coming from renderUI, the second is not.

Despite there being two UI elements generated by the code, only the first can be seen when rendered. The other is there in the HTML source, it's just hidden at the bottom the div it is contained in.

Expected Behaviour

Both UI elements should be visible, one below the other.

Possible Solution

At the moment, both the output of renderUI and renderPlot are found in divs with the CSS

.chart-stage .shiny-bound-output {
    width: 100% !important;
    height: 100% !important;
}

This means that the dropdown menu is in a div with 100% height. By adding a CSS file containing

.chart-stage .shiny-html-output {
    height: auto !important;
}

to my YAML header, the UI renders correctly without affecting the rendering of the plot. I'm not sure if this is generally applicable though - what else has property .chart-stage .shiny-html-output?

THargreaves avatar Sep 20 '19 13:09 THargreaves