2

Shinydashboard has a responsive layout that starts to stack elements and at a certain point when reducing the screen width. I would like to know if and how I can define this point because the defaults don't fit my layout.

The following example illustrates the problem. Content elements get compressed beyond the point of elegance and usefulness before the responsive layout decides to hide the sidebar and to stack the UI elements.

enter image description here

I guess it has something to do with these defaults.

nevrome
  • 1,471
  • 1
  • 13
  • 28
  • It has to do with the `@media` query in the default css – Wilmar van Ommeren Jan 21 '19 at 13:13
  • Do you have an idea if and how I could change that behaviour? – nevrome Jan 22 '19 at 13:24
  • You can, I did it a while ago (didn't want the collapsing to happen at all). You need to add your custom CSS file in which you adapt the @media tag. Maybe look into this answer: https://stackoverflow.com/questions/47292295/shiny-dynamic-content-based-on-window-size-like-css-media-query – Wilmar van Ommeren Jan 22 '19 at 14:49
  • I see - that is helpful. This led me to this: https://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less. Shiny and Shinydashboard work with bootstrap 3.3 at the moment so I guess that's the way to go. Unfortunately these solutions do not apply. I guess the shiny layer hides the bootstrap classes? – nevrome Jan 22 '19 at 16:11
  • 1
    I was not able to find a satisfying solution to this problem and ended up fixing the page width for certain screen widths: `@media (max-width:888px) and (min-width:768px) { #site { width: 888px; } }` – nevrome Jan 24 '19 at 08:58
  • Awesome! I'm quite busy at the moment, that's why I don't have time to find and post an entire answer:) – Wilmar van Ommeren Jan 24 '19 at 09:27
  • Oh - I already gave up on this. But of course it would be great if you have time for an answer, because my current solution has several downsides. – nevrome Jan 24 '19 at 09:37

1 Answers1

1

I solve this kinds of problems with this workaround:

ui <- tagList(
  tags$style("html,body{background-color: white;}
                .container{
                    width: 100%;
                    margin: 0 auto;
                    padding: 0;
                }
               @media screen and (min-width: 700px){
                .container{
                    min-width: 1850px;
                    max-width: 1920px;
                }
               }
             "),
tags$div(class="container",
  dashboardPage( title="min and max width"
    ,dashboardHeader(title = p("app header") )
    ,dashboardSidebar(
    )
    ,dashboardBody(
      tags$head(
        tags$style(
          "
          body{
              height: auto;
              margin: auto;
              overflow-x: auto;
          }"
        )
    ) # head
    ) # dashboardbody
  )
)
)
server<- function(input, output, session) {}

shinyApp(ui,server)

This states a minimum width for the page (the max-width is optional), and adds a scrolling bar when needed: (>700 <1850).

Ferroao
  • 3,042
  • 28
  • 53