在我shiny 的UI中有一个侧边栏面板,它包含5个SwitchInput,每个SwitchInput前面都有一段长度不等的内联文本.后两个SwitchInput触发一个条件数字输入,可以很好地工作.因为内联文本的长度不同,所以我希望将SwitchInput框与侧边栏面板的右侧对齐.我想实现这样的目标:
我try 过在每个包含SwitchInput的div()
中使用style="float:right"
来实现此目的.然而,由于某些原因,这只适用于顶部的SwitchInput,因为下面的SwitchInput被移到了左边.当触发第四个SwitchInput的ConditionalPanel时,这似乎正确地"重置"了下面的SwitchInput的对齐方式(见下图).对实现上述布局有什么 idea 吗?
以下是我的代码:
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)