Right-aligned elements in Shiny mainPanel
I have a Shiny app with a sidebar on the left and I want to align the graphs in the mainPanel to the right. I have tried adding style = "align:right"
to each mainPanel item and also wrap everything I can think of in div(..., style = "align:right")
. None of this worked.
You can use this example in RStudio gallery. I would like to align the output in the Table tab on the right side. Here's the relevant ui.R part:
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot", plotOutput("plot")),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
)
source to share
You can add a class to a tab Table
. In this case, I added a class to it rightAlign
. tabPanel("Table", tableOutput("table"), class = 'rightAlign')
Then you can create this tab in any normal way http://shiny.rstudio.com/articles/css.html using something like .rightAlign{float:right;}
for CSS.
library(shiny)
runApp(list(
ui = fluidPage(
tags$head(tags$style(".rightAlign{float:right;}")),
titlePanel("Tabsets"),
sidebarLayout(
sidebarPanel(
radioButtons("dist", "Distribution type:",
c("Normal" = "norm",
"Uniform" = "unif",
"Log-normal" = "lnorm",
"Exponential" = "exp")),
br(),
sliderInput("n",
"Number of observations:",
value = 500,
min = 1,
max = 1000)
),
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot", plotOutput("plot")),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"), class = 'rightAlign')
)
)
)
)
, server = function(input, output) {
data <- reactive({
dist <- switch(input$dist, norm = rnorm, unif = runif,
lnorm = rlnorm, exp = rexp, rnorm)
dist(input$n)
})
output$plot <- renderPlot({
dist <- input$dist
n <- input$n
hist(data(), main=paste('r', dist, '(', n, ')', sep=''))
})
output$summary <- renderPrint({
summary(data())
})
output$table <- renderTable({
data.frame(x=data())
})
}
)
)
source to share
sidebarPanel(
tags$style(type="text/css", "img{max-width:80%; float:right;}"),
radioButtons("dist", "Distribution type:", ....etc as before
By default, the maximum width is 100%, so you won't see if the alignment changes. Note, however, that the image does not go all the way to the right as there are multiple margins of the super-div included. You may need to change them too.
This changes all images to be right-aligned. If you don't want this, use the id or the class of the surrounding div to set the properties:
Not tested:
{#plot img{max-width:80%; float:right;}
source to share