No scroll bar when height goes below statusbar

[vidarsh-shah]

When height of the UI element is large, the alert's height expands as well, But there is no way to access the elements which are hidden below.

[daattali]

Thanks for the report. I'll take a look when I find some time, hopefully within a few weeks.

Meanwhile could you please share a minimal reproducible example that shows the issue?

[vidarsh-shah]

`library(shiny)
library(shinyalert)

ui<-fluidPage(
useShinyalert(),
actionButton(
inputId = "btn",
label = "Click"
)
)

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

output$test_table<-renderTable({
mtcars
})

observeEvent(input$btn,{
shinyalert(text = tableOutput("test_table"),html = T,size="l")
})
}

shinyApp(ui, server)`

This will reproduce the issue.

[vidarsh-shah]

I cant figure out how to use div of shinyalert and change its style. I tried -500px margin in chrome and the alert box moved up but still no way to do it through shiny and no scrolling whatsoever.
Thanks.

[daattali]

I suggest not using a fixed number (such as 500) because that would only work for your specific browser window's height and for this spefici shinyalert content. But as a temporary fix you can do that, and if there's no scrollbar then I assume you could look at the overflow css property. I'll take a closer look at a later time.

[vidarsh-shah]

I was just checking which number is right in browser. I dont have any idea about changing shinyalert's overflow property in server or ui function.

[daattali]

This should be fixed in the github version

[dagola]

I have the same problem. Unfortunately, the fix in c2b07f1 does not solve the problem. The buttons to interact with the alert are not visible. See screenshot below.

I noticed that the shiny-alert div gets an element specific margin-top style attribute. I have not found where this calculated but it seems to be not correct for long alerts, although if the content has a scroll bar now.

[dagola]

I was just playing around with the CSS of the element and it seems that

{
  display: block;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

centers the alert as well vertically as horizontally.

One addition: I would prefer to have the content scrollable only, to make sure that the alter's header and it's buttons on the bottom are visible always.

[daattali]

@dagola Can you please share a minimal reprex to show your issue? I can't reproduce without having code

[dagola]

@daattali It's the same minimal reprex as above by @vidarsh-shah.

[daattali]

I see, that unfortunately won't be fixed without setting a height on the content.

The sweetalert javascript library automatically sets the height and location of the popup based on the content inside of it. When the popup initialized, the tableOutput hasn't rendered yet so it has a height of 0. sweetalert doesn't know how to resize itself dynamically after its content changed.

If you use anything that has a height (for example, plotOutput automatically has a height of 400px, or if you use a DT::DTOutput(height=500)) then it would be correctly centered

[dagola]

Just found this old issue again and want to share my current solution/workaround:

library(shiny)
library(shinyalert)

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(
        ".sweet-alert {
          display: block;
          margin: 0!important;
          position: absolute;
          top: 50%!important;
          left: 50%!important;
          transform: translate(-50%, -50%);
          max-height: calc(100% - 20px);
        }"
      )
    )
  ),
  useShinyalert(),
  actionButton(
    inputId = "btn",
    label = "Click"
  )
)

server<- function(input, output, session) {
    
    output$test_table<-renderTable({
        mtcars
    })
    
    observeEvent(input$btn, {
        shinyalert(
            text = div(style = "overflow: auto; max-height: 50vh;", tableOutput("test_table")),
            html = TRUE,
           size = "l"
        )
    })
}

shinyApp(ui, server)

The CSS code centers the modal, and wrapping the content in a div with a height 50% of the view port's height ensures that the buttons are always visible.

Thanks for your help @daattali!

[daattali]

@dagola I've experimented with a similar solution before, but it causes a UI glitch where the modal appears in the corner of the screen and then jumps to the center. That wasn't acceptable for me to put in the package, but thanks for sharing the solution for others who may prefer that.