ComponeOne Customer Editor inside Popup cannot shown

ComponeOne Customer Editor inside Popup cannot shown

Posted by: 1728884346 on 22 July 2019, 7:40 pm EST

• 

  1728884346

  • Post Options:
  • Link
    Copy

  Posted 22 July 2019, 7:40 pm EST - Updated 29 September 2022, 1:52 am EST

  Hi, refer to following screenshot, is it expecte beaviour when use FlexGrid with Customer Editor in Popup?

  1. when use FlexGrid with Customer Editor in popup, the editor not shown because Popup z-index is 1500.
  2. the Editor only shown when set z-index greater than popup.

  

  1181×387 42.3 KB

  

  1158×570 201 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 23 July 2019, 6:04 pm EST

  Hi,

  Yes, this is expected behavior. The z-index of Popup is 1500 and the z-index of the editor is 2 so the editor is shown below the popup and hence cannot be selected. To solve the issue, you may need to handle the beginningEdit event of FlexGrid and get the editor element and set its z-index to a large value. Please refer to the code snippet and sample attached:

  function onBeginningEdit(s, e) {
          setTimeout(function () {
              var editor = document.querySelector('.popupEditor');
              if (editor) {
                  editor.parentElement.style.zIndex = 9999;
              }
          })
      }
  

  FlexGridCustomEditor.zip

  Regards,
  
  Ashwin

• 

  1728884346

  • Post Options:
  • Link
    Copy

  Posted 26 July 2019, 1:01 pm EST

  Thanks Ashwin,
  
  yes, this is what we did now, but is there any official & permanent solution for this? othewise for each editor under popup we need do such customize.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 28 July 2019, 8:17 pm EST

  Hi,

  The behavior observed is by design. So, we do not see this as a bug. But we have added an enhancement request for this with internal tracking id 392069. We will give an update as soon as this feature is implemented.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 July 2019, 11:16 pm EST

  Hi again,

  You can use CSS to change the z-index of Popup itself instead of changing the z-index of the input controls. It will easier to implement since you are using multiple instances of FlexGrid inside Popup. Please refer to the code snippet below and the sample attached:

  .wj-popup {
          padding: 20px;
          z-index: 1 !important;
      }
  
      div.wj-popup-backdrop {
          z-index: 1 !important
      }
  

  CustomEditor_Updated.zip

  Regards,
  
  Ashwin

• 

  1728884346

  • Post Options:
  • Link
    Copy

  Posted 1 August 2019, 8:06 pm EST

  Hi Ashwin,
  
  thanks, set z-index for popup fix the issue, but it map conflict with other element in page. for temporary we will set z-index in beginningedit and waiting your team implement new feature.