[TIP] Changing Element Height in Web Development - A Case Study with Quick View Forms in Dynamics 365

 

Changing Element Height in Web Development - A Case Study with Quick View Forms in Dynamics 365

Introduction

Changing the height of HTML elements is a common requirement in web development. This can often be achieved using CSS, but sometimes it requires a little more effort—particularly when dealing with iframes or other embedded content. In this article, we'll examine a specific case study that deals with adjusting the height of a Quick View form in Dynamics 365, a Microsoft product commonly used for CRM.

The Problem

Quick View forms in Dynamics 365 are generally read-only, meaning they're designed to display information without offering much room for customization. In a model-driven app, Quick View forms usually appear correctly, but when they are displayed on a Power Apps portal, they often show up too short, causing a scrollbar to appear.

The Solution

To resolve this, we can use JavaScript to modify the height and appearance of the Quick View form after it has fully loaded. Below is a sample code snippet that shows how to extend the height of a Quick View form:

javascript
function extendQuickViewForm()
{
  // Use setTimeout to ensure the Quick View form is fully loaded
  setTimeout(function() 
  {
    // Find the Quick View form iframe by its ID
    const iframeElement = document.getElementById("QuickviewControl_Warrants");

    if (iframeElement) 
    {
      // Extend the height of the iframe to avoid scrollbars
      iframeElement.style.height = "250px";

      // Optionally remove the scrollbar
      iframeElement.style.overflow = "hidden";

      // Try removing the border from the parent element
      const parentElement = iframeElement.closest('.cell');      
      if (parentElement) 
      {
        parentElement.style.borderRight = "none";
      }
    }
  }, 2000);
}

$(document).ready(function () 
{
  extendQuickViewForm();
});

Key Concepts

setTimeout

Here, setTimeout is used to delay the execution of our code to ensure that the Quick View form has fully loaded. The delay of 2000 milliseconds (or 2 seconds) may need to be adjusted depending on how quickly the form loads.

DOM Manipulation

We are using JavaScript's Document Object Model (DOM) manipulation capabilities to change the height and overflow properties of the iframe element. This is done by accessing the element through its ID and directly modifying its style properties.

.closest()

This JavaScript method traverses up the DOM tree to find a parent element that matches the given criteria. In our case, we use it to find the closest parent element with a .cell class and remove its right border.

Conclusion

Adjusting the height of elements like iframes can sometimes require a bit more than simple CSS changes, especially in complex systems like Dynamics 365. The approach outlined above uses JavaScript to dynamically change element properties after the content has loaded, offering a practical solution to the problem.

By understanding these techniques, developers can better tackle the challenges that come with customizing read-only or restricted elements in web applications.