Right-align elements in Shiny mainPanel

Question

I have a Shiny app with a sidebar on the left, and I want to align the plots in mainPanel to the right. I have tried adding style = "align:right" to every element in mainPanel, as well as wrapping everything I can think of in div(..., style = "align:right"). None of that worked.

You can use this example from the RStudio gallery. I would want to align the output in the "Table" tab to the right side. Here's the relevant part of ui.R:

mainPanel(
  tabsetPanel(type = "tabs", 
    tabPanel("Plot", plotOutput("plot")), 
    tabPanel("Summary", verbatimTextOutput("summary")), 
    tabPanel("Table", tableOutput("table"))
  )
)

Answer 1

You can add a class to the Table tab. In this case I have added a rightAlign class to it. tabPanel("Table", tableOutput("table"), class = 'rightAlign') You can then style this tab in any of the usual manners http://shiny.rstudio.com/articles/css.html using something like .rightAlign{float:right;} for the 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())
    })
  }
)
)

Answer 2

  sidebarPanel(
    tags$style(type="text/css", "img{max-width:80%; float:right;}"),
    radioButtons("dist", "Distribution type:", ....etc as before

By default, max-width is 100%, so you would not see if the alignment changes. However, note that the image does not go fully to the right, since there are a few margins of the super-div included. You will probably have to change these too.

This changes all images to right-aligned. If you do not 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;}