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
Emilien Guichard 40Emilien Guichard 40 

Trailhead Lightning Component Framework Specialist Step 3 - Tile style issue

Hello there,

I'm currently having a styling issue at the the step 3 of the Trailhead Lightning Component Framework Specialist,

here is what it's currently looks like :

User-added image

and what it is supposed to look :

User-added image

This is the BoatTile component code :
  
<aura:component >

    <aura:attribute name="boat" type="Boat__c" />
    <aura:attribute name="selected" type="Boolean" default="false" />
    
    <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
    <aura:registerEvent name="BoatSelected" type="c:BoatSelected"/>

        <lightning:button class="{! v.selected == true ? 'tile selected' : 'tile' }" onclick="{!c.onBoatClick}">
            <div style="{!'background-image:url(\'' + v.boat.Picture__c + '\')'}" class="innertile">
                <div class="lower-third">
                    <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
                </div>
            </div>
        </lightning:button>

</aura:component>

and the associated style :
  
.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}

.THIS.innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.THIS.lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

.THIS.selected {
    border: 3px solid rgb(0, 112, 210);
}

Any help would be great, I am a bit confused not to have this displayed correctly.

Thanks lot ! 
Best Answer chosen by Emilien Guichard 40
Siddharth SethSiddharth Seth
Hi Emilien Guichard 40

You have not written the styling code properly. Try using this code :
  
.THIS {
    
}
.THIS.tile {
    position:relative;
    display: inline-block;
    width: 220px;
    height: 220px;
    padding: 1px !important ;
    margin-bottom:5px;
}

.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
   
}

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
    
}

.THIS.tile.selected {
    border:3px solid rgb(0, 112, 210);
        
}


Best Regards, 
Siddharth S. 
AppPerfect Corp.
salesforce@appperfect.com
408-252-4100
http://www.appperfect.com/services/salesforce/
 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Guichard,

Sorry for this issue you are encountering.

May I suggest you please check with below link from the forums community with a similar discussion which might help you with the above requirement. Please let us know if this helps.

Thanks,
Nagendra
Emilien Guichard 40Emilien Guichard 40
Hi Nagendra,

Thanks but the post you are pointing have nothing to do with my issue / question.
 
Bill DodsonBill Dodson
I have the exact same problem, hopefully someone can suggest a fix.
Bill DodsonBill Dodson
I am running Chrome Version 62.0.3202.94 (Official Build) (64-bit)
Joshua Danis 7Joshua Danis 7
I have the same issue. What browsers are you guys running on? 32-bit or 64-bit? I'm running Chrome 63 (32 bit). I've posted the question on the Salesforce Stackexchange (https://salesforce.stackexchange.com/questions/202966/styling-issues-lightning-component-framework-specialist-superbage). It seems if I remove the "innertile" class it doesn't change the behavior, I don't think that class is being read for some reason.
Bill DodsonBill Dodson
I am running Chrome Version 62.0.3202.94 (Official Build) (64-bit).  Also, if I remove innertile it does not make any difference on how it displays.
Joshua Danis 7Joshua Danis 7
I more or less found the answer: swing over to this link: https://salesforce.stackexchange.com/questions/202966/styling-issues-lightning-component-framework-specialist-superbage/203119#203119 I have my code and images posted. In short I replaced the lightning:button with a plain button, moved the background image there and moved the CSS
RavisH SinghRavisH Singh
Hi,
You need to put space (eg:   .THIS .innertile and not   .THIS.innertile ) for descendant selectors. Refer https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_css.htm for more information.     
Emilien Guichard 40Emilien Guichard 40
Hi RavisH,

Just changed the BoatTile.css to the following : 
.THIS .tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}

.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

.THIS .selected {
    border: 3px solid rgb(0, 112, 210);
}
and here is the result :

User-added image

For the records, I'm running Chrome Version 63.0.3239.132 (64 bits).
Siddharth SethSiddharth Seth
Hi Emilien Guichard 40

You have not written the styling code properly. Try using this code :
  
.THIS {
    
}
.THIS.tile {
    position:relative;
    display: inline-block;
    width: 220px;
    height: 220px;
    padding: 1px !important ;
    margin-bottom:5px;
}

.THIS .innertile {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
   
}

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
    
}

.THIS.tile.selected {
    border:3px solid rgb(0, 112, 210);
        
}


Best Regards, 
Siddharth S. 
AppPerfect Corp.
salesforce@appperfect.com
408-252-4100
http://www.appperfect.com/services/salesforce/
 
This was selected as the best answer
Emilien Guichard 40Emilien Guichard 40
Hi Siddharth Seth !
Outstanding this is displaying properly now.

Really, thanks a lot for your help.
You made my day :)
Bill DodsonBill Dodson
Here is how mine renders now:

User-added image
Bill DodsonBill Dodson
Here is the CSS I used which is not the same as the CSS posted above:
  
.THIS.tile {
    position:relative;
    display: inline-block;
    width: 100%;
    height: 220px;
    padding: 1px !important;
}

.THIS .innertile {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.THIS .lower-third {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, .4);
    padding: 6px 8px;
}

.THIS.selected {
    border: 3px solid rgb(0, 112, 210);
}

 
Bill DodsonBill Dodson
I also had to make some changes in the BoatSearchResults markup:
  
<lightning:layout horizontalAlign="space" multipleRows="true">

    	    <aura:iteration items="{!v.boats}" var="boatVar">
                <lightning:layoutItem size="3">   
                    <c:BoatTile boat="{!boatVar}" selected="{!boatVar.Id == v.selectedBoatId ? true : false }" /> 
                </lightning:layoutItem>
            </aura:iteration>
    		
            <aura:if isTrue="{!v.boats.length==0}">
                <lightning:layoutItem class="slds-align_absolute-center" flexibility="auto" padding="around-small">   
                    <ui:outputText value="No boats found" />
                </lightning:layoutItem>
            </aura:if>

    </lightning:layout>

 
Prem Rai 38Prem Rai 38

Hi prem Kumar 70

can you please share the controller and helper code also
Shine HasegawaShine Hasegawa
I do not see the image of the boat at the time of Step 3, how is it displayed?User-added image
Luke ButhmanLuke Buthman
Took me awhile to see what I did wrong. I mostly work in LWC these days, so I was not familiar with this quirk. The problem is the space or abscence of space in the selection, .THIS.className vs. .THIS .classname. To find out wheh to use what, check out this article from the documentation (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_css.htm).

In reference to the example provided in the documentation: 

"The <div class="white"> element matches the .THIS.white selector and renders with a white background. Note that there is no space in the selector as this rule is for top-level elements.

The <li class="red"> element matches the .THIS .red selector and renders with a red background. Note that this is a descendant selector and it contains a space as the <li> element is not a top-level element."