From bdda5e6a375291bbf7e6b1229e59f0cd8fc28929 Mon Sep 17 00:00:00 2001 From: shrektan Date: Mon, 13 Apr 2020 22:18:36 +0800 Subject: [PATCH 1/4] set the size of the input to "1" so that it won't change the width of the table --- R/datatables.R | 4 ++-- inst/htmlwidgets/datatables.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/R/datatables.R b/R/datatables.R index ab6503b0..c485a534 100644 --- a/R/datatables.R +++ b/R/datatables.R @@ -527,7 +527,7 @@ filterRow = function( style = 'margin-bottom: auto;', tags$input( type = if (clear) 'search' else 'text', placeholder = 'All', - style = 'width: 100%;' + style = 'width: 100%;', size = "1" ) ) } else { @@ -536,7 +536,7 @@ filterRow = function( style = 'margin-bottom: auto;', tags$input( type = 'search', placeholder = 'All', class = 'form-control', - style = 'width: 100%;' + style = 'width: 100%;', size = "1" ), if (clear) tags$span( class = 'glyphicon glyphicon-remove-circle form-control-feedback' diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js index 1053375f..af080227 100644 --- a/inst/htmlwidgets/datatables.js +++ b/inst/htmlwidgets/datatables.js @@ -754,7 +754,7 @@ HTMLWidgets.widget({ (function(cell, current) { var $cell = $(cell), html = $cell.html(); var _cell = table.cell(cell), value = _cell.data(); - var $input = $(''), changed = false; + var $input = $(''), changed = false; if (!immediate) { $cell.data('input', $input).data('html', html); $input.attr('title', 'Hit Ctrl+Enter to finish editing, or Esc to cancel'); From f6e96e3b5510197a589d1f5e0c9ef414fad78c8f Mon Sep 17 00:00:00 2001 From: shrektan Date: Mon, 13 Apr 2020 23:26:32 +0800 Subject: [PATCH 2/4] filter now keeps the column width under the bootstrap theme --- R/datatables.R | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/R/datatables.R b/R/datatables.R index c485a534..ef3e8077 100644 --- a/R/datatables.R +++ b/R/datatables.R @@ -532,10 +532,10 @@ filterRow = function( ) } else { tags$div( - class = if (clear) 'form-group has-feedback' else 'form-group', + class = if (clear) 'form-group has-feedback row' else 'form-group row', style = 'margin-bottom: auto;', tags$input( - type = 'search', placeholder = 'All', class = 'form-control', + type = 'search', placeholder = 'All', class = 'form-control input-sm', style = 'width: 100%;', size = "1" ), if (clear) tags$span( From 542ded3ed9efddd1f31c15778dfb5593c5a92d05 Mon Sep 17 00:00:00 2001 From: shrektan Date: Tue, 14 Apr 2020 00:22:15 +0800 Subject: [PATCH 3/4] tweak the css of the filter --- R/datatables.R | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/R/datatables.R b/R/datatables.R index ef3e8077..26c1b043 100644 --- a/R/datatables.R +++ b/R/datatables.R @@ -536,7 +536,7 @@ filterRow = function( style = 'margin-bottom: auto;', tags$input( type = 'search', placeholder = 'All', class = 'form-control input-sm', - style = 'width: 100%;', size = "1" + style = 'width: 100%; padding-right: 0px;', size = "1" ), if (clear) tags$span( class = 'glyphicon glyphicon-remove-circle form-control-feedback' From 901bebb404ee5cb7753812fd1e02ee82da43d586 Mon Sep 17 00:00:00 2001 From: shrektan Date: Tue, 14 Apr 2020 01:38:14 +0800 Subject: [PATCH 4/4] a not good solution... --- inst/htmlwidgets/datatables.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js index af080227..94c79727 100644 --- a/inst/htmlwidgets/datatables.js +++ b/inst/htmlwidgets/datatables.js @@ -754,7 +754,8 @@ HTMLWidgets.widget({ (function(cell, current) { var $cell = $(cell), html = $cell.html(); var _cell = table.cell(cell), value = _cell.data(); - var $input = $(''), changed = false; + var $divInput = $('
'); + var $input = $divInput.children("input"), changed = false; if (!immediate) { $cell.data('input', $input).data('html', html); $input.attr('title', 'Hit Ctrl+Enter to finish editing, or Esc to cancel'); @@ -763,9 +764,9 @@ HTMLWidgets.widget({ if (inArray(_cell.index().column, disableCols)) { $input.attr('readonly', '').css('filter', 'invert(25%)'); } - $cell.empty().append($input); + $cell.empty().append($divInput); if (cell === current) $input.focus(); - $input.css('width', '100%'); + $input.css('width', '100%').css('padding-right', '0px'); if (immediate) $input.on('change', function() { changed = true;