1

I'm quite new to SF developing so you'll see me posting quite often.

I have developed this component that looks like this on preview mode in Dev Console (you know, when you click on the preview button in the .app application).

enter image description here

enter image description here

BUT

it's looking quite different (and more ugly) when I'm adding the component to a new Tab I've created

enter image description here

What is going on here and why is this looking so different ??

Many thanks :D

1 Answer 1

3

The styles are actually messed up in the preview, too, but it's harder to tell because of the nearly-white background of a Lightning App. In the Lightning Experience, the branding is applied, which includes a blue background. This is where the difference in appearance comes from.

Try adding a colored background to the app and you'll see what I mean. You'll want to fix your code so that it conforms to the Lightning Design System, which may take significant rewrites from what I can tell from the images, or consider using standard elements (e.g. lightning:card) instead, as those will apply the styles correctly for you.

4
  • Thank you very much for the answer !! This is not very nice from the Framework :( Commented Jun 19, 2020 at 15:32
  • So how do you actually KNOW if the component you're previewing is the same that you will see when you add it to a tab ? Like, is there a way to preview what I will actually will end up adding to the tab or I just have to know how to use it and pray ?? Commented Jun 19, 2020 at 15:39
  • 1
    @NachoZveDeLaTorre Either add a background to the Lightning App, or add a container around your Lightning Component. The default behavior for a component is to have a transparent background, meaning whatever you don't explicitly set to a color will be see-through. This behavior is "nice" in that it helps the branding to show through, but you need to remember to consider this when using a "preview" app. I would recommend you look at Themes for examples of how to set a background for your component.
    – sfdcfox
    Commented Jun 19, 2020 at 15:46
  • Thanks for the help my brother :D Very appreciated (sorry for my spelling) hahah Commented Jun 19, 2020 at 16:05

You must log in to answer this question.

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