How to: increase height of a Multiple Selection list box to avoid scrolling

Problem - it is not suitable to use short multiple selection lists with big numbers of items. :frowning:
Solution - expand height of selection lists B-)

I found some variants how to avoid scrollbars in MultiSelect elements.
Often it leads to changing original CSS, LESS (SASS) or even template.

After some research I found alternative templates from UrdhvaTech.
But it is new tepmlate and Iā€™m not sure will they follow new SuiteCRM versions fast enough.
If they need it - sure. But what if not?
I found a link here how to do it with CSS changing a little bit. But it doesnt work with original template.

How to. :woohoo:

I think here is better way to avoid problems in the future after updates and back your improvements easy.

I suggest to use JQuery and change elements you need but only as a user interface.

  1. Lets move to template folder. For example :

  2. Add own JS file or code directly to load function style.js

  3. Add JS code or link to your js file and call the function you wrote./var/www/html/suitecrm/themes/SuiteP/js/style.js

You need expand only select tag with multiple selection. It means in the div with type=multienum.
I add the code to the $(window).load(function () and it works.

$(ā€˜div[type=ā€œmultienumā€] > selectā€™).each(function(){ $(this).attr(ā€˜sizeā€™, $(this)[0].length) })

Good idea to run Repair > Quick Repair and Rebuild before testingā€¦
Check the CRM cache folder has new version./var/www/html/suitecrm/cache/themes/SuiteP/js/style.js

Good luck ! B-)
Alexey

I have an issue when with Create form I have a small timeout.
It means that script in $(window).load() finish work before HTML loaded.

Now I change to $(document).ready() function but it is similar in most cases.
I use simple but not the best solution with timeout() function.
Some time delay tuning makes it suitable.

    
    setTimeout(function () {
      $('select[multiple="true"]').each(function(){ $(this).attr('size', $(this)[0].length) });
    }, 1500);

Have a nice workflow :slight_smile: