Main panel below side panel

[rafanmir]

Hi,

I'm using shiny and when whenever I use bs_theme() (with or without a bootstrap 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?

I also tried changing the version, with version 3 they get side by side but in versions 4 and 5 I get the same problem.

Here's some code:

library(shiny)
library(bslib)

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

titlePanel(h1("Title")),

sidebarPanel(
h3("Inputs"),
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)),
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(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$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"
})

output$table1 <- renderTable({

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

[cpsievert]

You can fix this by putting the sidebarPanel() and mainPanel() into a sidebarLayout() (we've already looked at "automatic fix" for this in https://github.com/rstudio/bslib/pull/37, but I don't think we'll actually provide one)

[github-actions[bot]]

This issue has been automatically locked. If you believe you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.