Choose Column causing Overflow

[francogiacobbi]

Hello!

I am having an issue with chooseColumn. I can't see the column description and others elements.
I've applied also Bootstrap4 theme but style isn't applied.

This what i can see on chooseColumn

I'm using

jquery-ui.min.css (jQuery UI - v1.13.1 - 2022-02-06)
ui.jqgrid.min.css (jqGrid 4.15.5)
ui.multiselect.min.css (plugin from jqGrid 4.15.5)

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)

This is Firefox inspection:
<ul class="selected connected-list ui-sortable" style="height: 147px;"> <li class="ui-helper-hidden-accessible ui-sortable-handle"></li> <li class="ui-state-default ui-element ui-sortable-handle" title="DIP_ID" style=""> <span class="ui-icon ui-icon-arrowthick-2-n-s">COLUMN1<a href="#" class="action"> <span class="ui-corner-all ui-icon ui-icon-minus"></span></a></span> </li>

<span class="ui-icon ui-icon-arrowthick-2-n-s">
This code piece reports "element causes overflows of another element".
like also
<a href="#" class="action"> do

How can adjust this problem ?

[rany2]

Hi, I fixed this issue in my fork. You could fix it yourself in free-jqgrid by adjusting this line

jqGrid/plugins/ui.multiselect.js

Line 202 in c97869a

var node = $('<li class="ui-state-default ui-element" title="'+(option.attr("title") || option.text())+'"><span class="ui-icon"/>'+option.text()+'<a href="#" class="action"><span class="ui-corner-all ui-icon"/></a></li>').hide();

to:

		var node = $('<li class="ui-state-default ui-element" title="'+(option.attr("title") || option.text())+'"><span class="ui-icon"></span>'+option.text()+'<a href="#" class="action"><span class="ui-corner-all ui-icon"></span></a></li>').hide();

If you're interested in the fork you could check out info in #511 (comment)