3

Is there any way to adjust the height of the VF page when it is added as an component within lightning community builder. Below is the VF page settings; enter image description here

And when the page loads in the community, it looks so odd as below. Is there any fix for this? I tried to add styles for a Div, outputpanel and for body too like height: 800px !important; but no luck as of now. Any suggestions?

enter image description here

1 Answer 1

3

I've solved that by developing my own Visualforce Wrapper Lightning Component. The basic concept is to create an iframe in the LC which displays the VF Page. Then the page is notifying the LC on resize about it's real height. This height I send using window.sendMessage to the hosting LC, which adapts the iframe so that they match. In the end it was a lot of work to find out all I need to make the component really good. Some points are

  • use the &istp=1 url parameter to get the sforce.one JS object in the VF page
  • I use a v36 LC to get as far away of LockerService as possible
  • the height mechanism can be a bit tricky inside tab or accordion components, so I needed to hack into the tab-clickings to make an extra resize on every tab-change
  • my component can tunnel toast-messages through sendMessage() so VF can effectively create toasts.

The component is very hacky and currently I won't share the full source code. But I'm open to share and discuss conceptual approaches or implementation details in more depth.

I've used similar techniques even in Salesforce Classic since 2010 (search for sidebar hacks) and I somehow got used that Salesforce seems not to care about the height. I think this is wrong and they sould provide a height adaption in their Standard Visualforce component.

A fixed height is always wrong and kills User Experience. Either you have whitespace on the screen or redundant scrollbars or you need to make sure that your vf has a fixed height. For me any of this is not acceptable.

1
  • Hey thanks for the detailed info. But that sounds bit of a workaround to accomplish such a small thing. It’s weird that why Salesforce doesn’t allow to automatically adjust the height. However I have added some paddings and minimize the extra spaces. Kudos to your solution though. Cheers!!! Commented Sep 3, 2018 at 16:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .