[英]Alignment of selectizeInput and numericInputs generated inside renderUI
I have an app where the user will generate a bunch of selectizeInput
s along with 3 numericInput
s for every selectizeInput
.我有一个应用程序,用户将为每个
selectizeInput
生成一堆selectizeInput
和 3 个numericInput
。 The problem I am having is that the selectizeInput
does not align well with the numericInput
s and once you have about 10 rows, the alignment is completely gone.我遇到的问题是
selectizeInput
不能很好地与numericInput
对齐,一旦你有大约 10 行,alignment 就完全消失了。
I have thought of two ways of solving this problem:我想到了两种解决这个问题的方法:
renderUI
function and include fluidRow
s in a loop but some searching has led me to believe that isnt possible.renderUI
function 并在循环中包含fluidRow
但一些搜索让我相信这是不可能的。tags$style(type = "text/css", ".form-control.shiny-bound-input, .selectize-input {height: 46px;}"),
but I dont want to adjust the selectizeInput
height universally as the app has selectizeInputs elsewhere.tags$style(type = "text/css", ".form-control.shiny-bound-input, .selectize-input {height: 46px;}"),
但我不想调整selectizeInput
高度普遍,因为应用程序在其他地方有 selectizeInputs。 I can't really hardcode the input name with tags$style(type = "text/css", "#some_id.form-control.shiny-bound-input {height: 46px;}")
since the names are dynamically generated by the user.tags$style(type = "text/css", "#some_id.form-control.shiny-bound-input {height: 46px;}")
对输入名称进行硬编码,因为名称是由动态生成的用户。 Will one of these two options work?这两个选项之一会起作用吗? If not is there a third option?
如果没有,还有第三种选择吗?
I have made a demo version of the problem below.我已经制作了以下问题的演示版本。
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(width = 3, br(),br(),br(),br(),br(),br(),br(), h6("something else is here")),
mainPanel(
tabsetPanel(
tabPanel("Problem tab",
br(),
numericInput("inputs_num","Enter Number of Channels to Calibrate", min = 1, value = 10),
hr(),
br(),
fluidRow(
column(width= 3,uiOutput("colname")),
column(width =3, uiOutput("initial_numeric")),
column(width =3, uiOutput("min_numeric")),
column(width =3, uiOutput("max_numeric"))
),
hr()
)
)
)
)
)
server <- function(input, output, server){
output$colname <- renderUI({
req(input$inputs_num)
columns <- colnames(mtcars)
tags <- tagList()
for(i in 1:input$inputs_num){
tags[[i]] = selectizeInput(paste0("colname_",i), paste0("Column ",i), choices = columns, selected = NULL,
options = list(
placeholder = "Enter Column Name",
onInitialize = I('function() { this.setValue(""); }')
))
}
tags
})
output$initial_numeric <- renderUI({
req(input$inputs_num)
tags <- tagList()
for (i in 1:input$inputs_num){
tags[[i]] <- numericInput(paste0("initial_",i), paste("Initial",i), min = 0,value = 1)
}
tags
})
output$min_numeric <- renderUI({
req(input$inputs_num)
tags <- tagList()
for (i in 1:input$inputs_num){
tags[[i]] <- numericInput(paste0("min_",i), paste("Min",i), min = 0,value = 1)
}
tags
})
output$max_numeric <- renderUI({
req(input$inputs_num)
tags <- tagList()
for (i in 1:input$inputs_num){
tags[[i]] <- numericInput(paste0("max_",i), paste("Max",i), min = 0,value = 1)
}
tags
})
}
shinyApp(ui, server)
In Safari everything was aligned fine, and only in Firefox it became visible.在 Safari 中,一切都很好地对齐,只有在 Firefox 中它才变得可见。 I tried wrapping everything in one loop and it seems to work fine, even in Firefox.
我尝试将所有内容包装在一个循环中,它似乎工作正常,即使在 Firefox 中也是如此。
So the approach below should correspond to solution 1. Since solution 2 (changing the css of the input universally) is not an option, another approach would be to define custom inputs by wrapping the original inputs in a tag and adding an additional class which can then be targeted in css.所以下面的方法应该对应于解决方案 1。由于解决方案 2(通用更改输入的 css)不是一种选择,另一种方法是通过将原始输入包装在标签中并添加额外的 class 来定义自定义输入,它可以然后以 css 为目标。 But I think that this not necessary, since the approach below works.
但我认为这没有必要,因为下面的方法有效。
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(width = 3, br(),br(),br(),br(),br(),br(),br(), h6("something else is here")),
mainPanel(
tabsetPanel(
tabPanel("Problem tab",
br(),
numericInput("inputs_num","Enter Number of Channels to Calibrate", min = 1, value = 10),
hr(),
br(),
uiOutput("all"),
hr()
)
)
)
)
)
server <- function(input, output, server){
output$all <- renderUI({
req(input$inputs_num)
columns <- colnames(mtcars)
tags <- tagList()
for(i in 1:input$inputs_num){
tags[[i]] <- fluidRow(
column(width= 3,
selectizeInput(paste0("colname_",i), paste0("Column ",i), choices = columns, selected = NULL,
options = list(
placeholder = "Enter Column Name",
onInitialize = I('function() { this.setValue(""); }')
))),
column(width= 3,
numericInput(paste0("initial_",i), paste("Initial",i), min = 0,value = 1)),
column(width= 3,
numericInput(paste0("min_",i), paste("Min",i), min = 0,value = 1)),
column(width= 3,
numericInput(paste0("max_",i), paste("Max",i), min = 0,value = 1))
)
}
tags
})
}
shinyApp(ui, server)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.