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?
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.