In this blog post, I will walk through the steps that can be followed to style the Quick View Forms added on a web page. This will enable Power Platform Developers to style the Quick View forms element which is displayed as an iframe.
Problem Statement
How to remove the right borderline from a quick view form? How to add or remove styling from a quick view form? How to highlight a quick view form in a Power Apps Portals Web page?
Solution
To update the properties of the Quick View form controls, the following class properties can be updated.
crmEntityFormView
cell
crmquickform-cell
The line which gets displayed is added in the right border as a property added in the properties of first-child by default. You can inspect the view this.
We will use the same property to customize the Quick View Form properties.
#1: Remove the line
.crmEntityFormView .cell.crmquickform-cell:first-child {
border-right: none;
}
#2: Add all borders
.crmEntityFormView .cell.crmquickform-cell:first-child {
border-right: none;
border: 10px #742774 solid;
}
In this way, you can add your own styling to the Quick View Forms displayed on a web page.
DEMO
In this post, we saw how to customize the Quick View Forms styles in Power Apps Portals pages to remove the borderline in the Quick View Form element. This will help the developers working on Power Apps Portals to provide a better user experience to the users.
I hope this was useful to you. In case of any questions or suggestions, feel free to reach out on Twitter at @agarwal_ritika.