Блестящие вкладки скрыты широкой боковой панелью

#r #shiny

#r #блестящие

Вопрос:

У меня есть приложение с широкой боковой панелью. Когда я добавляю вкладки на главную панель, крайние левые вкладки скрываются за широкой боковой панелью. Как мне сообщить shiny, что главная панель (и, следовательно, вкладки) начинаются дальше справа?

 library(ggplot2)
library(shiny)
library(shinydashboard)
    
sidebar <- dashboardSidebar(
    tags$style(HTML(".main-sidebar{width: 350px;}")),
    subtitle = h5(HTML("amp;nbsp;amp;nbsp;Text12345amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;Text12345"), style="color:orange"),
    splitLayout(cellWidths = c(160, 160),
                textInput(inputId = "Init1", label = NULL, value = "1"),
                textInput(inputId = "Init2", label = NULL, value = "2")
                                    ))

server <- function(input, output, session) {
    df <- reactive({data.frame(Nums = as.numeric(c(input$Init1, input$Init2)), y = 0)}) 
                             
    output$plot2 <- renderPlot({
        dat <- df()
            
        ggplot(dat)  
            geom_point(aes(x = Nums, y = y))
        }) 
  } 
  
ui <- dashboardPage(header = dashboardHeader(), 
    sidebar = sidebar,
    body = dashboardBody(mainPanel(width = 12, 
        tabsetPanel(type = "pills",
            tabPanel("Tab1", 
                fluidRow(column(6, offset = 1, box(title = "Plot", 
                                plotOutput("plot2"), width = "100%")))),
            tabPanel("Tab2", verbatimTextOutput("summary")),
            tabPanel("Tab3", verbatimTextOutput("table"))))))

shinyApp(ui, server) 
 

Ответ №1:

Вам нужно добавить поле слева к элементу CSS, содержащему тело, т.е. content-wrapper Я добавил столько пикселей, сколько ширина боковой панели: 350 пикселей. Кстати, при большей ширине боковой панели она не сворачивается полностью.Это также можно исправить с помощью CSS.

 tags$style(HTML(".main-sidebar{width: 350px;}
                  .sidebar-collapse .main-sidebar {display:none;}
                  .content-wrapper{margin-left:350px;}"))