ebailey78 / shinyBS

Twitter Bootstrap Components for Shiny
182 stars 47 forks source link

bsModal and navbarpage #12

Closed alainva closed 9 years ago

alainva commented 9 years ago

Do you think it's possible to combine the use of bsModal and a navbarpage so that the bsButton only appears on a defined tab; if i try this in ui.R, i receive this message from server : Failed to load resource: the server responded with a status of 500 (Internal Server Error) Thanks KR Alain

ui.r

shinyUI(bootstrapPage(

shinyUI(navbarPage("testtest",

tabPanel("Test1" ,h1("Hello, welcome to shiny") ),

tabPanel("Test2" ,h1("Hello, welcome to shiny 2") ,bsButton("moTrig", "open Modal", style = "primary"),

bsModal("moMod", "Welcome message", trigger = "moTrig", tags$head( tags$style(HTML(" .modal{ width: 90%; left: 5%; margin-left:auto; margin-right:auto; height: auto; } .modal-body { color: green; } ")) ),

    h1("Hello, welcome to shiny3"),         )

)

) ))

HermanSontrop commented 9 years ago

Hi,

yes it is. Try the ui.r & server.r code below. You made a few mistakes in ui.r. You should not refer to shinyUI twice and you can leave out bootstrapPage if you include navbarPage.

A related note: In the next release RStudio will implement Bootstrap 3 in Shiny. shinyBS uses the Bootstrap 2.x framework. I expect that a lot of the shinyBS code will break if you update Shiny when the next release comes out. There is a bootstrap 2 compatibility layer offered by RStudio by the way. (also, I'm not the author of ShinyBS so maybe there is some progress in this area that I'm not aware of).

ui.r

    library(shinyBS)
    shinyUI(navbarPage("Modal test",

    tabPanel("Test1",
      h1("Hello, welcome to shiny")
    ),

    tabPanel("Test2",
      h1("Hello, welcome to shiny 2"),

      bsButton("moTrig", "open Modal", style = "primary"),

      bsModal("moMod", "Welcome message", trigger = "moTrig",
        tags$head(
        tags$style(HTML("
          .modal{
            width: 90%;
            left: 5%;
            margin-left:auto;
            margin-right:auto;
            height: auto;
          }
          .modal-body {
            color: green;
          }
          "))
        ),

        h1("Hello, welcome to shiny3")       
      )  
    )
  ))

server.r

  shinyServer(function(input, output, session) {
  })