通过 R Shiny 中的“bslib”辅助函数包含输入时的导航栏高度

问题描述 投票:0回答:1

我试图在

navbarPage
的右侧放置一个常规的闪亮输入,但遇到了一些问题。 当我不包含输入(本例中为
selectInput
)时,导航栏的高度较小且紧凑,但当我包含输入时,导航栏的高度会增长到 ~85px 并且组件未对齐。 我已经为此苦苦挣扎了一段时间,但我的研究并没有给我带来任何胜利。 有人可以帮我指出正确的方向吗?

截图

enter image description here

代码

这是我为上面的屏幕截图整理的示例代码。

library(shiny)
library(shinyWidgets)
library(bslib)

ui <- navbarPage(
    theme = bs_theme(version = 5, bootswatch = 'sandstone'),
    tags$style(type = 'text/css', 'body {padding-top: 70px;}'),

    title = 'Test', 
    id = 'Test',
    fluid = TRUE,
    useShinydashboard(),
    tabPanel('Panel One',
       sidebarLayout(
         sidebarPanel(
           HTML('There once was a man')
         ),
         
         # Show a plot of the generated distribution
         mainPanel(
           HTML('from Nantucket')
         )
      )
    ),
    nav_spacer(),
    nav_item(
          selectInput('view_options_auto_refresh_rate', '',
                      choices = list(
                        'No Auto Refresh' = Inf,
                        '1 Minute Refresh' = 60,
                        '10 Seconds Refresh' = 10,
                        '5 Seconds Refresh' = 5,
                        '1 Second Refresh' = 1
                      ),
                      selected = Inf
          )
    )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

我确实发现复选框或操作按钮没有同样的问题。 只是选择输入。

这是来自 R Shiny 论坛的交叉帖子 (https://community.rstudio.com/t/navbar-height-when-include-input-through-bslib-helper-functions/144970)。 我已经有这个问题有一段时间了,有观点但没有答案。 我希望在这里发帖可以扩大受众范围。

css r shiny bslib
1个回答
2
投票

将您的风格改为这种风格

    tags$style(HTML(
        '
        .nav.navbar-nav .form-group.shiny-input-container {margin-bottom: 0; height: 38px;}
        .nav.navbar-nav .form-group.shiny-input-container > label {display: inline;}
        '
    )),

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.