Skip to content

Instantly share code, notes, and snippets.

@jcheng5
Last active January 21, 2020 20:40
Show Gist options
  • Save jcheng5/4633110 to your computer and use it in GitHub Desktop.
Save jcheng5/4633110 to your computer and use it in GitHub Desktop.
Demonstration of full-height layout in Shiny. The secret is "position: absolute" and top/left/right/bottom set to 0. We'll add a layout like this to Shiny, but I want it to be way more customizable/nicer than the implementation you see here, so don't get too attached to this code :)
shinyServer(function(input, output) {
output$plot <- reactivePlot(function() {
plot(cars)
})
})
horizontalSplitLayout <- function(left, right, lwidth='370px') {
bootstrapPage(
tags$head(tags$style(type="text/css", "html, body {width: 100%; height: 100%; overflow: hidden}")),
tags$div(style="position: absolute; top: 0; left: 0; right: 0; bottom: 0",
tags$div(style=paste("position: absolute; top: 0; left: 0; width:", lwidth, "; bottom: 0; overflow: auto"), left),
tags$div(style=paste("position: absolute; top: 0; left:", lwidth, "; right: 0; bottom: 0; overflow: auto"), right)
)
)
}
sidebarSplitLayout <- function(controls, main) {
horizontalSplitLayout(
left = tags$div(class="well", style="margin: 30px",
controls
),
right = main,
lwidth = '370px'
)
}
shinyUI(sidebarSplitLayout(
tagList(
textInput("foo", "Foo"),
textInput("bar", "Bar"),
textInput("baz", "Baz")
),
plotOutput("plot", width="100%", height="100%")
))
@jcheng5
Copy link
Author

jcheng5 commented Jan 25, 2013

Also see this link for an in-depth writeup of this technique.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment