1

In my VF page I am using lightningStyleSheets=true attribute to make it look like lightning experience. There also is a layover in the same page, which shows up on a button click and looks like a pop-up. This popup behavior is accomplished using the method described in the best answer at: https://developer.salesforce.com/forums/?id=906F000000097X9IAI

However as far as responsiveness, the main VF page is responsive, due to lightningStyleSheets=true attribute setting, but the layover is not responsive. How can this be achieved? The layover is using it's own style sheet to get it's layover nature, is that causing the problem? Any suggestions?

Improve this question
2
1

The CSS classes for modals are documented in Lightning Design System - Modals page and the widths of those modals are based on the width of the underlying page.

I don't know that when lightningStyleSheets=true is applied those modals will work: I suggest you try and see. This Trailhead Render a Visualforce Page Conditionally for the User Interface shows how to make such additions conditional if that becomes necessary.

Or you could try to fix the CSS you link to that has a hard coded width: 500px;. But some CSS can be quite tricky to get right as the obvious things (e.g. width: 60% in this case - try that too) don't work without lots of other changes.

Improve this answer
6
  • I created custom style sheets when needed. Another thing I noticed is when using 'LightningStyleSheets=true' attribute, some of the page references returned by controller on some action are not behaving. What I mean is in classic on the click of a Save button, after the controller is done with it's work, we will be shown the page that's returned by controller as pagereference, but i see that behaviour is not happening and I am just shown a message that 'your ---- is saved successfully' and I have to manually navigate to the page desired. Not sure why is this happening. Any idea?
    – Quest_sfdc
    Jul 31 '18 at 15:52
  • @Quest_sfdc Is the navigation problem is unlikely to relate to the styling; release by release some small things are changing in how old classic URL patterns are handled when working in Lightning Experience.
    – Keith C
    Jul 31 '18 at 16:20
  • yes I agree. navigation problem should not be caused by styling. Also as per the link here developer.salesforce.com/docs/atlas.en-us.api_console.meta/…, it says PageReferences are supported in Lightning Experience which is what we are using. We are not doing any lightning components, but just migrating existing VF pages to Lightning experience. I absolutely need to find out why,is this happening users are not happy.
    – Quest_sfdc
    Jul 31 '18 at 16:25
  • @Quest_sfdc If your code contains any "URL hacking" e.g. looking explicitly at "retUrl" or picking out lkid values you'll hit problems.
    – Keith C
    Jul 31 '18 at 16:50
  • yes URL hacking for retURL is there. What are my options? can you please suggest? I guess, I have to create actions to replace them.
    – Quest_sfdc
    Jul 31 '18 at 17:03
0

I'd recommend adding <apex:slds/> after <apex:page>. And using the markup from the Modal Component Blueprint on the Lightning Design System (SLDS) site.

It is much faster to copy/paste that markup than trying to create your own popup/modal component using Apex components and getting it to match Lightning look and feel. And, it's got responsiveness built in.

One other step, for good measure is wrap the SLDS Component markup so that you're only using SLDS CSS (from apex:slds) to style SLDS components:

<div class="slds-scope">
…modal markup…
</div>

Definitely read this doc and trail for additional help using <apex:slds> and Visualforce components, especially around the SVG icon and slds-scope class implementation.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.