material_tabs don't quite fit causing scroll bar

[da11an]

This is picky, but there's an unnecessary scroll bar at the bottom of the window when using material_tabs. This can be seen on https://ericrayanderson.github.io/shinymaterial/ It would be nice if the sizing was fixed to fit.

[Seyphaton]

Just use this css to remove left/right margin from the row
.row{
margin: auto;
}

[Mikea0228]

Hi @Seyphaton, I don't think your solution works when material_row() and material_column() are used. I managed to prevent horizontal scrolling by using the following css:

library(shiny)
library(shinymaterial)
library(shinyjs)
ui <- material_page(
  title = "demo of horizontal scrolling",
  
  shinyjs::inlineCSS("body {overflow-x: hidden;}"),
  material_tabs(
    tabs = c(
      "Tab 1" = "tab_1",
      "Tab 2" = "tab_2",
      "Tab 3" = "tab_3",
      "Tab 4" = "tab_4",
      "Tab 5" = "tab_5"
    )
  ),
  material_tab_content(tab_id = "tab_1",
                       material_row(
                         material_column(width = 6,
                                         material_card(title = "1")),
                         
                         material_column(width = 6,
                                         material_card(title = "2"))
                       ))
  
)
server <- function(input, output) {
  
}

shinyApp(ui, server)

[Seyphaton]

The problem is the shinymaterial css:

.col .row {
    margin-left: -.75rem;
    margin-right: -.75rem;
}

@ericrayanderson : This is correct for rows inside "normal" columns but not inside material-tabs (also columns):

.col:not(.shiny-material-tab-content) .row {
    margin-left: -.75rem;
    margin-right: -.75rem;
}

@Mikea0228 : You can bypass the problem using:

.shiny-material-tab-content .row {
    margin-left: 0!important;
    margin-right: 0!important;
}