jqui_resizabled doesn't work with bsModal

[istik]

Hello,

I've noticed that some people had draggable issue, I currently try resizable function with bsModal, any ideas on how to accomplish this using shinyjqui?

 library("shinyBS")
 library("shinyjqui")

 ui <- basicPage(
   jqui_resizabled(bsModal("modal", "foo", trigger = "", "bar")),
   htmlOutput("button_ui")
 )

 server = function(input, output, session) {
   output$button_ui <- renderUI({
     actionButton("button", "Show modal")
   })
   observeEvent(input$button, {
     toggleModal(session, "modal", "open")
   })
 }

 runApp(list(ui = ui, server = server))

Thanks for help

[Yang-Tang]

Hi @istik , a bsModal contains two parts, the white-colored modal dialog and the grey-colored modal window in the background. The code jqui_resizabled(bsModal("modal", "foo", trigger = "", "bar")) only let the modal window resizable. You may notice there is a small resizable handler appear on the lower right corner of the page. To make a modal dialog resizable, you can use the more flexible jqui_resizable() function like this:

library("shinyBS")
library("shinyjqui")

ui <- basicPage(
  # create a bsModal with id "modal"
  bsModal("modal", "foo", trigger = "", "bar"),
  htmlOutput("button_ui")
)

server = function(input, output, session) {
  # when shiny starts, find the bsModal with id "modal" and make its modal
  # dialog resizable
  jqui_resizable("#modal .modal-content")

  output$button_ui <- renderUI({
    actionButton("button", "Show modal")
  })
  observeEvent(input$button, {
    toggleModal(session, "modal", "open")
  })
}

runApp(list(ui = ui, server = server))

The jqui_resizable() function use a jquery selector to locate the target. The selector #modal .modal-content used here means the element with class modal-content inside the parent element with id modal. For the example above, the entire bsModal is an element with id modal, the modal dialog inside it has a class modal-content. By default, resizable allow element to be resized in both x and y direction. For modal dialog, you may only want its width to be adjustable. You can make use of the option handles like this: jqui_resizable("#modal .modal-content", options = list(handles = 'e'))

Hope this make sense to you. :)

[istik]

thanks :D it helps