I have a simple lightning component for inserting records to a custom object (Show__c)
The component is working fine.
I have few issues with styling this component.
Markup
<aura:component controller="ShowClass" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="AAShow" type="Show__c" default="{'sobjectType':'Show__c'}"/>
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_3-of-8">
</div>
<div class="slds-col slds-size_2-of-8">
<lightning:input label="Name: " name="LIUI_ShowName" value="{!v.AAShow.ShowName__c}" />
<label class="LSELabel">Rating : </label>
<force:inputField value="{!v.AAShow.Rating__c}"/>
<br />
<label class="LSELabel">Genre: </label>
<force:inputField value="{!v.AAShow.Genre__c}" />
<br />
<div class="cus_button">
<lightning:buttonIcon onclick="{!c.fLIUI_Button_Clicked}" iconName="utility:save" variant="bare" size="large" alternativeText="Save" iconClass="dark"/>
</div>
</div>
<div class="slds-col slds-size_3-of-8">
</div>
</div>
</aura:component>
I am trying to style this component
a) To set the background color as lightblue (WORKING)
b) To use a grid system (WORKING)
c) Labels will have to use font weight (NOT WORKING)
d) The button has to have an alignment of "margin-left:200px" (NOT WORKING)
This is my component CSS
.THIS {
background-color: lightblue;
}
.THIS.cus_button {
margin-left: 200px;
}
.THIS.LSELabel {
font-weight: bold;
}
This is how my component looks in the browser.
As you can see the label and button alignment is not working.
Can someone tell me what I am missing here ?