3

I'm an Apex developer that's trying to style a few Visualforce components within divs, but I have absolutely no web development experience so I was hoping someone could point out what I'm doing wrong here. I don't know how to handle the apex:repeat component. A requirement is not using table tags - if this is not possible without table tags, that's a valid answer too - I'll just have to report that information. I want the following four sections (color-coded for reference) to be rendered side-by-side like so:

enter image description here

The two middle (blue and violet) sections are generated from the Apex:repeat component and will be anywhere from one to five columns. From my research, I can do this by wrapping them in a parent div with a set width, and then floating the four child divs to the left, correct? However, when I do this with the following style (green is #leftLabelColumn, blue and violet are #middleGeneratedColumns, red is #totals):

#mainCenterBlock {
    width: 1300px;
}

#leftLabelColumn {
    float:left;
    width:200px;
}

#middleGeneratedSchedules {
    float:left;
    width:200px;
}

#totals {
    float:left;
    width:200px;
}

It's rendered as this:

enter image description here

So the second apex:repeat instance (purple) is being pushed under the first apex:repeat instance (blue).

How can I fix my styles so this is rendered appropriately? Do I maybe need to wrap each individual apex:repeat column in its own ?

Let me know what additional code I can provide for clarity, this was already a long post so I didn't want to make it any more verbose. Additionally, since there could be up to five columns from the apex:repeat component, I need them to be rendered all side-by-side.

1

So your issue is that you want your apex:repeat elements to be rendered adjacent to each other instead of rendering the second repeat below the first one.

Firstly, if it is possible to use a wrapper class and fetch all your data so that you can use one apex:repeat to render it, then do this.

If not, you can use CSS to position two <div> elements next to each other.

So you can try something like this:

<apex:outputPanel layout="block">
    <apex:outputPanel layout="block">
    Your first apex:repeat here
    </apex:outputPanel> 
    <apex:outputPanel layout="block">
    Your second apex:repeat here
    </apex:outputPanel> 
</apex:outputPanel> 
|improve this answer|||||
  • A peer of mine helped me create a wrapper class over one apex:repeat - thank you very much for your insight! – Brian Mansfield Apr 10 '15 at 13:38
  • You are welcome...Glad to help! – Richard N Apr 10 '15 at 22:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.