Combobox problem inside EditableTable

Combobox problem inside EditableTable

  

Hi,

I created a new Editable table and add two comboboxes (ID Card Type and Issue Country), as shown on this image:


The way it works is essentially when a value on the first combobox is selected, the second combobox will change based on the first selection. Everything works, but problem is when the action Ajax Reloads the second combobox the layout is updated to this:


The ''Issue Country'' box just disappears, because its css just changed to not editable using this rule: 

body .EditableTable input:not(.InEditMode), body .EditableTable textarea:not(.InEditMode), body .EditableTable select:not(.InEditMode) {
    color: #333;
    font-size: 14px;
    border: 1px solid transparent;
    background: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}


How to avoid this layout behavior? Cause i need to update the second combo to reflect the new value. The environment I use is Version 9.1.601.0.


Regards,

André

In the extended property of the drop down set "InEditMode = 1" if you want the dropdown to be editable.

I guess it should work, else share your app and I'll try to help you.

Hi Sree Natarajan,

I've tried your suggestion and it didn't work. So I created a new OML so you could test the problem on your own. Hope it can help.

Thanks for helping me.

André

Hi Andre,

Bug in OutSystems.

Temp Solution: Add the below js script either in page or in the site to overcome this issue

$(document).ready(function() {
   $('body').on('DOMSubtreeModified', function() {  
        $('[data-widget-type="EditableTable"] tr.Selected.OnEdit select').addClass('InEditMode');        
    });    
});


Hi, Andre.


I don't know if you still need a solution for this, what I did to mine was add this short CSS fix to the current screen/page.


.EditableTable select:not(.InEditMode), .EditableTable input:not(.InEditMode) {

border: 1px solid #cccccc!important;

background\: white!important;

}


The only problem with this fix is that there's no drop down icon.

How to show the drop down icon in the combo box? Thank you

Sree Natarajan wrote:

Hi Andre,

Bug in OutSystems.

Temp Solution: Add the below js script either in page or in the site to overcome this issue

$(document).ready(function() {
   $('body').on('DOMSubtreeModified', function() {  
        $('[data-widget-type="EditableTable"] tr.Selected.OnEdit select').addClass('InEditMode');        
    });    
});


Thank you for your suggestion Sree Natarajan.

I added your script to the page. What happens is that the internet explorer froze the moment the page is open (and script runs) and any interaction with any button, input, or even with IE is impossible.

Can you please advise?

André


Solution

Hi all, 

The solution with the javascript has a negative impact on editable tables with multi-level drop-downs that are depending on each other. This is a second drop down where the source is updated after changing the first drop down.

When cancelling, the second drop down is cleared, because the system thinks that the drop down was changed due to the javascript.

The solution with the CSS was missing the arrow and was changing the layout of all the elements in the editable table, not only the ones that were inside the edited row.

Therefore I come with a third solution, which is an extension on the CSS solution:

.EditableTable .OnEdit select:not(.InEditMode), .EditableTable .OnEdit input:not(.InEditMode) {
    border: 1px solid #cccccc !important;
    background: white !important;
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    padding-right: 0 !important;
    text-indent: .01px !important;
    -webkit-appearance: none !important;
}

This CSS resolves all the previous issues and creates the layout as needed.

Kind regards,

Remco Dekkinga

Solution

Remco Dekkinga wrote:

Hi all, 

The solution with the javascript has a negative impact on editable tables with multi-level drop-downs that are depending on each other. This is a second drop down where the source is updated after changing the first drop down.

When cancelling, the second drop down is cleared, because the system thinks that the drop down was changed due to the javascript.

The solution with the CSS was missing the arrow and was changing the layout of all the elements in the editable table, not only the ones that were inside the edited row.

Therefore I come with a third solution, which is an extension on the CSS solution:

.EditableTable .OnEdit select:not(.InEditMode), .EditableTable .OnEdit input:not(.InEditMode) {
    border: 1px solid #cccccc !important;
    background: white !important;
    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==) !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    padding-right: 0 !important;
    text-indent: .01px !important;
    -webkit-appearance: none !important;
}

This CSS resolves all the previous issues and creates the layout as needed.

Kind regards,

Remco Dekkinga

Thank you Remco Dekkinga!

This indeed works and is the best solution to my problem. The only thing I noticed is that when the table loads, the first time, the text size of the combo box is small (as expected on the theme) and after reload the combo box (due to data change) the text grows 2 or 3 points.

Kind regards,

André