在我shiny 的UI中有一个侧边栏面板,它包含5个SwitchInput,每个SwitchInput前面都有一段长度不等的内联文本.后两个SwitchInput触发一个条件数字输入,可以很好地工作.因为内联文本的长度不同,所以我希望将SwitchInput框与侧边栏面板的右侧对齐.我想实现这样的目标:

enter image description here

我try 过在每个包含SwitchInput的div()中使用style="float:right"来实现此目的.然而,由于某些原因,这只适用于顶部的SwitchInput,因为下面的SwitchInput被移到了左边.当触发第四个SwitchInput的ConditionalPanel时,这似乎正确地"重置"了下面的SwitchInput的对齐方式(见下图).对实现上述布局有什么 idea 吗?

enter image description here

以下是我的代码:

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      div(style = "white-space: nowrap;",
          h5('Yes or no?',style="display:inline-block"),
          div(style="display: inline-block;float:right;",
              switchInput("switch1", onLabel="Yes", offLabel="No", size="mini",value=FALSE))
      ),
      div(style = "white-space: nowrap;",
          p("Hey there, having a good day?",style="display:inline-block"),
          div(style="display: inline-block;float:right;",
              switchInput("switch2", onLabel="Yes", offLabel="No", size="mini",value=FALSE))
      ),
      div(style = "white-space: nowrap;",
          h5("Would you like some apples?",style="display:inline-block"),
          div(style="display:inline-block; float:right",
              switchInput("switch3", onLabel="Yes", offLabel="No", size="mini",value=FALSE))
      ),
      div(style = "white-space: nowrap;",
          p("Have you ever had a fish tank at home?",style="display:inline-block"),
          div(style="display: inline-block; float:right",
              switchInput("switch4", onLabel="Yes", offLabel="No", size="mini",value=FALSE))
      ),
      conditionalPanel(
        condition = "input.switch4 == true",
        numericInput("numeric1", label = "If so, how many fish did it contain?", value = 300)
      ),
      div(style = "white-space: nowrap;",
          h5("Have you ever flown an airplane?",style="display:inline-block"),
          div(style="display: inline-block; float:right",
              switchInput("switch5", onLabel="Yes", offLabel="No", size="mini",value=FALSE))
      ),
      conditionalPanel(
        condition = "input.switch5 == true",
        numericInput("numeric2", label = "If so, how many flights?", value = 2.5)
      ),
    ),
    mainPanel()
  )
)

server <- function(input, output) {}
  
shinyApp(ui = ui, server = server)

推荐答案

我的建议是:

  1. 使用Flexbox‘Display:flex;JUSIGN-CONTENT:SPACE-BETWAGE;"就可以了

  2. 避免使用内联CSS,请考虑向元素添加类并设置这些类的样式.read more

  3. 尽量减少代码重复,这将使future 的重构变得更容易.您可以通过创建函数来实现这一点.read more

以下是代码

  library(shiny)
  library(shinyWidgets)
  
  switch_container <- function(input_id, label) {
    div(
      class = "switch-container",
      label,
      switchInput(
        input_id,
        onLabel = "Yes",
        offLabel = "No",
        size = "mini",
        value = FALSE)
      )
  }
  
  ui <- fluidPage(
    sidebarLayout(
      sidebarPanel(
        tags$style(".switch-container {display: flex; justify-content: space-between;}"),
        switch_container("switch1", h5("Yes or no?")),
        switch_container("switch2", p("Hey there, having a good day?")),
        switch_container("switch3", h5("Would you like some apples?")),
        switch_container("switch4", p("Have you ever had a fish tank at home?")),
        conditionalPanel(
          condition = "input.switch4 == true",
          numericInput("numeric1", label = "If so, how many fish did it contain?", value = 300)
        ),
        switch_container("switch5", h5("Have you ever flown an airplane?")),
        conditionalPanel(
          condition = "input.switch5 == true",
          numericInput("numeric2", label = "If so, how many flights?", value = 2.5)
        ),
      ),
      mainPanel()
    )
  )
  
  server <- function(input, output) {}
  
  shinyApp(ui = ui, server = server)

enter image description here

R相关问答推荐

如何计算具有NA的行的更改百分比

确定邻国

按条件计算观察次数

多重RHS固定估计

如何对2个列表元素的所有组合进行操作?

迭代到DataFrame列并获得成对的值列表(col1->;col2、col2->;col3、col3->;col4等)的正确方法.

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

如何将R中数据帧中的任何Nas替换为最后4个值

将一个字符串向量调整为与其他字符串向量完全相同的大小

更改STAT_VALLES/STAT_PEAKS中的箭头线宽/大小

安全地测试文件是否通过R打开

在gggraph中显示来自不同数据帧的单个值

使用geom_iles在一个切片中包含多个值

手动指定从相同数据创建的叠加图的 colored颜色

按组内中位数分类

将统计检验添加到GGPUBR中的盒图,在R

数值型数据与字符混合时如何进行绑定

基于R中的辅助向量中的值有条件地连接向量中的字符串

在使用SliderInput In Shiny(R)设置输入数据的子集时,保留一些情节痕迹

每行不同列上的行求和