Styling Issues - Lightning Component Framework Specialist Superbage

Question

I'm going through the Lightning Component Framework Specialist Superbage. I am on step 3 of the challenge (the elaboration about which is under the Populate the Search Results subtitle on the aforementioned link).

Now I've passed the challenge however my page doesn't look like it ought to despite using styling which is essentially provided for us. I'm not the only one as Google for the issue I found this forum here explaining the exact same issue I am having.

I played around with the provided CSS and inline styling but to no avail. I then suspected perhaps it was a browser issue (I'm running 32-bit Chrome 63). However the issue is the same on Firefox. I have had other strange issues with LEX and 32-bit Chrome before.

UPDATE: I've found if I leave out anything in the div where the background image is called then the buttons show up as blanks. If I add a few br tags then more of the image is revealed.

Here is the BoatTile.cmp and corresponding CSS:

<aura:component access="global" 
          implements="force:appHostable,flexipage:availableForAllPageTypes">
  <aura:attribute name="boat" type="Boat__c"/>
    <lightning:button class="tile">
      <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>

.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;
 }

UPDATE: My apologies I was displaying the BoatSearchForm.cmp previously, I meant to display BoatSearchResults.cmp which I've added here.

Here is the BoatSearchResults.cmp:

<aura:component access="global" controller="BoatSearchResults" implements="force:appHostable,flexipage:availableForAllPageTypes">
<aura:attribute name="boats" type="Boat__c[]" />
<aura:attribute name="show" type="Boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<lightning:layout horizontalAlign="spread" multipleRows="true">
    <aura:if isTrue="{!!v.show}">
        <div class="slds-align_absolute-center">
            No boats found
        </div>
    </aura:if>
    <aura:iteration items="{!v.boats}" var="item">
        <lightning:layoutItem flexibility="grow" size="4" mediumDeviceSize="6"
                              largeDeviceSize="3" padding="around-small">
            <c:BoatTile boat="{!item}"/>
        </lightning:layoutItem>
    </aura:iteration>
</lightning:layout>
</aura:component>

Answer 1

A late answer but I've just hit this myself, the issue is your CSS should read as below. Note the space between .THIS and .innertile

.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;
}

Answer 2

I'll give you a hint. Check your BoatSearchResults.cmp. The key can be found in these requirements, I have highlighted the relavent area's:

Next, BoatSearchResults.cmp loops through the results and displays each one as a BoatTile.cmp, arranged in a responsive grid with multiple rows as displayed in Figure 2. Use a <lightning:layout> configured to allow multiple rows in order to generate the layout

Take a look here for some ideas.

Answer 3

I lost some of the nice SLDS styling but I'll tackle that later. But I changed the lightning:button tag to a plain old button tag and added the background image as an inline style there rather than the div and updated the CSS:

<aura:component access="global" implements="force:appHostable,flexipage:availableForAllPageTypes">
<aura:attribute name="boat" type="Boat__c"/>
<button style="{! 'background-image:url(\'' + v.boat.Picture__c + '\');'}" class="tile">
    <div  class="innertile">
        <div class="lower-third">
            <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
        </div>
    </div>
</button>
</aura:component>

The CSS:

.THIS.tile {
   position:relative;
   display: inline-block;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   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;
}

And this is what it looks like:

Answer 4

One issue I see also, aside from the fact that you're not using to set up your grid is a very small change in your CSS file for the BoatTile. The should be a space between .THIS.innertile and THIS.lower-third to make it .THIS .innertile and .THIS .lower-third

I don't know if that will solve your whole issue, but it will get it started in the right direction.

Answer 5

follow the instruction by Jason, while making sure the tile css style setting begin with .THIS.tile not .THIS .tile (i.e. no space for this one).