0

I have developed a simple Lightning Component which includes few bootstrap css files for the design purpose. These bootstrap css files messing up the page.

If the Lightning Component is added to Lightning App and viewed independently in browser it works fine but It mess up the page and display complete blank white page when the Lightning Component is added as a tab to the Home page of SF1.

COMPONENT CODE:

<aura:component>

   <ltng:require styles="/resource/bootstrap_min" />
    <ltng:require styles="/resource/demo" />
    <ltng:require styles="/resource/font_awesome_min" />
    <ltng:require styles="/resource/light_bootstrap_dashboard" /> 
    <ltng:require styles="/resource/pe_icon_7_stroke" />


    //-- Component View Code go here

</aura:component>
Improve this question
5
  • 1
    Maybe add some images of what you are seeing in both cases..... Also, we may need additional code snippets to adequately answer the question. Also, try reviewing the question from this search for similar answer that may be helpful: salesforce.stackexchange.com/…
    – Eric
    Commented Sep 10, 2016 at 23:00
  • Have you tried using namespaced bootstrap css in the component?
    – Praveen
    Commented Sep 11, 2016 at 16:35
  • Also are you using HTML markups or ui namespaced markups?
    – Praveen
    Commented Sep 11, 2016 at 16:43
  • Praveen ,For this i have used normal Divs nothing else.. Can you share me any links on namespaced bootstrap ?
    – Sharan Desai
    Commented Sep 11, 2016 at 17:05
  • @SharanDesai try this namespaced css : formden.com/blog/isolate-bootstrap
    – Praveen
    Commented Sep 12, 2016 at 10:59

1 Answer 1

Reset to default
1

To appear on a Lightning Desktop Experience Home Page, the Aura Component Application Definition, must begin with the following:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

For most other components that you wanted to use in an application outside of a simple mobile page, you could use something like:

<aura:application access="GLOBAL" extends="ltng:outApp">

but not for one that's used in a flexipage via App Builder, particularly on the Home Page. I strongly suspect that's at the root of your issue.

See Configure Components for Lightning Pages and the Lightning App Builder for more on the subject. Your reference to the SF1 Home page is one that I don't understand as SF1 doesn't have a home page. There's a Home page for the Desktop Lightning Experience which the 1st example should support.

Improve this answer
2
  • 1
    Hi Mate, Yes i have declared the component as below, but still the issue exist. <aura:component implements="flexipage:availableForAllPageTypes" access="global"> What i have noticed is that this issue occurs only when we include the Component into the App builder and add it to the Left navigation bar of the Lightning Component. If i add the Component to the Lightning App and preview it, it works fine.. If i remove all the bootstrap CSS from the component then it works fine from the App builder.
    – Sharan Desai
    Commented Sep 11, 2016 at 16:26
  • Custom Home Pages can only be created using the App Builder Custom Home Page Template. You can't apply an "App Page" to the "Home Page". Is that what you're trying to do? It's not clear from your description whether that's the case. If you're using that template, then I recommend you read the posts on Bootstrap referenced by @Eric. There are nuances to getting it to work in Lightning.
    – crmprogdev
    Commented Sep 12, 2016 at 12:53

You must log in to answer this question.

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