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
dai tran 6dai tran 6 

How can change step of apex:repeat?

I using apex:repeat to display a table image:
This my code: 
​<table>
                <apex:repeat value="{!MyProducts}" var="row">
                     <tr>
                       <td>
                       <apex:image width="100p" height="100p" value="{!URLFOR($Resource.ProductImage, 'ProductImage/' & row.ImageName__c)}"></apex:image>
                      </td>
                     </tr>
               </apex:repeat>
            </table>

i want display 4 image in a row, 
How can to set step of apex:repeat=4?
Best Answer chosen by dai tran 6
Ajay K DubediAjay K Dubedi
Hi Dai,

Please try the below code. Hope it helps you.

<apex:page>
    <apex:slds/>
    <div class="slds-grid slds-wrap">
        <apex:repeat value="{!MyProducts}" var="row">
            <div class="slds-col slds-size_1-of-4">
               <apex:image width="100p" height="100p" value="{!URLFOR($Resource.ProductImage, 'ProductImage/' & row.ImageName__c)}"></apex:image>                 
            </div>
        </apex:repeat>
    </div>
</apex:page>

Please mark it as best answer if it helps you.

Thank You,
Ajay Dubedi

All Answers

Raj VakatiRaj Vakati
Not directly .. But i can give you a high-level solution ..


Create a map in the controller which contains potions like 1 ,2,3 ... and list of four images .. 

Use repeat inside repeat with one TR ..
Ajay K DubediAjay K Dubedi
Hi Dai,

Please try the below code. Hope it helps you.

<apex:page>
    <apex:slds/>
    <div class="slds-grid slds-wrap">
        <apex:repeat value="{!MyProducts}" var="row">
            <div class="slds-col slds-size_1-of-4">
               <apex:image width="100p" height="100p" value="{!URLFOR($Resource.ProductImage, 'ProductImage/' & row.ImageName__c)}"></apex:image>                 
            </div>
        </apex:repeat>
    </div>
</apex:page>

Please mark it as best answer if it helps you.

Thank You,
Ajay Dubedi
This was selected as the best answer
dai tran 6dai tran 6
If i add    <apex:slds/> to page,
Some CSS not working, 
Ex:  <div align="center">
Ajay K DubediAjay K Dubedi
Hi Dai,

You can use CSS in these ways.

1) First Way is by using inline CSS.

// Here I have used a Style tag in div block itself. 
<apex:page controller="AccountSelected">
    <apex:slds/>
    <div class="slds-grid slds-wrap">
        <apex:repeat value="{!AccList}" var="row">
            <div class="slds-col slds-size_1-of-4" style="text-align:center;border:1px solid black>
               {!row.acc.Name}                
            </div>
        </apex:repeat>
    </div>
</apex:page>


2) Second way is by using internal CSS.

// I have create a class on div that is "div-custom" in which i have written CSS in style tag.

<apex:page controller="AccountSelected">
    <apex:slds/>
    <div class="slds-grid slds-wrap">
        <apex:repeat value="{!AccList}" var="row">
            <div class="slds-col slds-size_1-of-4 div-custom">
               {!row.acc.Name}                
            </div>
        </apex:repeat>
    </div>
    <style>
    .div-custom{
        text-align:center;
        border:1px solid black;
        }
    </style>
</apex:page>
Please mark it as best answer if it helps you.

Thank You,
Ajay Dubedi
dai tran 6dai tran 6
Hi Ajay Dubedi,
Can you give me link to get samples of slds?
Ajay K DubediAjay K Dubedi
Hi Dai,

Please refer below link for SLDS samples.

http://www.lightningdesignsystem.com/getting-started/

Thank You,
Ajay Dubedi
dai tran 6dai tran 6
Hi Ajay Dubedi,
How can set [slds-size_1-of-4] auto by device?
Ex: Normal i set [slds-size_1-of-4]
if @media screen and (max-width: 1000px) : i set  [slds-size_1-of-3]
if @media only screen and (max-width : 640px) {  i set  [slds-size_1-of-1]