You need to sign in to do that
Don't have an account?
Laurie Drew
Help with Styling in Lightning Component
Can you tell me how I would then make Tab 1-4 SubField1 - SubField 12 and SubField2-1 - 2-2 bold in the following code?
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:tabset selectedTabId="{!v.selTabId}" >
<lightning:tab label="Tab 1" id="1">
<div class="c-container">
<lightning:layout >
<lightning:layoutItem padding="around-small">
<div class="header-column">
<div class="slds-text-heading_medium">
<p class="field-title" title="SubField1">SubField1</p>
</div>
<p>Data</p>
</div>
<br/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField2">SubField2</p>
<p>*Other</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField3">SubField3</p>
<p>N/A</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField4">SubField4</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField5">SubField5</p>
<p>N/A</p>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField6">SubField6</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="Gluten-Free">Gluten-Free</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField7">SubField7</p>
<p>Yes</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField8">SubField8</p>
<p>No</p>
</div>
<br/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField9">SubField9</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField10">SubField10</p>
<p>Aisle 0</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField11">SubField11</p>
<p>Yes</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField12">SubField12</p>
<p>No</p>
</div>
<br/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField13">SubField13</p>
<p>No</p>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</lightning:tab>
<lightning:tab label="Tab2" id="2">
<lightning:layout >
<lightning:layoutItem padding="around-small">
<div class="slds-panel slds-size_medium slds-panel_docked slds-is-open slds-size--7-of-8" aria-hidden="false">
<table class="slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="SubField2-1">SubField2-1</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="SubField2-2">SubField2-2</div>
</th>
</tr>
</thead>
<br/><br/>
</table>
</div>
</lightning:layoutItem>
</lightning:layout>
</lightning:tab>
<lightning:tab label="Tab3" id="3">
</lightning:tab>
<lightning:tab label="Tab4" id="4">
</lightning:tab>
</lightning:tabset>
</aura:component>
I tried this for my CSS:
.THIS.slds-text-heading--large
{
font-weight:bold;
}
.THIS.header-column
{
font-weight:bold;
}
.THIS.slds-truncate
{
font-weight:bold;
}
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:tabset selectedTabId="{!v.selTabId}" >
<lightning:tab label="Tab 1" id="1">
<div class="c-container">
<lightning:layout >
<lightning:layoutItem padding="around-small">
<div class="header-column">
<div class="slds-text-heading_medium">
<p class="field-title" title="SubField1">SubField1</p>
</div>
<p>Data</p>
</div>
<br/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField2">SubField2</p>
<p>*Other</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField3">SubField3</p>
<p>N/A</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField4">SubField4</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField5">SubField5</p>
<p>N/A</p>
</div>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField6">SubField6</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="Gluten-Free">Gluten-Free</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField7">SubField7</p>
<p>Yes</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField8">SubField8</p>
<p>No</p>
</div>
<br/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField9">SubField9</p>
<p>No</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField10">SubField10</p>
<p>Aisle 0</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField11">SubField11</p>
<p>Yes</p>
</div>
<br/>
<div class="header-column">
<p class="field-title" title="SubField12">SubField12</p>
<p>No</p>
</div>
<br/>
</lightning:layoutItem>
<lightning:layoutItem padding="around-small">
<div class="header-column">
<p class="field-title" title="SubField13">SubField13</p>
<p>No</p>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
</lightning:tab>
<lightning:tab label="Tab2" id="2">
<lightning:layout >
<lightning:layoutItem padding="around-small">
<div class="slds-panel slds-size_medium slds-panel_docked slds-is-open slds-size--7-of-8" aria-hidden="false">
<table class="slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate" title="SubField2-1">SubField2-1</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="SubField2-2">SubField2-2</div>
</th>
</tr>
</thead>
<br/><br/>
</table>
</div>
</lightning:layoutItem>
</lightning:layout>
</lightning:tab>
<lightning:tab label="Tab3" id="3">
</lightning:tab>
<lightning:tab label="Tab4" id="4">
</lightning:tab>
</lightning:tabset>
</aura:component>
I tried this for my CSS:
.THIS.slds-text-heading--large
{
font-weight:bold;
}
.THIS.header-column
{
font-weight:bold;
}
.THIS.slds-truncate
{
font-weight:bold;
}
I have gone through your code, please go through the following points:
1. Using custom CSS:
Using CSS for main div or main tag(First tag) is done like this:
.THIS.classname {} //no spacing.
But when the tag is not the main tag you have to add space like:
.THIS .classname
So first try replacing your css like:
"this" .THIS.slds-text-heading--large "with" .THIS .slds-text-heading--large
2. Further for the bold text, you can also use the bold tag like <b>Somnetext</b>
3. Define a class on <p> tag you want to make bold and define css like this:
<p class="className">SomeText</p>
.THIS .className {
font-weight: bold;
}
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi