Freshworks CRM UI breaking

Product
, ,
1

Hello team,

When I validate the domain name and API key before attempting to deploy a custom application to a Freshworks CRM account, my application’s user interface (UI) starts to break.
I am unable to see the entire application UI.

A screenshot was also included for your use.

Screenshot 2023-02-06 at 12.48.51 PM
Screenshot 2023-02-06 at 12.48.51 PM2184×1488 161 KB

Thanks!

3

Hi @hemakumar

Sorry for your inconvenience. Can you DM the app zip file so that I can check it from my end? I need to confirm whether it’s specific to the account or generic. Please remove any sensitive information from the app before sharing.

Thanks!

4

@mariappan can you provide some help here?

5

I shared the zip file in a private chat with you, @Mughela Chandresh.

6

Hi @hemakumar ,

Good day!

I’ve created a private thread between you & our engineers. Can you please share the zip over there? We’ll check and get back to you on the issue.

Thanks

7

Thanks for sharing the zip @hemakumar . Will check & get back on this

8

Hi @hemakumar ,

Thanks for your patience.

We’ve debugged your issue & found the root cause. Sharing the details below,

  • First thing to note here, the custom iparams settings screen is working as expected. The issue is with the modal implementation. You’re trying to open up a modal inside of the iparams settings screen.

Please note the iparams screen is itself an iframe and you’re trying to open up another surface on top of the same.

With respect to the implementation part,

  • You’re actually changing elements rendered in the DOM dynamically using css show/hide properties
  • In that process, you’re not setting any fixed height to any of your containers
  • ie. When you open the modal inside of iparams, the parent container height seems to be 0.
    In the case of the child (modal), you’ve tried to set the height to 100% - which again turns out to be 0 (100% of 0px)
  • This might have worked earlier because we used to provide a default height to our iparams wrapper (70vh).
  • Now, we implemented dynamic iparams resizing which would resize based on the content present in the DOM.
  • This didn’t work in your case as expected because of the way the modal is styled

Screenshot 2023-02-06 at 10.15.34 PM
Screenshot 2023-02-06 at 10.15.34 PM1920×742 99 KB

Note: FYI, This thread is on a very similar CSS issue we’ve encountered earlier - Problem with custom app configs display

Solution:

  • This seems more of a classic CSS mistake and can be fixed easily
  • I’ve added a fixed width for your modal’s surrounding container(#second-modal) to accommodate your content.
  • Likewise, you can choose to add to any other outer container & allow modal to scale to full width (guess that’s what you’d have intended to achieve earlier)

To make things even easier for you to understand & experiment I’ve shared the corrected app zip in the private thread as well as in DM.

Please check & let us know if any further questions. Hope this helps.

Thanks.

9

Hi @hemakumar ,

Do you need further assistance on the same?

Regards,
Thakur