R闪亮的downloadbutton与其他输入元素(如dateInput)对齐

cngwdvgl 于 2023-01-28 发布在其他

关注(0)|答案(2)|浏览(124)

我有一个R shiny应用程序，它有不同的下载按钮，如下面的代码所示。问题是fluidRow中下载按钮的位置不会自动与其他输入元素（如下面的dateInput）的位置对齐。

ui <- dashboardPage(  
  title = "Test Dashboard",  # this is the name of the tab in Chrome browserr
  dashboardHeader(title = "Web Portal"),
  
  dashboardSidebar(   
    sidebarMenu(

      menuItem('Retail', tabName = "retail", icon = icon("th"),
               menuItem('Dashboard', tabName = 'retail_dashboard'))
    )
  ),

  dashboardBody( 
      tabItem(tabName = "retail_dashboard",
              tabsetPanel(type = "tabs",
                          tabPanel("Dashboard",
                                   h3("Test."),
                                   
                                   fluidRow(column(2,
                                                   dateInput("idx_muni_tot_ret_start_dt", label = "Start Date:", value = Sys.Date()-10)), #  1yr ago
                                            column(2,
                                                   dateInput("idx_muni_tot_ret_end_dt", label = "End Date:", value = Sys.Date())),
                                            column(2,
                                                   downloadButton("download_idx_muni_TR_data","Download Data"))
                                            )
                                     )
                                    )           
              )
              )
)

server <- function(input, output, session) {    
  # code...
}

cat("\nLaunching   'shinyApp' ....")
shinyApp(ui, server)

我在How do I align downloadButton and ActionButton in R Shiny app?和Change download button position in a tab panel in shiny app中发现了类似的问题，但它们似乎没有回答我的问题。我还附上了当前按钮位置以及预期位置的屏幕截图。

来源：https://stackoverflow.com/questions/75210155/r-shiny-downloadbutton-aligned-to-other-input-elements-like-dateinput

2条答案

按热度按时间

w41d8nur1#

一个解决方案是在下载按钮的顶部模拟一个标签，并添加5 px的margin-bottom。

column(
  width = 2,
  div(tags$label(), style = "margin-bottom: 5px"),
  div(downloadButton("download_idx_muni_TR_data", "Download Data"))
)

赞(0）回复(0）举报 2023-01-28

qacovj5a2#

一点css就能做到：

ui <- dashboardPage(  
   title = "Test Dashboard", 
   dashboardHeader(title = "Web Portal"),
   dashboardSidebar(   
   ),
   dashboardBody( 
      h3("Test."),
      fluidRow(column(2,
                      dateInput("idx_muni_tot_ret_start_dt", 
                                label = "Start Date:", value = Sys.Date() - 10)),
               column(2,
                      dateInput("idx_muni_tot_ret_end_dt", 
                                label = "End Date:", value = Sys.Date())),
               column(2,
                      div(style = "margin-bottom:15px",
                          downloadButton("download_idx_muni_TR_data","Download Data")))
               , style = "display:flex;align-items:end")
   )
)

更新

如果你想添加一个selectInput，你还需要一些新的css调整来获得同一行的输入：

ui <- dashboardPage(  
   title = "Test Dashboard", 
   dashboardHeader(title = "Web Portal"),
   dashboardSidebar(),
   dashboardBody( 
      h3("Test."),
      fluidRow(column(2,
                      dateInput("idx_muni_tot_ret_start_dt", 
                                label = "Start Date:", value = Sys.Date() - 10)),
               column(2,
                      dateInput("idx_muni_tot_ret_end_dt", 
                                label = "End Date:", value = Sys.Date())),
               column(2,
                      tagAppendAttributes(selectInput("slc", "Select", LETTERS), style="margin-bottom:10px")),
               column(2,
                      div(style = "margin-bottom:15px",
                          downloadButton("download_idx_muni_TR_data","Download Data"))),
               style = "display:flex;align-items:end")
   )
)

赞(0）回复(0）举报 2023-01-28

我来回答

R闪亮的downloadbutton与其他输入元素(如dateInput)对齐

2条答案

更新

相关问题

热门标签

最新问答