Skip to main content

Hello Skuid World!


I have several Skuid pages I’ve developed for a Salesforce Experience site, but I see differences in the preview on the Skuid side versus what it looks like for end users accessing the experience. My text components are inserting a space after the horizontal line in production, which doesn’t show up in the preview. It’d be great to remove this white space and have the preview match the production experience, but I’m stuck on how.


Preview, as expected without spaces:

image

Actual rendering in production, with additional spaces:

image

Inspector look at component - it isn’t a second piece, or part of something in Salesforce, it indicates this is my Skuid component with the space:

image

I have no custom CSS active in my Salesforce Experience.


Any help is greatly appreciated - even if it is just an explanation as to why this happens and not a work around to make them match.


Best


Chris

Hello Chris!


I was able to reproduce this and it looks like you may be using an <hr/> element in the text component for your horizontal line. Im seeing that lightning is overriding the hr styles and applying a large amount of margin (2rem).


image

I think the 3 options for resolving this are either:

A) specify your desired hr style in the html

😎 use a header component (which has the option for a border separator)

C) use a wrapper with a bottom border to create the horizontal line


Hope this helps, feel free to ask for clarification if it helps!

Clark

Thanks Clark! I was able to set the desired style in the .html which works for now. If we run into formatting issues elsewhere due to this change I’ll try out one of the alternative methods to achieve the same sort of display in Skuid that you’ve suggested.


Much appreciated!

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings