Select2 Dropown in Handsontable goes out of layout/cell

2
votes

Please check the fiddle at http://jsfiddle.net/rajivseelam/zfmdu4wt/5/

I am using select2 3.5.2 and handsontable latest.

To add select2 dropdown to handsontable, I used plugin at https://github.com/trebuchetty/Handsontable-select2-editor

Steps to see the issue:

  1. Click on an empty cell under Cost column, it shows a dropdown with options fixed and variable.enter image description here

  2. Click again on the same cell, it shows dropdown but it goes out of cell.enter image description here

The following control the dropdown in handsontable:

        {
          data: 'cost',
          editor: 'select2', 
          renderer: customDropdownRenderer,
          select2Options: { 
                  data: [{id:'fixed',text:'Fixed'},{id:'variable',text:'Variable'}] ,
                  dropdownAutoWidth: true,
          }
        },

I have been trying to fix this problem, but I couldn't. Any help would be appreciated.

1
jqueryhtmlcssjquery-select2handsontable
The select-drop element seems to be getting inline styles so I assume the Javascript is injecting CSS code to that box, you could edit it using jQuery by doing some calculations. – odedta
Yes, I have tried to do that. I am not table to think of calculations as it was working fine the first time. There is a method in Select2 positionDropdown, in which container.offset() changes when clicked the second time. – rjvim
Well, I tried reproducing your example with the original files from cdnjs.com and it didn't work so i'm not sure :P – odedta
You mean when you used original files, issue didn't occur? Would you please tell me which files did you change? Is it just Select2 3.5.2? – rjvim
No, it didn't work, i'm trying again. – odedta

1 Answers

1
votes

Try commenting the following line this.$textarea.offset($(this.TD).offset()); in the select2-editor.js (Select2Editor.prototype.open function)