Search Box Shrinks When Clicked In

[DarioS]

An example from the DT website demonstrates that when a text search box gains focus, it becomes narrower, and the text below it, "setosa", can't entirely be seen. It also reduces in height. This must be a bug.

When I click on "setosa" from the dropdown suggestions, then I click in another box, such as underneath Petal.Width, the text changes to ["setosa"].

I also wonder if the search boxes for which searchable = FALSE can be entirely omitted from being displayed to the user. I'd like nothing shown there.

The default padding of the search boxes is rather large. If you narrow the web browser so that the search boxes are narrower, even if the box looks reasonably wide, the large absolute default padding means only one or two characters are visible at a time. The padding is quite big between the input text and the cross symbol to remove the input. This would be annoying when some column contents are much narrower than content in other columns, because default column widths for tables are based on the data.

[yihui]

The shrinking problem should be fixed by the option autoWidth = TRUE, as used by the examples at http://rstudio.github.io/DT/

I'm not sure if disabling or hiding the search boxes is a better idea. If you really want to hide some search boxes, I guess you can use JavaScript.

For the appearance of search boxes, please see examples at http://rstudio.github.io/DT/008-filter.html

[DarioS]

Thanks. The appearance of the boxes webpage is useful. I had a look to see if it was possible to keep the clear buttons and change the padding with CSS, but couldn't find the information. Have you done that before ?

[yihui]

I believe you customize CSS in shiny: http://shiny.rstudio.com/articles/css.html

[DarioS]

autoWidth doesn't fix the problem in my case. It happens when using custom padding of the headings. A small code example is (click in the Name filter box) :

library(shiny)
library(DT)

aTable <- data.frame(Name = LETTERS[1:5],
                     `Protein Size` = sample(c("Small", "Large"), 5, replace = TRUE),
                     Score = rnorm(5)
)

aTable <- cbind(aTable, lapply(LETTERS[1:20], function(x) rnorm(5)))
colnames(aTable)[4:23] <- LETTERS[1:20]

IC <- JS("function(settings, json) {",
         "$(this.api().table().header()).find('th').css({'padding': '4px'});",
         "$(this.api().table().footer()).find('th').css({'padding': '4px'});",
         "}")

shinyApp(
  ui = fluidPage(
    fluidRow(
      DT::dataTableOutput('tbl')
    )
  ),
  server = function(input, output, session) {
    output$tbl = DT::renderDataTable({datatable(aTable,
                                                options = list(dom = 't', autoWidth = TRUE, initComplete = IC),
                                                selection = list(target = 'row+column'),
                                                filter = list(position = "top"), style = "bootstrap", class = "table-bordered")})
  }
)

[yihui]

Changing the padding in this case is not a trivial job. You have to inspect the element very very carefully using the web developer tools of your browser (e.g. Google Chrome), to make sure that your CSS rule overrides all other rules defined on th. I'm not sure if the initComplete callback is an appropriate approach here. Anyway, autoWidth = TRUE solves the problem if you do not use that callback.