How to adjust the position of the main panel

shiny
1

Hi everyone,

I have a problem with the positioning of the main panel within a tabPanel. I have a sliderPanel to the left and i want to place a fixed text along with a text based on the input to the sliderPanel to the right. But my problem is that the text( the main panel) is going to the bottom and not on the top of the page, directly next to the sliderPanel. You can see it in the figure below.

Screenshot_14
Screenshot_141074×728 28.5 KB

My code so far is :

tabPanel(h5("What test should I use?",style = "font-family: 'Lobster', cursive;color:red;"),
                                      useShinyjs(),
                                      tags$style(appCSS),
                                       withMathJax(),
                                       sidebarLayout(
                                         fluidRow(column(width = 12,
                                         sidebarPanel(id = "tPanel",style = "overflow-y:scroll; max-height: 600px; position:relative;",
                                           selectInput( "type1Input", "Type of response variable", choices = c("Continuous", "Categorical"), selected = "Continuous"),
                                           selectInput( "type2Input", "Number of explanatory variables", choices = c("1", "2"), selected = "1"),
                                           selectInput( "type3Input", "Type of explanatory variable 1", choices = c("Continuous", "Categorical"), selected = "Categorical"),
                                           conditionalPanel( "input.type3Input == 'Categorical'",
                                                            selectInput( "type4Input", "How many levels?", choices = c( "1", "2", ">2"), selected = "2")),
                                           conditionalPanel( "input.type2Input == '2'",
                                                            selectInput( "type5Input", "Type of explanatory variable 2", choices = c("Continuous", "Categorical"), selected = "Categorical")),
                                           conditionalPanel("input.type4Input == '2' && input.type3Input == 'Categorical'",
                                                            selectInput( "independentInput", "Are your measurements paired?(from the same mouse)", choices = c("Yes", "No"), selected = "No" ))
                                           ),
                                           withBusyIndicatorUI(fluidRow(column(width = 10,
                                             actionButton("Gobutton", "Tell me!", class = "btn-primary")
                                           )))
                                         )),
                                         
                                         mainPanel(column(10, offset = 5,
                                           h4("The appropriate test for the given information is:", 
                                              style = "font-family: 'Lobster', cursive;
                                             font-weight: 500; line-height: 1.1; 
                                              color: #4d3a7d; align:top"), textOutput('results0'),
                                           tags$head(tags$style("#results0{color: red;
                                 font-size: 20px;
                                                                font-style: italic;align:top;
                                                                }")),
                                              br(), br(), br()))), class = "span7")

Do you have aby idea what i am doing wrong ?

Thanks,
John

2

The Shiny UI is built with Bootstrap, which uses a 12-column grid. (Here's a link if you want to dig deeper into css options with Shiny and here's a link about bootstrap's 12-column grid system)

I think your sidebarLayout had width=12 and your mainPanel has width=10. And so the second panel "wraps" down below the sidebar.
Make sure the sum of these two widths equals 12.
Here's some documentation on shiny::column.

I didn't reproduce your issue, so I'm not 100% sure my suggestion will resolve it. (It can be hard to do a reproducible example with Shiny problems, but if this doesn't sort your issue and others don't catch the problem; I encourage you to make a reprex.)

1 Like
3

Hi,

First of all thanks for your reply!

I changed the numbers in order to sum to 12, with different combintations, but still nothing! The only thing that changes is the actual width of the panels and not the positioning of them.

BUT! I removed entirely the "fluidRow" argument from the sidebarLayout() and now I have my mainPanel as i wished!! :slight_smile:

Thanks again,
John

1 Like