Mainpanel below sidebarpanel

[rafanmir]

Hi,

I'm building an app with shiny and when I add any bootswatch theme the main panel moves below the sidebar panel. I tried forcing them to stay in the same row using fluidRow and I noticed there seems to be a right margin for both panels (screenshot below). But then I set all margins to 0 (style = "margin: 0 0 0 0"). Is there any other setting I should change so I can have the main panel next to the sidebar panel?

[thomaspark]

Hey @rafanmir, does the same happen for default Bootstrap?

Could you share a demo of this we can inspect?

[rafanmir]

I tested with the default bootstrap and I had the same issue. Here's the code.

`ui <- fluidPage(
theme = bs_theme(bootswatch = "journal"),

Title

titlePanel("Title"),

Input values - sidebar

sidebarPanel(
HTML("

Patient characteristics

"),

numericInput("age", label = "Age:", value = 80, min = 0, max = 120, step = 1),
radioButtons("sex", label = "Sex:", choices = list("Female" = 1, "Male" = 0)),
radioButtons("chf", label = "Congestive heart failure:", choices = list("Yes" = 1, "No" = 0)),
radioButtons("diabetes", label = "Diabetes:", choices = list("Yes" = 1, "No" = 0)),
# Give option to choose a threshold
numericInput("thresh", label = "Risk threshold:", value = 0.2, min = 0, max = 10, step = 0.01),
actionButton("submitbutton", "Submit", class = "btn btn-primary")

),

#Main panel
mainPanel(
tags$label(h3("Recommendation:")),

#Test
verbatimTextOutput('test', placeholder = F),

#Plot
plotOutput('plot1'),

#Recommendation
verbatimTextOutput('recommend', placeholder = F), # Status/Output Text Box

#Table
tableOutput('table1') # Prediction results table #or 'tabledata'

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

Output 1: plot1

output$plot1 <- renderPlot({

ggplot() + aes(x = c(1:11), y = c(2:12)) + geom_ribbon(mapping = aes(ymin = c(1:11), ymax = c(5:15)), fill = "grey") +
  geom_line(size = 2, colour = "red") + labs(title = "graph") + 
  geom_line(aes(y = input$thresh), linetype = "dashed", size=1) + theme_bw()

})

rec <- reactive({

recommend.f(x = pred$risk, thresh = input$thresh)

})

output$recommend <- renderText({"recommended wait time"
})

Create table1

output$table1 <- renderTable({

data.frame(Risk = 0.19,
           C.int = paste(0.15,"-",0.22))

})
}
shinyApp(ui = ui, server = server)`

[thomaspark]

I recommend working it out in vanilla Bootstrap first. Once that's looking good, try with a Bootswatch theme. There may be a bug with the markup that's generated.

[rafanmir]

I'll try that, thanks.

[rafanmir]

Just adding some info in case anyone else has the same issue. This is a problem with the bslib package, and happens with bootstrap versions 4 and 5. It can be fixed if you use sidebarLayout() for the sidebar and main panels: rstudio/bslib#419

[thomaspark]

Thanks for the follow-up and resolution.

[nick-youngblut]

Just adding some info in case anyone else has the same issue. This is a problem with the bslib package, and happens with bootstrap versions 4 and 5. It can be fixed if you use sidebarLayout() for the sidebar and main panels

I ran into this problem too. It would help to mention this issue in the main docs, given that many shiny app developers use sidebarPanel(); mainPanel(), since it is basically the default for app development.