Apex Code Development You need to sign in to do that
Don't have an account?
dai tran 6 How include a slds to a custom css?
i try include a slds to a custom css, but it not working.
and using it:
How include a slds to a custom css?
<style>
.div-custom{
text-align:center;
}
.numcol{
slds-size_1-of-4;
}
@media screen and (max-width: 800px) {
.numcol{
slds-size_1-of-2;
}
}
@media screen and (max-width: 600px) {
.numcol{
slds-size_1-of-1;
}
}
</style>
and using it:
<div class="slds-grid slds-wrap div-custom">
<apex:repeat value="{!MyProducts}" var="row">
<div class="slds-col numcol">
<apex:image width="100p" height="100p" value="{!URLFOR($Resource.ProductImage, 'ProductImage/' & row.ImageName__c)}"></apex:image>
<p>
<apex:outputText >{!row.Name}{!row.Price__c}</apex:outputText>
</p>
<p>
<apex:commandButton onclick="addCartAndBuy('{!row.Product_Code__c}'); return false;" value="Buy" id="btnBuy"/>
</p>
</div>
</apex:repeat>
</div>
How include a slds to a custom css?
You need to do like this.
<div class="slds-grid slds-wrap div-custom">
<apex:repeat value="{!MyProducts}" var="row">
<div class="slds-col slds-size_1-of-4 numcol">
<apex:image width="100p" height="100p" value="{!URLFOR($Resource.ProductImage, 'ProductImage/' & row.ImageName__c)}"></apex:image>
<p>
<apex:outputText >{!row.Name}{!row.Price__c}</apex:outputText>
</p>
<p>
<apex:commandButton onclick="addCartAndBuy('{!row.Product_Code__c}'); return false;" value="Buy" id="btnBuy"/>
</p>
</div>
</apex:repeat>
</div>
suppose you have slds class "slds-input".
Then you need to override like this way.
<style>
// by using dot(.) need to access the class.
.slds-input{
background-color:red !important;
}
</style>
Please refer the below link for sizing of grid.
http://www.lightningdesignsystem.com/utilities/grid/
Please select as best answer if it helps you.
Thank You,
Ajay Dubedi
i want set slds depend by screen width:
@media screen and (max-width: 1200px) : i want set slds-size_1-of-4
@media screen and (max-width: 800px) : i want set slds-size_1-of-2
@media screen and (max-width: 600px): i want set slds-size_1-of-1
Try like this
<div class="slds-grid slds-wrap div-custom">
<apex:repeat value="{!MyProducts}" var="row">
<div class="slds-col slds-size_1-of-4 slds-large-size_8-of-12 numcol">
<apex:image width="100p" height="100p" value="{!URLFOR($Resource.ProductImage, 'ProductImage/' & row.ImageName__c)}"></apex:image>
<p>
<apex:outputText >{!row.Name}{!row.Price__c}</apex:outputText>
</p>
<p>
<apex:commandButton onclick="addCartAndBuy('{!row.Product_Code__c}'); return false;" value="Buy" id="btnBuy"/>
</p>
</div>
</apex:repeat>
</div>
you need to use both the classes at the same time as I have used.
slds-small-size_8-of-12
slds-medium-size_8-of-12
slds-large-size_8-of-12
according to your screen size.
Please refer the below link for responsive layouts.
http://www.lightningdesignsystem.com/utilities/grid/
Please select as best answer if it helps you.
Thank You,
Ajay Dubedi
Please have a look to below link. Hope it helps you.
http://bobbuzzard.blogspot.com/2015/10/responsive-design-with-lightning-design.html
Thank You,
Ajay Dubedi