How can I fix the apply button on the dropdownButton popup with respect to the main app

[sh456]

...

I am having hard time figuring this out. I was able to fix the Apply button on the drop down with respect to the popup using css position : fixed. But the Apply button still moves with respect to the main app. I would like the Apply button to be fixed with respect to the popup and the main app. How can this be accomplished?

ui <- fluidPage(
  tags$h2("Dropdown Button"),
  br(),
  dropdownButton(
    inputId = "input_id1",
    tags$h3("List of Inputs"),
    tags$style(HTML(".dropdown-menu{width:300px;max-height:50vh;overflow-y:auto;padding-bottom:40px;}")),
    tags$style(HTML("#applyAdditionalFiltersSettings{position:fixed;top:340px;}")),
    tags$style(HTML(".shiny-plot-output{height:600px !important;}")),
    selectInput(inputId = 'xcol',
                label = 'X Variable',
                choices = names(iris)),

    selectInput(inputId = 'ycol',
                label = 'Y Variable',
                choices = names(iris),
                selected = names(iris)[[2]]),

    sliderInput(inputId = 'clusters',
                label = 'Cluster count',
                value = 3,
                min = 1,
                max = 9),

    circle = TRUE, status = "danger",
    icon = icon("gear"), width = "300px",
    actionButton("applyAdditionalFiltersSettings", "Apply"),

    tooltip = tooltipOptions(title = "Click to see inputs !")
  ),

  plotOutput(outputId = 'plot1')
)

server <- function(input, output, session) {

  selectedData <- reactive({
    iris[, c(input$xcol, input$ycol)]
  })

  clusters <- reactive({
    kmeans(selectedData(), input$clusters)
  })

  output$plot1 <- renderPlot({
    palette(c("#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
              "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"))


    par(mar = c(5.1, 4.1, 0, 1))
    plot(selectedData(),
         col = clusters()$cluster,
         pch = 20, cex = 3)
    points(clusters()$centers, pch = 4, cex = 4, lwd = 4)
  })

  observeEvent(
    input$applyAdditionalFiltersSettings, {
      shinyjs::removeClass(id = 'sw-content-input_id1', class = 'sw-show')


    }
  )

}

shinyApp(ui = ui, server = server)

[nirgrahamuk]

please say more about what the problem for you is?
it doesnt seem apparent from what you shared.

Is something in this picture not where you need it to be ?

[sh456]

It is the Apply button whose position I am trying to fix with respect to pop up and the main app. Currently the Apply button is fixed with respect to pop up but moves when the user scrolls through the main app.

[nirgrahamuk]

are you saying you dont want it to be a part of the control that is popably open; you want the apply button to be out of that control ? (but you put it inside the control...)

[peernisse]

Are you looking for something more like this?

Your CSS was trying to fix the button to the top, but actually refers to the top of the main container (page) not the drop down. I modified the ui code as below to get the button outside of the scrolling part of the inputs list, which keeps it fixed. I added a class dropdown-menu-inner where I put the scroll, and left the button in its own div. Maybe this is closer to what you want, hopefully this helps, anyway.

ui <- fluidPage(
    tags$h2("Dropdown Button"),
    br(),
    dropdownButton({
            tagList(
                div(
                    actionButton("applyAdditionalFiltersSettings", "Apply"),
                ),
                tags$h3("List of Inputs"),
                
                div(class = 'dropdown-menu-inner',
                    selectInput(inputId = 'xcol',
                                label = 'X Variable',
                                choices = names(iris)),
                    
                    selectInput(inputId = 'ycol',
                                label = 'Y Variable',
                                choices = names(iris),
                                selected = names(iris)[[2]]),
                    
                    sliderInput(inputId = 'clusters',
                                label = 'Cluster count',
                                value = 3,
                                min = 1,
                                max = 9),
                )
            )
        },
        
        inputId = "input_id1",
        circle = TRUE, 
        status = "danger",
        icon = icon("gear"), 
        width = "300px",
        tooltip = tooltipOptions(title = "Click to see inputs !")
    ),
    
    plotOutput(outputId = 'plot1'),
    tags$style(HTML(".dropdown-menu{width:300px;max-height:50vh;padding-bottom:40px; padding-top: 20px;}")),
    tags$style(HTML(".dropdown-menu-inner{width:275px;max-height: 30vh; overflow-y: auto;}")),
    #tags$style(HTML("#applyAdditionalFiltersSettings{position:fixed;top:340px;}")),
    tags$style(HTML(".shiny-plot-output{height:600px !important;}")),
)