Question

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

您可以使用RStudio图库中的this example。我想在＆＃34;表＆＃34;中对齐输出。选项卡到右侧。这是ui.R的相关部分：

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

Answer 1

您可以在Table标签中添加课程。在这种情况下，我添加了一个rightAlign类。 tabPanel("Table", tableOutput("table"), class = 'rightAlign')然后，您可以使用类似.rightAlign{float:right;}之类的内容，以任何常用方式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())
    })
  }
)
)

enter image description here

Answer 2

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

默认情况下，max-width为100％，因此您无法查看对齐方式是否更改。但请注意，图像不会完全向右移动，因为包含了超级div的一些边距。你可能也必须改变这些。

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

未经测试：

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

在Shiny主面板中右对齐元素

2 个答案: