css - 闪亮的`sliderInput()`的内联标签
问题描述
我想让sliderInput()
标签与特定小部件的幻灯片一致。
应用方法SO导致了这种行为(小部件标签在图片上放错了位置):
假定的“内联”顶部幻灯片已折叠。请问我们如何解决这个问题?
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(
type="text/css",
"#inline label {
display: table-cell; text-align: center; vertical-align: middle;
}
#inline .form-group {
display: table-row;
}")
),
tags$div(id = "inline",
sliderInput(inputId = "slid", label = "label inline desired", min = 0, value = 50, step = 1, max = 100)
),
sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
)
server <- function(input, output, server) {}
shinyApp(ui, server)
解决方案
也许,这将满足您的需求
library(shiny)
ui <- fluidPage(
sidebarPanel(
tags$head(tags$style(HTML("div#inline label { width: 32%; }
div#inline input { display: inline-block; width: 68%;}"))),
tags$head(
tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
#inline .form-group { display: table-row;}")),
div(id="inline", style="width:35vw;",
# width = 4,
div(HTML("<b>Bla bla bla bla bla</b>")),
br(),
sliderInput("lbl1", "label 1", min = 0, max = 10, value = 1, step = 1),
sliderInput("lbl2", "my label 2", min = 0, max = 10, value = 2, step = 1),
sliderInput("lbl3", "long label 3", min = 0, max = 10, value = 3, step = 1),
sliderInput("lbl4", "very long label 4", min = 0, max = 10, value = 4, step = 1),
sliderInput("lbl5", "normal label 5", min = 0, max = 10, value = 5, step = 1)
),
sliderInput(inputId = "slid2", label = "label on top (default)", min = 0, value = 50, step = 1, max = 100)
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
推荐阅读
- unreal-engine4 - 如何模拟对物体的重力,而不是向下
- extjs - ExtJS 4.2 锁定可编辑网格问题
- objective-c - Objective-C 中是否存在转义闭包/回调?
- java - 哈希图的大小是多少?我什么时候分配它?
- java - 如何解析不规则使用引号的 CSV 文件?
- gitlab - 来自市场的 GitLab 部署未在 helm 中链接
- assembly - uint32x2x2_t 和 int32x4_t 之间的 arm-neon 转换
- roku - 可以在海报节点和 Roku 中的其他节点上设置计时器..?
- apache-flink - 关于flink连接远程任务管理器报错的问题
- matlab - 并行实时图像采集和处理的最佳方法 (MATLAB)