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 Answer 1

2

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> 
2
  • A peer of mine helped me create a wrapper class over one apex:repeat - thank you very much for your insight! Commented Apr 10, 2015 at 13:38
  • You are welcome...Glad to help!
    – Richard N
    Commented Apr 10, 2015 at 22:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .