Как исправить положение основной панели в блестящем

Question

У меня есть следующая функция пользовательского интерфейса, для которой я хочу сделать карту основной панели фиксированной, поэтому, когда я прокручиваю боковую панель, она не должна прокручиваться вместе с ней.

Также, как я могу удалить пробел между боковой панелью и главной панелью.

ui <- fluidPage(

    sidebarLayout(position="right", fluid=TRUE,

    # Sidebar panel for inputs ----
    sidebarPanel(

      #h3("Airbnb Explorer"),

      selectInput("nhd","Select Neighbourhood", choices=unique(airbnb_Data$neighbourhood), selected = NULL, multiple = FALSE,selectize = TRUE, width = NULL, size = NULL),
      uiOutput("selYear"),
      uiOutput("selRoomType"),

      plotlyOutput("ListingsPlot", height = 200), #%>% withSpinner(),
      br(),
      plotlyOutput("ListingsAvailPlot", height = 200), # %>% withSpinner(),
      br(),
      plotlyOutput("AvailPiePlot", height = 200), # %>% withSpinner(),
      br(),
      plotlyOutput("ListingsPerHost", height = 200) # %>% withSpinner()

    ),

    # Main panel for displaying outputs ----
    mainPanel(
      # Output: Histogram ----
      leafletOutput("nhdMap",width = "100%", height = "650px") #, width = "100%", height = "100%") %>% withSpinner()
    )

  )
)

Answer 1

Опция:

library(shiny)

ui <- fluidPage(

  div(
    style = "display:flex; align-items:flex-start",
    wellPanel( #~~ Sidebar ~~#
      style = "overflow-y: auto; position:fixed; width:300px; top:0; bottom:0",
      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins2", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins3", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins4", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins5", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins6", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins7", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins8", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins9", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins10", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins11", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins12", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins13", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins14", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins15", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins16", "Number of bins:", min = 1, max = 50, value = 30)
    ),
    div( #~~ Main panel ~~#
      titlePanel("Old Faithful Geyser Data"),
      style = "flex-grow:1; resize:horizontal; overflow: hidden; position:relative; margin-left: 310px",
      plotOutput("distPlot")
    )
  )
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
}

shinyApp(ui = ui, server = server)

Если вы хотите, чтобы боковая панель была справа, поменяйте местами два элемента flexbox и установите right:0для боковой панели:

ui <- fluidPage(

  div(
    style = "display:flex; align-items:flex-start",
    div( #~~ Main panel ~~#
      titlePanel("Old Faithful Geyser Data"),
      style = "flex-grow:1; resize:horizontal; overflow: hidden; position:relative; margin-right: 310px",
      plotOutput("distPlot")
    ),
    wellPanel( #~~ Sidebar ~~#
      style = "overflow-y: auto; position:fixed; width:300px; top:0; bottom:0;; right:0",
      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins2", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins3", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins4", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins5", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins6", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins7", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins8", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins9", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins10", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins11", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins12", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins13", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins14", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins15", "Number of bins:", min = 1, max = 50, value = 30),
      br(),
      sliderInput("bins16", "Number of bins:", min = 1, max = 50, value = 30)
    )
  )
)