Невозможно поместить элемент во встроенный блок - PullRequest
Новая
       14

Невозможно поместить элемент во встроенный блок

0 голосов
/ 08 мая 2019

У меня есть пример, где 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.

1 Ответ

0 голосов
/ 08 мая 2019

Вот способ, которым вы можете использовать свои элементы рядом. В css вы указываете элементу, что вы хотите слева, быть 

float:left;

и элемент, который вы хотите справа, будет 

float:right;

Это должно сделать их рядом. Вот пример этого использования: https://www.geeksforgeeks.org/how-to-float-three-div-side-by-side-using-css/

...