Editor window keeps growing horizontally when opened

crcucb

I've noticed this a few times intermittently but this is happening consistently now for this example data set.

If you go to here, https://jyorkejudge.org/
Select the row showing and click on Edit Address

The editor window opens, then just keeps growing.

allan

DataTable's resize observer is getting a bit over excitted there. I'm not entirely sure why on a first inspection. Thank you for the link I'll get back to you once I've had a chance to spend some time on it.

Allan

crcucb

I think it has to do with the comnents dt in the editor form. It contains a column called ActLogComments and the editor is expanding until the contents of ActLogComments fit on one row (aka no wrapping}.
Below is where I define the comments data field in the editor. I tried adding a scroll bar but it didn't work.
I also don't see any type of nowrap descriptor.

                { label: '',  name: 'Comments',  type: 'datatable', 
                        autoWidth: false,
    
            className: "full block" ,
                      submit: false, 
                      paging: false, 

                      editor: commentsEditor,
                      info: false,  
                
                      select: {
                          style: 'single',
                      selector: 'td:not(:first-child)'
                          },
                config: { searching: false, 
                    scrollX: true,
 
                    select :true,
    
                                    select: true,
  
                                    ajax: {  
                                       url: 'php/Addresses_Comments_Nested_DT_test.php',
                                    type: 'POST',
                    
                            data: function (d) {
                          //if (DataTable.isDataTable('#Addresses')) {
                          // debugger;
                            if (maintable)  { 
                                    var selected = maintable.row({ selected: true });
                                    if (selected.any()) {
                                        
                                        d.AddressAID = selected.data().Addresses.AddressAID;

                                    }
                                    }
                                    //}
                                }
                                
                                },
                buttons: [
                    { extend: 'edit', editor: commentsEditor },
                    { extend: 'remove', editor: commentsEditor, 
                            formButtons: [
                                {
                                    label: 'Delete',
                                    className: 'btn-danger',
                                    fn: function (e) {
                                        // Custom logic here
                                        this.submit(); // Submit the form
                                        
                                    }
                                },
                                {
                                    label: 'Cancel',
                                    fn: function (e) {
                                        this.close(); // Close the form
                                    }
                                }
                            ], // formButtons: [
                            formMessage: function ( e, dt ) {
                                // let data = dt.rows({ selected: true }).data();
                                                            // var varConfirmation = '\'' + data[0]['Act']['ActName'] + '\' Dated: ' + data[0]['ActLog']['ActLogDT'] + ', Comments: ' + data[0]['ActLog']['ActLogComments'];

                              var rows = dt.rows( { selected: true } ).data().toArray();
                                                                             
                              var message = "Are you sure you want to delete the following records?\n";
                              for (var i = 0; i < rows.length; i++) {
                       
                             //   message += "- Date: " + rows[i].ActLog.ActLogDT + "\n"; // Assuming each row has an 'id' property
                                message += "- " + '\'' + rows[i].Act.ActName + '\' Dated: ' + rows[i].ActLog.ActLogDT + ', Comments: \'' + rows[i].ActLog.ActLogComments + "\' \n"; // Assuming each row has an 'id' property
                                    }       
                              return message;
                                        } // formMessage: function ( e, dt ) {
                                     } //  { extend: 'remove', 
                         ], //    buttons: [
                        columns: [
                //          { title: 'AID',                 data: 'ActLog.ActLogAID' },   
                            { title: 'Name',                data: 'view_Residents.FullNameParty' },          
                            { title: 'DateTime',                data: 'ActLog.ActLogDT'},       
                            { title: 'Action',              data: 'Act.ActName'},       
                            { title: 'Comments',    data: 'ActLog.ActLogComments' },      
                            { title: 'Req FU',      data: 'ActLog.ReqFollowUp' }, 
                            { title: 'Followed Up',             data: 'ActLog.FollowedUp' }    
                            
                        ]
                } 

crcucb

I don't see a nowrap style applied to the commentsTable. I am already including the ellipsis.js so I decided to apply that class to the comments column:

{ title: 'Comments',    data: 'ActLog.ActLogComments',className: 'limit-wrap-text' ,render: DataTable.render.ellipsis( 28 ), searchable: true  },     

This does limit the size of the comments column and it stops it from growing further. Note if I change this to 40 or 50, then the editor will grow until all of the 40 or 50 characters appear on one line.

Hoping we can find out ultimately why. I did not modify the page link that I shared, I did the above on the test page so see if it worked.