Apex Code Development You need to sign in to do that
Don't have an account?
davcondev Get PageBlocks to have the same height?
I have a table with two cells in the same row containing pageBlocks that contain rich text area fields. I have been asked to get the pageBlocks to be the same height, i.e. make the shorter pageBlock the same height as the taller one.
Any suggestions?
I have tried wrapping in outputPanels with styleClasses without success.
FYI I am using pageBlocks for consistent styling. I could get rid of them but would need to figure out how to retain the styling.
<table>
<tr>
<td>
<apex:pageBlock>
<apex:pageBlockSection>
<apex:outputField value="{!myObject__c.RTA1__c}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</td>
<td>
<apex:pageBlock>
<apex:pageBlockSection>
<apex:outputField value="{!myObject__c.RTA2__c}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</td>
</tr>
</table>
What I ended up with below. It looks like I'll be able to get away with using scrolling sections if the content is too large.
<style>
.container {
/*overflow:scroll;*/
height:100px;
}
</style>
<table>
<tr>
<td>
<div class="apexp">
<div class="individualPalette">
<div class="Custom100Block">
<div class="bPageBlock brandSecondaryBrd apexDefaultPageBlock secondaryPalette">
<div class="pbBody container">
<apex:outputField value="{!myObject__c.RTA1__c}"/>
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="apexp">
<div class="individualPalette">
<div class="Custom100Block">
<div class="bPageBlock brandSecondaryBrd apexDefaultPageBlock secondaryPalette">
<div class="pbBody container">
<apex:outputField value="{!myObject__c.RTA2__c}"/>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
All Answers
Use <div style="height:200px;width:300px;"> instead of using pageblocks. It may help you to get rid of pageblocks.
<table> <tr> <td> <div style="height:200px;width:300px;"> <apex:outputField value="{!myObject__c.RTA1__c}"/> </div> </td> <td> <div style="height:200px;width:300px;"> <apex:outputField value="{!myObject__c.RTA2__c}"/> </div> </td> </tr> </table>Adjust the height and width according to your requirement. If you want to adjust the height and width dynamically then use jquery.
Thanks,
Praveen K.
What I ended up with below. It looks like I'll be able to get away with using scrolling sections if the content is too large.
<style>
.container {
/*overflow:scroll;*/
height:100px;
}
</style>
<table>
<tr>
<td>
<div class="apexp">
<div class="individualPalette">
<div class="Custom100Block">
<div class="bPageBlock brandSecondaryBrd apexDefaultPageBlock secondaryPalette">
<div class="pbBody container">
<apex:outputField value="{!myObject__c.RTA1__c}"/>
</div>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="apexp">
<div class="individualPalette">
<div class="Custom100Block">
<div class="bPageBlock brandSecondaryBrd apexDefaultPageBlock secondaryPalette">
<div class="pbBody container">
<apex:outputField value="{!myObject__c.RTA2__c}"/>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>