0

I am having an issue with chooseColumn method of free-jqgrid plugin ver. 4.15.5 (on Github) . I can't see the column description and others elements. I've applied Bootstrap 4 theme.

The original goal is something like this

enter image description here enter image description here

This what i can see after chooseColumn method has applied (obviously columns names are different)

this what i can see

With firefox inspection descriptions are in HTML code but won't shown.

This is an html extract of one item

<li class="ui-state-default ui-element ui-sortable-handle" title="NAME" style="">
<span class="ui-icon ui-icon-arrowthick-2-n-s">NAME<a href="#" class="action">
<span class="ui-corner-all ui-icon ui-icon-minus"></span></a></span>
</li>

I'm using

CSS

jquery-ui.css (http://ajax.googleapis.com/ajax/libs/jqueryui/1.13.1/themes/redmond/jquery-ui.css
ui.jqgrid.min.css (jqGrid 4.15.5)
ui.multiselect.min.css (plugin from jqGrid 4.15.5)

JS

jquery 3.5.1
jquery-ui.js (jQuery UI - v1.13.1 - 2022-02-06))
ui.multiselect.js (plugin from jqGrid 4.15.5)
grid.locale-it.js (jqGrid 4.15.5)

The problem seems to be in ui-icon class that at loading is

.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -.25em;
  position: relative;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;

If i remove overflow and change text-indent to positive number the description has shown.

But "minus" icon and "plus" icon won't shown and there're others minor css-bug.

Thanks in advance.

Franco
  • 101
  • 9

2 Answers2

0

columnChooser method is designed to work only with jQuery UI CSS framework and can not be used with bootstrap theme in jqGrid.

That is the reason that this method is available in grid.jqueryui.js module, which points to its nature.

You can look at this post too

Tony Tomov
  • 3,122
  • 1
  • 11
  • 18
  • Thanks. In your opinion, is possible adjust css minor bug or is better choose another way. Consider that free-jqgrid makes what i need at the moment (with bootstrap 4), only this little "bug" on ui-dialog. – Franco Apr 07 '22 at 07:41
0

First thanks to tyddynonn at github Solved in this way:

The problem is in the multiselect widget. It treats tags as self-closing when under latest specs they are not. So in 'ui.multiselect.js' at around line 202 in function _getOptionNode, change

var node = $('<li class="ui-state-default....hide();

to

  var node = $('<li class="ui-state-default ui-element" title="' + option.text() + '" data-selected-value="' + option.val() + '"><span class="ui-icon"></span>' + option.text() + '<a href="#" class="action"><span class="ui-corner-all ui-icon"></span></a></li>').hide();
Franco
  • 101
  • 9