'How to lock wellpanel/sidebar vertically but not horizontally? rShiny

So I have a wellpanel thats serving as a sidebar that I want fixed when I scroll down vertically but that I want to "disapear"/ move to the side when I scroll horizontally.

Currently I have the vertical part down, but when I scroll horizontally the wellpanel merges with my datatable.

My code:

column(2,
 wellPanel(style = "position: fixed;",
                                                            dateInput(inputId = "cpayReconstrtdate", label = "Start Date",  value = (Sys.Date() - days(10))),
                                                            dateInput(inputId = "cpayReconenddate", label = "End Date"),
                                                            checkboxInput(inputId = "cpayReconCheck", label = "Filter by Date?"),
                                                            checkboxInput(inputId = "cpfailed", label = "Include Failed Transactions?"),
                                                            checkboxInput(inputId = "cpayAnomFilter", label = "Filter by Anomalies?"),
                                                            actionButton(inputId = "cpayReconFilterBTN", label = "Filter"),
                                                            downloadButton("cpayReconDownload")
                                                            )
                                                   ),
                                            column(10,
                                                   dataTableOutput("CPTable")
                                                   )

Here is an image of the problem:

enter image description here

As you can see the wellpanel is fixed but when I scrolled horizontally to view the rest of the datatable it clipped in.

So is there any way to lock the wellpanel vertically but not horizontally?

cssrshiny


Solution 1:[1]

Solved it by wrapping everything in a div with display:flex and adding position sticky to the wellpanel.

div(style = "display: flex",
                                            column(2,
                                                   wellPanel(style = "position: sticky; top: 100px",
                                                            dateInput(inputId = "cpayReconstrtdate", label = "Start Date",  value = (Sys.Date() - days(10))),
                                                            dateInput(inputId = "cpayReconenddate", label = "End Date"),
                                                            checkboxInput(inputId = "cpayReconCheck", label = "Filter by Date?"),
                                                            checkboxInput(inputId = "cpfailed", label = "Include Failed Transactions?"),
                                                            checkboxInput(inputId = "cpayAnomFilter", label = "Filter by Anomalies?"),
                                                            actionButton(inputId = "cpayReconFilterBTN", label = "Filter"),
                                                            downloadButton("cpayReconDownload")
                                                            )
                                                   ),
                                            column(10,
                                                   dataTableOutput("CPTable")
                                                   )
                                            )
                                            ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Willem. R. Nieuwenhuis

Related Questions