在 R 中对齐 UI 框

Posted 2023-03-24

【中文标题】在 R 中对齐 UI 框

【英文标题】：align the UI boxes in R shiny

【发布时间】：2021-04-28 05:00:06

【问题描述】：

我想将下面的三个框从 R 闪亮的 UI 部分对齐到相同的水平水平。它们原本在同一层级，但是，在我添加了帮助文本（“标签：”）后，它们不再处于同一层级。有什么建议吗？谢谢你。下面是一个可重现的代码。

library(shiny)
library(miniUI)

ui <- miniPage(
    
    gadgetTitleBar(h3(strong("UI"), align="center"), left=NULL, right=NULL),
    
    miniTabstripPanel(
        
        miniTabPanel(strong("temp"),
                     
                     miniContentPanel(
                         
                             fluidRow(
                                 
                                 column(4, radioButtons(inputId="subt", label="Step1:", 
                                                        inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                                        
                                        conditionalPanel(
                                            condition = "input.subt == 'YES'",
                                            fluidRow(
                                                column(4, textInput(inputId="subt.id", label="The step 1 is ...:", ""))
                                            )
                                        )
                                 ),
                                 ###
                                 
                                 ### Normalize the response
                                 column(6, radioButtons(inputId="norm", label="Step2:", 
                                                        inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                                        
                                        conditionalPanel(
                                            condition = "input.norm == 'YES'",
                                            fluidRow(align="center",
                                                     column(4, textInput(inputId="norm.start", label="step 2.1:", "")),
                                                     helpText("Label:"),
                                                     column(4, textInput(inputId="norm.from", label="step 2.2:", "")),
                                                     column(4, textInput(inputId="norm.to", label="step 2.3:", ""))
                                            )
                                        )
                                 )
                             )
                         )
       
)
))

server <- function(input, output) 



shinyApp(ui = ui, server = server)

【问题讨论】：

当然。我已经编辑了这篇文章，并附上了一个可重复的例子。谢谢。

【参考方案1】：

您可以应用一些 css 来对齐标签文本。

div(helpText("Label:"),style = "margin-top: -35px"),

完整代码：

library(shiny)
library(miniUI)


ui <- miniPage(
  
  gadgetTitleBar(h3(strong("UI"), align="center"), left=NULL, right=NULL),
  
  miniTabstripPanel(
    
    miniTabPanel(strong("temp"),
                 
                 miniContentPanel(
                   
                   fluidRow(
                     
                     column(4, radioButtons(inputId="subt", label="Step1:", 
                                            inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                            
                            conditionalPanel(
                              condition = "input.subt == 'YES'",
                              fluidRow(
                                column(4, textInput(inputId="subt.id", label="The step 1 is ...:", ""))
                              )
                            )
                     ),
                     ###
                     
                     ### Normalize the response
                     column(6, radioButtons(inputId="norm", label="Step2:", 
                                            inline=TRUE, choices=c("YES", "NO"), selected="YES"),
                            
                            conditionalPanel(
                              condition = "input.norm == 'YES'",
                              fluidRow(align="center",
                                       column(4, textInput(inputId="norm.start", label="step 2.1:", "")),
                                       div(helpText("Label:"),style = "margin-top: -35px"),
                                       column(4, textInput(inputId="norm.from", label="step 2.2:", "")),
                                       column(4, textInput(inputId="norm.to", label="step 2.3:", ""))
                              )
                            )
                     )
                   )
                 )
                 
    )
  ))

server <- function(input, output) 
  





shinyApp(ui = ui, server = server)

【讨论】：

整洁。谢谢。