Сделайте так, чтобы уменьшенный стиль fileInput вел себя подобно кнопке загрузки при изменении размера окна

Question

Мне удалось уменьшить размер функции fileInput, удалив как область загрузки, так и панель загрузки, и, таким образом, кнопка стала очень похожа на кнопку download.Тем не менее, я изо всех сил пытаюсь выяснить, какую часть CSS мне нужно изменить, чтобы заставить его реагировать так же, как кнопка загрузки при уменьшении окна.Любая помощь приветствуется.

Когда боковая панель достаточно широка:

Когда боковая панель недостаточно широка:

Код здесь (я оставил биты, которые я закомментировал, в моем скорректированном fileInput просто на случай, если их нужно будет использовать):

library(shiny)

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){
  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")
  # div(class = "form-group shiny-input-container", style = if (!is.null(width)) 
  # paste0("width: ", validateCssUnit(width), ";"), #label %AND% 
  # tags$label(label), 
  #div(class = "input-group", 
  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )#, 
  #tags$label(class = "input-group-btn", type="button", span(class = "btn btn-default", buttonLabel, inputTag))#, 
  #tags$input(type = "text", class = "form-control", placeholder = placeholder, readonly = "readonly")
  #)
  # tags$div(id = paste(inputId, "_progress", sep = ""), class = "progress progress-striped active shiny-file-input-progress", tags$div(class = "progress-bar"))
  # )
}

ui <- fluidPage(sidebarLayout(
  sidebarPanel(
    fileInputNoExtra("test1",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button1"),width="200px"),
    fileInputNoExtra("test2",label="",accept=".lmmm",buttonLabel=list(icon("folder"),"Normal upload button2"),width="200px"),
    downloadButton("test3",label="Normal download button3"),
    downloadButton("test4",label="Normal download button4")
  ),
  mainPanel()

))


server <- function(input, output, session) {

}

shinyApp(ui = ui, server = server)

Answer 1

Вы были почти там. Вам просто нужно добавить display: inline-block к class = "input-group-btn". Так что fileInputNoExtra будет выглядеть так:

fileInputNoExtra<-function(inputId, label, multiple = FALSE, accept = NULL, width = NULL, buttonLabel = "Browse...", placeholder = "No file selected"){

  restoredValue <- restoreInput(id = inputId, default = NULL)
  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }
  if (!is.null(restoredValue)) {
    restoredValue <- toJSON(restoredValue, strict_atomic = FALSE)
  }
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         style = "display: none;", 
                         `data-restore` = restoredValue)
  if (multiple) 
    inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0)
    inputTag$attribs$accept <- paste(accept, collapse = ",")

  tags$label(class = "input-group-btn", type="button", style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","padding-right: 5px; padding-bottom: 5px; display: inline-block;"),
             span(class = "btn btn-default btn-file",type="button", buttonLabel, inputTag, style=if (!is.null(width)) paste0("width: ", validateCssUnit(width),";","border-radius: 5px; padding-bottom: 5px;"))
  )
} 

С этой модификацией вы получите следующие выходные данные:

и

Надеюсь, это поможет!