我在一个使用Bootswatch Cerulean主题的shiny 的仪表板应用程序中,面临着fileInput小部件中"Browse"按钮的可见性问题."浏览"按钮没有按预期显示,用户很难理解如何上传文件.

以下是我的代码的简化示例:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        tags$head(
            tags$link(rel = "stylesheet", type = "text/css", href = "https://bootswatch.com/5/cerulean/bootstrap.css")
        ),
        fileInput("file1", "Upload a file")
    )
)

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

}

shinyApp(ui, server)

如您所见,Cerulean主题的"Browse"按钮并不清晰可见.我想让它可见,并很容易为用户点击.在使用Cerulean主题时,有没有办法调整css或设置来解决这个可见性问题?

在这种情况下,任何关于改善用户体验的指导或解决方案都将受到高度赞赏.

提前感谢您的帮助.

推荐答案

通过一个方便的判断元素,我可以看到由于某种原因,这个主题已经将文件输入按钮(css类.input-group-btn)的宽度设置为1%,而不是合理的10%.这就是为什么这个按钮是"隐藏"的.请看下面的截图:

screenshot

您可以通过使用其标记并添加指定其宽度的css来自定义与此特定按钮相关联的css:10%.如果愿意,您还可以添加边框并更改按钮的 colored颜色 .关于在shiny 的应用程序中使用自定义CSS的更多信息here.

我已经为下面的这个按钮添加了一些文件中的自定义css,但请注意,这个css将影响标记为‘.input-group-btn’的每个future 元素,也就是说,如果你在应用的另一个部分包括另一个fileInput小部件,它的按钮也会被设置为10%的宽度.将来,最好建立一个单独的css文件,其中包含用于设置应用程序样式的css代码,包括用于设置按钮样式的css.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "https://bootswatch.com/5/cerulean/bootstrap.css"),
      tags$style(HTML("
                      
                      .input-group-btn {
                        width: 10%;
                      }

                      "))
    ),
    wellPanel(
      fileInput("file1", "Upload a file")
    )
    
  )
)

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

shinyApp(ui, server)

R相关问答推荐

对lme 4对象运行summary()时出错(diag中的错误(from,names = RST):对象unpackedMatrix_diag_get找不到)

在R中查找每个组不同时间段的总天数

用derrr在R中查找组间的重复项

如何删除gggvenn与gggplot绘制的空白?

R for循环返回到先前值

derrr mutate case_when grepl不能在R中正确返回值

如何在所有绘图中保持条件值的 colored颜色 相同?

使用rest从header(h2,h3,table)提取分层信息

LOF中的插图短文字幕

根据现有列的名称和字符串的存在进行变异以创建多个新列

哪一行和行和 Select 特定行,但是考虑到Nas

方法::slotName如何处理非类、非字符的参数?

从R中发出的咕噜声中的BUG?

R -基线图-图形周围的阴影区域

有没有办法将基于每个值中出现的两个关键字或短语的字符串向量重新编码为具有这两个值的新向量?

对R中的列表列执行ROW Mean操作

如何将EC50值绘制在R中的剂量-react 曲线上?

Ggplot2如何找到存储在对象中的残差和拟合值?

使用ggplot2绘制具有边缘分布的坡度图

将边列表转换为路径长度列表