0

I have tried searching a method / options in DT::datatable to change the default width of search box. Answers available are for HTML/CSS etc but I am not sure how to incorporate the width = 200px or 200% in options =list(search = list(search="", width = 200px # or width = "200%" is not working.

DT::datatable(
  mtcars,options = list(dom="ft",search =list(search = 'Type here to search',
  width= "200%")))

Any guidance on dom elements in DT will be appreciated. Thanks.

anuanand
  • 400
  • 1
  • 9

2 Answers2

1

We can style RMarkdown in two ways as shown here then we can apply a specific style using different CSS selectors i.e. id, class name or even for inputs as in our case. Here is a solution include the CSS directly within the RMarkdown file.

---
title: "Untitled"
output:
  html_document: default
  pdf_document: default   
---
<style>
   h1.title{
        color:red;
   }

   .dataTables_wrapper  .dataTables_filter {
          width: 100%;
          float: none;
          text-align: center; 
          //align the Search box to center. left and right also valid 
   }

   input[type="search"] {
        height: 28px;
        width: 300px;
        margin: 0;
        padding: 0;
        font-size: 10px;
        border: 1px solid #CCCCCC;
  } 

</style>



```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown
```{r cars}
library(DT)
#summary(cars)
DT::datatable(
mtcars,options = list(dom="ft",search =list(search = 'Type here to search')))
```
A. Suliman
  • 12,923
  • 5
  • 24
  • 37
  • Great. Let me check this and the related links shared. Any further ideas on dom elements ? E.g. how to manipulate other elements like i, r, etc. How to align the Search box to Center / Left (default is right). – anuanand Jul 01 '18 at 04:24
  • @anuanand Please check my update. Other elements can be style as any HTML tags using CSS. Open your document in a browser and use _Inspect_ to understand the document structure. – A. Suliman Jul 01 '18 at 07:46
  • Thanks a lot. Let me learn this and more of HTML. Seems everything is possible if one is ready to learn..! – anuanand Jul 01 '18 at 15:37
0

The only thing worked for me is this css.

$(document).ready(function(){

$('#datatable-buttons_filter').css({"position":"relative","left":"-100px"});
});
Jithesh Jose
  • 1,781
  • 1
  • 6
  • 17