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>
  • 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 Sep 10 '16 at 23:00
  • Have you tried using namespaced bootstrap css in the component? – Praveen Sep 11 '16 at 16:35
  • Also are you using HTML markups or ui namespaced markups? – Praveen Sep 11 '16 at 16:43
  • Praveen ,For this i have used normal Divs nothing else.. Can you share me any links on namespaced bootstrap ? – Sharan Desai Sep 11 '16 at 17:05
  • @SharanDesai try this namespaced css : formden.com/blog/isolate-bootstrap – Praveen Sep 12 '16 at 10:59
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.

  • 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 Sep 11 '16 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 Sep 12 '16 at 12:53

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.