ebailey78 / shinyBS

Twitter Bootstrap Components for Shiny
182 stars 47 forks source link

hr in bsModal Body #31

Closed ghatfan99 closed 9 years ago

ghatfan99 commented 9 years ago

Hello,

thank you for your work, i have a question: i want to organize the modal body into div with classes =row-fluid, it works fine, but i can not add hr() between my lines, i tried several methods, but nothing, when i launch element inspection in the browser i can see it? here is an example of application code:

rm(list=ls())

library(shiny)
library(shinyBS)
library(shinyjs)

modal = shinyApp(ui =bootstrapPage(
  useShinyjs(),
  div(class="row-fluid",
      column(10, offset = 2,
             h4("test ui output"),
             actionButton(inputId = "click", label = "test Modal output"),
             bsModal(id = "modal", title = "Modal render", trigger = "click", size = "large",
                     div(class="row-fluid",
                         column(width=6,
                                h6("first Oper" ,style="color:blue; font-weight: bold;")
                         ),
                         column(width=6,
                                h6("Second Oper", style="color:blue;font-weight: bold;")
                         )
                     ),
                     hr(style="border:5px;"),                               
                     div(class="row-fluid",
                         column(width=6,
                                textOutput(outputId = "secondOper")
                         ),
                         column(width=6,
                                textOutput(outputId = "firstOper")
                         )
                     ),
                     tags$hr(),
                     div(class="row-fluid",
                         column(width=6,
                                h6("second Step" ,style="color:blue;font-weight: bold;")
                         ),
                         column(width=6,
                                h6("first Step" ,style="color:blue;font-weight: bold;")
                         )
                     ),
                     div(class="row-fluid",
                         column(width=6,
                                textOutput(outputId = "secondStep")
                         ),
                         column(width=6,
                                textOutput(outputId = "firstStep")
                         )
                     ),
                     hr(style="border-top:5px;"),
                     div(class="row-fluid",
                         dataTableOutput("cars")
                     ),
                     actionButton("buttonsubmitum", "Submit", class="btn btn-primary")

             )

      )                
  )            
),
server= function(input, output, session){
  output$cars = renderDataTable(cars, options = list(pageLength=10))
} )
runApp(modal, launch.browser = TRUE)

thanks

ebailey78 commented 9 years ago

I think you are running afoul of Bootstrap grid system. Its drawing the hrs but they have 0 width so you can't see them. Try creating a row with a full width column to house the hr like:

div(class = "row-fluid", column(width = 12, hr()))

and see if that works. It did for me.

Thanks,

Eric

ghatfan99 commented 9 years ago

hello, thanks a lot it works.

Alex