Shiny mainPanel中的右对齐元素答案

【问题标题】：Right-align elements in Shiny mainPanelShiny mainPanel中的右对齐元素
【发布时间】：2014-10-12 19:33:32
【问题描述】：

我有一个闪亮的应用程序，左侧有一个侧边栏，我想将 mainPanel 中的图向右对齐。我尝试将style = "align:right" 添加到mainPanel 中的每个元素，并将我能想到的所有内容都包装在div(..., style = "align:right") 中。这些都不起作用。

您可以使用 RStudio 库中的 this example。我想将“表格”选项卡中的输出对齐到右侧。这是 ui.R 的相关部分：

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

【问题讨论】：

标签： r alignment shiny

【解决方案1】：

您可以向Table 选项卡添加一个类。在这种情况下，我添加了一个 rightAlign 类。 tabPanel("Table", tableOutput("table"), class = 'rightAlign') 然后，您可以使用 .rightAlign{float:right;} 之类的 CSS 以任何常用方式设置此选项卡的样式 http://shiny.rstudio.com/articles/css.html。

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())
    })
  }
)
)

【讨论】：

【解决方案2】：

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

默认情况下，最大宽度为 100%，因此您不会看到对齐方式是否发生变化。但是，请注意图像并没有完全向右，因为包含的超级 div 有一些边距。您可能也必须更改这些。

这会将所有图像更改为右对齐。如果你不想这样，使用 id 或周围 div 的类来设置属性：

未测试：

{#plot img{max-width:80%; float:right;}

【讨论】：