R brilliant size filter box to narrow to see the text

Question

I am building an R control panel, and when I put my data into a table using the DT package and renderdatatable (). I have filters at the top of each column, the search box is too narrow to see the text and select an option. Here is the image:

Does anyone know how to increase the width?

Here is my code for the data code on server.r:

output$table <- DT::renderDataTable(DT::datatable({ data <- rv$data if (input$sour != "All") { data <- data[data[,1] == input$sour,] }else{data} if (input$sour1 != "All") { data <-data[data[,2] == input$sour1,] }else{data} if (input$tran != "All") { data <-data[data[,3] == input$tran,] }else{data} },filter='top')) 

here is the code in the ui.r file:

  tabItem(tabName = "ResultsTable", fluidPage( headerPanel( h1("List", align="center", style = "font-family: 'Verdana';font-weight: 800; line-height: 1.1; color: #151515;")), # fluidRow( # column(8, DT::dataTableOutput("table",width = "100%"),offset = 2)))), # # Create a new Row in the UI for selectInputs fluidRow( column(4, selectInput("sour", "Name:", c("All", unique(as.character(df[,1])))) ), column(4, selectInput("sour1", "Number:", c("All", unique(as.character(df[,2])))) ), column(4, selectInput("tran", "Code:", c("All", unique(as.character(df[,3])))))), # Create a new row for the table. fluidRow(column(11, DT::dataTableOutput("table",width = "95%"))))) 

I tried this, but this did not work:

  output$table <- DT::renderDataTable(DT::datatable({ data <- rv$data if (input$sour != "All") { data <- data[data[,1] == input$sour,] }else{data} if (input$sour1 != "All") { data <-data[data[,2] == input$sour1,] }else{data} if (input$tran != "All") { data <-data[data[,3] == input$tran,] }else{data} },filter='top',options = list( autoWidth = TRUE, columnDefs = list(list(width = '200px', targets = "_all")) ))) 

Answer 1

I solved this problem with CSS:

 input { width: 100px !important; } 

You can also apply this style only to factor filters:

 td[data-type="factor"] input { width: 100px !important; } 

Place the my.css file in the www subdirectory and bind it to it:

 shinyApp( ui = fluidPage( tags$head( tags$link( rel = "stylesheet", type = "text/css", href = "my.css") ), DT::dataTableOutput(...) ) 

Answer 2

This question has been answered.

Also, to use range sliders to filter rows within ranges , consider converting the Date List column to a date format using as.Date() .

Answer 3

Late post since I ran into the same problem.

Expanding the answer to Michiles a bit, since after clicking on the filter there were still problems with the width of the drop-down field.

 td[data-type="factor"] input { min-width: 100px !important; } td[data-type="factor"] div.selectize-input { min-width: 100px !important; }