Box and tabBox overlap

[elia427]

Thanks for the awesome work!

I wanted to have a table on the left and a tab box on the right on the page. The box and tabBox overlap when one resizes the browser. It seems the dataTableOutput doesn't resize with the box.

library(shiny) library(shiny.semantic) library(semantic.dashboard) library(plotly) library(DT)

ui <- dashboardPage( margin = TRUE, dashboardHeader( title = "Version 2.0", titleWidth = "thin",

logo_path = "http://d2v95fjda94ghc.cloudfront.net/appsilon_logo.png",

    logo_align = "center",
    show_menu_button = TRUE,
    center = h3("Test header"),
    right = h5(Sys.time(),  style = "margin-right: 5px"),
    dropdownMenu(type = "notifications",
                 taskItem("Project progress...", 19, color = "red")),
    dropdownMenu(
        icon = icon("red warning sign"),
        notificationItem("This site is under development. Results may change!", color = "red")
    )
),

dashboardSidebar(
    class = "my_sidebar",
    visible = FALSE,
    closable = TRUE,
    pushable = TRUE,
    side = "left",
    size = "thin",
    color = "teal",
    sidebarMenu(menuItem(tabName = "Tab1", "Tab 1"))
),
dashboardBody(tabItems(
    tabItem(
        tabName = "Tab1",
        fluidRow(
            valueBox(
                "Unread Mail",
                144,
                icon("mail"),
                color = "blue",
                width = 6,
                size = "small"
            ),
            valueBox(
                "Spam",
                20,
                icon("mail"),
                color = "red",
                width = 5,
                size = "small"
            ),
            valueBox(
                "Readed Mail",
                666,
                icon("mail"),
                color = "green",
                width = 5,
                size = "small"
            )
        ),
        fluidRow(
            box(
                title = "Left Box",
                color = "blue",
                ribbon = FALSE,
                title_side = "top left",
                width = 10,
                column(tags$div(
                    DT::dataTableOutput("mtcars_table")
                    ,
                    style = paste0("color:", semantic_palette[["blue"]], ";")
                ), width = 10)
            ),
            tabBox(
                title = "Right box",
                color = "blue",
                width = 5,
                collapsible = FALSE,
                tabs = list(
                    list(menu = "First Tab", content = "Some text..."),
                    list(menu = "Second Tab", content = plotlyOutput("mtcars_plot2"))
                )
            )
        )
    ),
    tabItem(tabName = "Tab2", p("search"))
)),
theme = "darkly"

) server <- function(input, output) { output$mtcars_table <- DT::renderDataTable(mtcars, options = list(dom = 't')) output$mtcars_plot2 <- renderPlotly(plot_ly( mtcars, x = ~ mtcars[, input$variable1], y = ~ mtcars[, input$variable2], type = "scatter", mode = "markers" )) }

shinyApp(ui = ui, server = server)

[osenan]

Hi @elia427 and thank you for your kind words!

You made the right analysis. The dataTableOutput does not know then there is a resize event and its size remains the same. Fortunately, there is a ready to go extension from DT that is exactly what you need. You just need to add:

  output$mtcars_table <- DT::renderDataTable(mtcars, options = list(dom = 't'), extensions = 'Responsive')

to your table.

I hope that this solution is good for you.

Kind Regards, Oriol

[elia427]

Thanks a lot, @osenan. That fixed the overlapping issue. However, the tab panel in the right box are moving out when I minimize the browser. It is not friendly with mobile browsing too. The semantic dashboard is a cutting edge solution for R shiny, but R shiny is supposed to behave nicely in mobile applications. For example, the same application behaves nicely with shinydashboardPlus. Any suggestion on how to make it friendly with mobile browsing?

Cheers, Elia

[osenan]

Hi again, let me answer your two questions.

1. I do not see changes on application when minimising the window. If I resize or reduce the screen size there is a shrink in the total width and there is a point that it is very difficult to see both tabsets but this is normal if you reduce the width. Moreover I do not see different behaviour comparing semantic.dashboard and semanticdashboardPlus testing this particular app.

2. There are several approaches you can take in order to make a Shiny App more mobile friendly. They are all related to app design, layouts and styling. Mobile devices are smaller than computer screens, that means that you will have less space for your app UI and you will require larger font size. This is a whole topic so I will just suggest few tools and ideas that you can try and use as principle:

   • Tools: Use browser developer tools that let you simulate mobile screen to compare different screen sizes and you can have an idea of how your app reacts to different screen sizes
   • Design: For Shiny Apps that will run on the cellphone it generally would be better one column design, larger font sizes. Please be careful with defining distances in pixels as some devices can have small screen but very good resolution. For plots include zooming or focus area and for tables consider than less rows/columns could be displayed to full screen.
   • CSS Media Queries: Many times there is not a perfect solution for your ui that serves for big and small screen sizes. The best approach you can take (although it requires more time) is to use CSS Media Queries and CSS breaks points so depending on your screen size the app will show different styling, and therefore, the max width, fontsize, layout and many other elements will be adapted to the user screen.

Hope it helps, Oriol

[elia427]

Yes, that helps. Thanks a lot for the tips.