function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DEBADYUTI SIL 30DEBADYUTI SIL 30 

Aura iteration is not loading css .

I have a page built with external css and scripts .I added css to load in parallel and js to load one after another using aura iteration as below: 
<!-- Bootstrap -->
    <ltng:require styles="/resource/CorporateCommunicationResources/corp-comm-ui-prototype/lib/bootstrap/css/bootstrap.min.css"/>
    <ltng:require styles="/resource/CorporateCommunicationResources/corp-comm-ui-prototype/lib/bootstrap/css/bootstrap-theme.min.css"/>
    
    <!-- Main CSS --> 
    <ltng:require styles="/resource/CorporateCommunicationResources/corp-comm-ui-prototype/css/font.css"/>
    <ltng:require styles="/resource/CorporateCommunicationResources/corp-comm-ui-prototype/css/jquery.ui.css"/>
    <ltng:require styles="/resource/CorporateCommunicationResources/corp-comm-ui-prototype/css/jqtransform.css"/>
    <ltng:require styles="/resource/CorporateCommunicationResources/corp-comm-ui-prototype/css/screen.css"/>

     <!-- scripts -->   
 
    <ltng:require scripts='/resource/CorporateCommunicationResources/corp-comm-ui-prototype/js/jquery-2.1.4.min.js,/resource/CorporateCommunicationResources/corp-comm-ui-prototype/js/jquery.jqtransform.js,/resource/CorporateCommunicationResources/corp-comm-ui-prototype/js/jquery-ui.js,/resource/CorporateCommunicationResources/corp-comm-ui-prototype/js/hammer.min.js,/resource/CorporateCommunicationResources/corp-comm-ui-prototype/js/jquery.hammer.js,/resource/CorporateCommunicationResources/corp-comm-ui-prototype/lib/bootstrap/js/bootstrap.min.js,/resource/CorporateCommunicationResources/corp-comm-ui-prototype/js/jquery.tablesorter.min.js,/resource/LoadData,/resource/Script' afterScriptsLoaded ="{!c.jsLoaded}" />
I have a component which uses aura:iteration multiple times as below:
  
<aura:iteration items="{!v.SomeListofList}" var="InsideList">
  <aura:iteration items="{!InsideList}" var="data">

     --- code  -----
   </aura:iteration>
</aura:iteration

When page load first time or if i open the browser console (Google Chrome) Then all components loads fine and css applies to it but if i refresh the app second time css breaks.Any help will be great.
 
thatheraherethatherahere
Hi DEBADYUTI,

Why are you using multiple <ltng:require> tags in your component when you load all your CSS and JS in one <ltng:require> tag. The scripts attribute takes set of scripts in dependency order that will be loaded and styles attribute takes set of style sheets in dependency order that will be loaded.

Try changing your Component code to single <ltng:require> tag as below and see if it works for you. 
<ltng:require scripts="/resource/jsLibOne,/resource/jsLibTwo" 
        styles="/resource/cssOne,/resource/cssTwo"
        afterScriptsLoaded="{!c.jsLoaded}"/>

Reference here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ltng_require.htm (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_ltng_require.htm" target="_blank)

Thanks

- thatherahere
DEBADYUTI SIL 30DEBADYUTI SIL 30
Even if i store all css and scripts in single <ltng:require> then also the issue persists. It works fine if i log out and login for the first time and css breaks when i refresh my page. The issue is happening with only under the element under  <aura:itteration> .Other elements gets the css perfectly.