Question

我有一个示例，其中dateRangeInput和actionButton是动态添加的。

我需要将元素并排放置，而不是放置在块中。

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(), #Set up shinyjs  
    tabsetPanel(
      tabPanel("Settings",
               br(),
               fluidRow(
                 column(width = 8,
                        box(
                          title = "Set parameters", id = "RO_05_param_box", width = NULL, solidHeader = TRUE, status ="primary", collapsible = TRUE,
                          fluidRow(
                            box(radioButtons("RO_05_param_radio", h6("Company"), choices = list("A" = 1, 
                                                                                                "B" = 2), selected = 1), br(),
                                dateRangeInput("date_range_view", h6("Timeline"), start = "2019-06-30", end = "2020-06-30"), br(), 
                                selectInput("RO_05_param_select", h6("Distribute over time"), choices = list("Stepped line" = 2, "Linear funcion" = 1))
                            ),

                            box(id= "step_box", dateRangeInput("RO05_date1", h6("Start and end date"), start = "2019-06-30", end = "2020-06-30"), 
                                tags$div(id = 'placeholder_dateRangeInput'),
                                actionButton("add_lag", "Add dates")
                            )

                          )
                        )
                 )
               )
      )
    )
  )
)


server <- function(input, output) {

  observeEvent(input$RO_05_param_select, {
    if(input$RO_05_param_select == 2){
      show(id = "step_box")
    } else {
      hide(id = "step_box")
    }
  })

  observeEvent(input$add_lag, {
    add <- input$add_lag + 1
    addID <- paste0("NO", add)
    daterangeID <- paste0('RO05_date', add)
    removeID <- paste0('remove_lag', add)

    insertUI(
      selector = '#placeholder_dateRangeInput',
      ui = tags$span(id = addID, 
                     tags$span(dateRangeInput(daterangeID, h6("Near lag and far lag"), start = "2019-06-30", end = "2020-06-30")), 
                     tags$span(actionButton(removeID, label= '', icon("minus")))
      )
    )

    observeEvent(input[[removeID]], {
      removeUI(selector = paste0('#', addID))

    })
  })

}

# Run the application 
shinyApp(ui = ui, server = server)

我尝试添加此CSS：

#placeholder_dateRangeInput {
    display: inline-block;
}

但是它所做的只是缩小dateRangeInput小部件。但是，#placeholder_dateRangeInput包装了所有添加的元素，因此我认为css应该包装在addID周围。

Answer 1

这是一种可以使元素并排放置的方法。在CSS中，您告诉元素您想要在左侧显示

float:left;

以及您希望右侧显示的元素

float:right;

这应该使它们并排。这是使用此示例： https://www.geeksforgeeks.org/how-to-float-three-div-side-by-side-using-css/

无法放置元素以内联块

1 个答案: