css - R Shiny - 减少列中元素之间的空间
问题描述
我有以下可重现的代码:
library(shiny)
ui <- fluidPage(
fluidRow(
column(3, align="left",
# Input: Quantile ----
selectInput(inputId = "TEST",
label = "",choices = c(80, 85, 90, 95),selected = 90),
),
column(9,
tabsetPanel(
tabPanel("Table 1"),
tabPanel("Figures 1"),
tabPanel("Figures 2"),
tabPanel("Figures 3",
fluidRow(
fluidRow(
column(width = 3,
wellPanel(
tags$head(tags$style(type="text/css", "#loadmessage {
position: fixed;
top: 0px;
left: 500px;
width: 60%;
padding: 5px 0px 5px 0px;
text-align: center;
font-weight: bold;
font-size: 100%;
color: #000000;
background-color: #DAF7A6;
z-index: 105;
}")),
conditionalPanel(condition="$('html').hasClass('shiny-busy')",
tags$div("Chargement...",id="loadmessage")),
selectInput(inputId="CartesFig",
label="",
choices= c("1.Carac", "2.Rangs", "3.Comparaison")),
selectInput(inputId="TypeVisu",
label="",
choices= c("Séparation", "Tout")),
actionButton("GraphCartes", "Go !",
style="color: #fff; background-color: #337ab7; border-color: #2e6da4")
)),
column(1,
conditionalPanel(
condition = ("input.CartesFig == '3.Comparaison'"),
selectInput(inputId = "Nb_Compa", label = "Nombre", choices = c(1,2,3), selected = 1),
)),
column(2,
conditionalPanel(
condition = ("input.CartesFig == '3.Comparaison'"),
wellPanel(
conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 1 || input.Nb_Compa == 2 || input.Nb_Compa == 3)",
selectInput(inputId = "Comparatif1", label = "", choices = "placeholder1")),
conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 2 || input.Nb_Compa == 3)",
selectInput(inputId = "Comparatif2", label = "", choices = "placeholder1")),
conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 3)",
selectInput(inputId = "Comparatif3", label = "", choices = "placeholder1")))
)),
column(3, align="center",
actionButton("DownloadCartes", "Télécharger la figure",style="Gradient"))),
tags$style(type='text/css', "#DownloadCartes { width:60%; margin-top: 40px;}"),
mainPanel(plotOutput("CartesPlot", height="700px", width="1300px")))
) ##Tab Panel Fig 3
) ##tabSetPanel
) ##Column
) ## FluidRow
) # fluidPage
server <- function(input, output, session) {
Input_Nb_compa <- reactive({input$Nb_Compa})
observeEvent(input$Nb_Compa,{
if(Input_Nb_compa()==1) {updateSelectInput(session, "Comparatif1", choices =(1:1500), selected = 1226)}
if(Input_Nb_compa()==2) {
updateSelectInput(session, "Comparatif1", choices = (1:1500), selected = 1226)
updateSelectInput(session, "Comparatif2", choices = (1:1500), selected = 789)}
if(Input_Nb_compa()==3) {
updateSelectInput(session, "Comparatif1", choices = (1:1500), selected = 1226)
updateSelectInput(session, "Comparatif2", choices = (1:1500), selected = 789)
updateSelectInput(session, "Comparatif3", choices = (1:1500), selected = 20)}
})
output$CartesPlot <- renderPlot({NULL})
}
shinyApp(ui, server)
产生如下界面:
如图中以红色绘制的那样,我试图减少元素“Comparatif1”、“Comparatif2”和“Comparatif3”之间的空间,知道它们的出现取决于 Nb_Compa 的值。最终目标是让 WellPanel 的大小与第一列中的第一个相同。我添加了代码的完整性,因为当 Shiny 很忙时,我会出现一个加载栏。我已经阅读了很多关于“div(pattern=0px)”、“offset”等的内容,但我不确定它是否适用于我的情况,因为它不在列/行之间,而是在列内。
谢谢您的帮助 !
解决方案
在您的情况下,label = NULL
应删除标签的额外空间。
conditionalPanel(condition="$('html').hasClass('shiny-busy')",
tags$div("Chargement...",id="loadmessage")),
selectInput(inputId="CartesFig",
label="",
choices= c("1.Carac", "2.Rangs", "3.Comparaison")),
selectInput(inputId="TypeVisu",
label=NULL,
choices= c("Séparation", "Tout")),
actionButton("GraphCartes", "Go !",
style="color: #fff; background-color: #337ab7; border-color: #2e6da4")
)),
column(1,
conditionalPanel(
condition = ("input.CartesFig == '3.Comparaison'"),
selectInput(inputId = "Nb_Compa", label = "Nombre", choices = c(1,2,3), selected = 1),
)),
column(2,
conditionalPanel(
condition = ("input.CartesFig == '3.Comparaison'"),
wellPanel(
conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 1 || input.Nb_Compa == 2 || input.Nb_Compa == 3)",
selectInput(inputId = "Comparatif1", label = NULL, choices = "placeholder1")),
conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 2 || input.Nb_Compa == 3)",
selectInput(inputId = "Comparatif2", label = NULL, choices = "placeholder1")),
conditionalPanel(condition = "(input.CartesFig == '3.Comparaison') && (input.Nb_Compa == 3)",
selectInput(inputId = "Comparatif3", label = NULL, choices = "placeholder1")))
))
推荐阅读
- excel - 如何在 Excel 中的两列之间填充特定的单元格值?
- javascript - 在 forEach 循环完成后运行回调函数
- java - 将long转换为字符串形式的ip地址
- java - RxJava 错误处理,无需吞下错误
- julia - 在 Julia 中定义任意阶张量的巧妙方法
- javascript - SailsJs websocket 使用自定义路由而不是蓝图?
- android - 谷歌分析是否可以重命名用于标记的屏幕?
- java - 如何循环一个 catch 语句?
- python - 从 seaborn clustermap 中提取树状图
- android - VSCode 在 react-native 项目中忽略了我的 /android 文件夹