简体   繁体   English

闪亮:如何增加tabsetPanel的宽度以覆盖sidebarPanel右侧的整个区域?

[英]Shiny: How to increase the width of tabsetPanel to cover the whole area to the right of the sidebarPanel?

I want to create a shiny app in which there is a sidebarPanel and tabesetPanel. 我想创建一个闪亮的应用程序,其中有一个sidebarPanel和tabesetPanel。

I created the app using the code below 我使用以下代码创建了应用

library(shiny)
library(ggplot2)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
h1("Shiny app"), 
tags$hr(),
h2("several options here"), 
width =2),
mainPanel(uiOutput("tb"))
)
)
server <- function(input,output){
output$diamonds1 <- renderPlot({
ggplot(diamonds, aes(x=carat, y=price, col=clarity)) + 
                     geom_point(alpha=0.5)+ facet_wrap(~color, scales="free")
})
output$diamonds2 <- renderPlot({
ggplot(diamonds, aes(x=carat, y=price, col=clarity)) + 
                     geom_point(alpha=0.5)+ facet_wrap(~cut, scales="free")
})
output$info <- renderPrint({
nearPoints(diamonds, input$plot_click, threshold = 10, maxpoints = 1,
           addDist = TRUE)
})    
output$tb <- renderUI({
tabsetPanel(tabPanel("First plot", 
                     plotOutput("diamonds1")),
            tabPanel("Second plot", 
                     plotOutput("diamonds2", click = "plot_click"), 
                     verbatimTextOutput("info")))      
})
}
shinyApp(ui = ui, server = server)  

I want the tabsetPanel to cover the whole area to the right of the sidebarPanel. 我希望tabsetPanel覆盖sidebarPanel右侧的整个区域。

As suggested in the answers of this question , I tried the following 根据此问题的答案 ,我尝试了以下方法

div(, class ="span12") 

and

),  style='width: 1000px;)

However, still the tabset panel and the plots don't cover the whole area to right of the sidebarPanel. 但是,选项卡集面板和绘图仍不能覆盖sidebarPanel右侧的整个区域。

Any suggestions how to do that? 有什么建议怎么做?

Update 更新

Thanks to @K. 感谢@K。 Rohde's answer, the plot now covers the whole height of the page next to the sidebarPanel but still doesn't cover the whole width 罗德(Rohde)的回答,该图现在覆盖了sidebarPanel旁边页面的整个高度,但仍然没有覆盖整个宽度

在此处输入图片说明

Edit: Sorry for not checking my first answer. 编辑:很抱歉没有检查我的第一个答案。 But here is something that works: 但是这是可行的:

For some reason, plotOutput is broken in the sense that height = "100%" does not work, otherwise that would be a solution. 由于某种原因, plotOutputheight = "100%"不起作用的plotOutput被破坏了,否则可以解决。 But you can add css3 by hand which scales your plot according to window size with ...vh . 但是您可以手动添加css3,它根据窗口大小使用...vh缩放绘图。

Code: 码:

library(shiny)
library(ggplot2)
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      h1("Shiny app"), 
      tags$hr(),
      h2("several options here"), 
      width =2),
    mainPanel(
      uiOutput("tb")
    )
  )
)
server <- function(input,output, session){
  output$diamonds1 <- renderPlot({
    ggplot(diamonds, aes(x=carat, y=price, col=clarity)) + 
      geom_point(alpha=0.5)+ facet_wrap(~color, scales="free")
  })
  output$diamonds2 <- renderPlot({
    ggplot(diamonds, aes(x=carat, y=price, col=clarity)) + 
      geom_point(alpha=0.5)+ facet_wrap(~cut, scales="free")
  })
  output$info <- renderPrint({
    nearPoints(diamonds, input$plot_click, threshold = 10, maxpoints = 1,
               addDist = TRUE)
  })    
  output$tb <- renderUI({
    tabsetPanel(
      tabPanel("First plot", 
                         tags$head(tags$style(type = "text/css", "#diamonds1 {height:95vh !important;}")),
                         plotOutput("diamonds1")),
                tabPanel("Second plot", 
                         tags$head(tags$style(type = "text/css", "#diamonds2 {height:80vh !important;}")),
                         plotOutput("diamonds2", click = "plot_click"), 
                         verbatimTextOutput("info")))      
  })
}
shinyApp(ui = ui, server = server)  

I admit, it's more of a workaround. 我承认,这更多是一种解决方法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM