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
jkcjkc 

pageBlockSection 4 columns alignment problem

Hi,

I created two pageBlockSection with four cloumns and I want their columns to be aligned. I tried editing the css but it's not working.
Best Answer chosen by jkc
jkcjkc
Hi ManojSankaran,

Thank you for trying to help. Finally found the solution on

http://salesforce.stackexchange.com/questions/1766/how-do-i-create-a-table-with-more-than-one-column-from-a-single-list
  
<table>
     <tr>
         <apex:repeat value="{!arAllMainVariables}" var="var">
              <apex:variable value="{!objAllMainVariables[var]}" var="details">
                   <td class="data-column">
                        <a href="#" id="{!details.key}" class="copy">{!details.val}</a>
                   </td>
              </apex:variable>
         </apex:repeat>
    </tr>
</table>
<table>
     <tr>
         <apex:repeat value="{!arAllUserVariables}" var="var">
              <apex:variable value="{!objAllUserVariables[var]}" var="details">
                   <td class="data-column">
                        <a href="#" id="{!details.key}" class="copy">{!details.val}</a>
                   </td>
              </apex:variable>
         </apex:repeat>
    </tr>
</table>
then I set the css for class data-column 
.data-column{
     width: 25% !important;
     float: left;
}


 

All Answers

ManojSankaranManojSankaran
Hi JKC,

Kinldy post your code here and the screenshot of the VF page. It would be easy for us to understand it first before providing the solution.


Thanks
Manoj S
jkcjkc
Hi ManojSankaran,

here is the printscreen
User-added image

Map <string,detail> objAllMainVariables
Map <string,detail> objAllUserVariables
List<String> arAllMainVariables
List<String> arAllUserVariables

public class detail
    {
        public string key {get; set;}
        public string val {get; set;}
        public string obj {get; set;}
        public string rel {get; set;}
        public string prefix {get; set;}
        public string datatype {get; set;}
        public string relatedTo {get; set;}
    }

here is how I displayed the values on visualforce 
<apex:pageBlock id="block1" > 
     <apex:pageBlockSection id="mainObject" columns="4">
          <apex:repeat value="{!arAllMainVariables}" var="var">
               <apex:pageBlockSectionItem>
                    <apex:repeat value="{!objAllMainVariables[var]}" var="details">
                         <a href="#" id="{!details.key}" class="copy">{!details.val}</a>
                    </apex:repeat>
               </apex:pageBlockSectionItem>
          </apex:repeat>
     </apex:pageBlockSection>
     <apex:pageBlockSection columns="4">
          <apex:repeat value="{!arAllUserVariables}" var="var">
               <apex:pageBlockSectionItem>
                    <apex:repeat value="{!objAllUserVariables[var]}" var="details">
                         <a href="#" id="{!details.key}" class="copy">{!details.val}</a>
                    </apex:repeat>
               </apex:pageBlockSectionItem>
          </apex:repeat>
     </apex:pageBlockSection>
</apex:pageBlock>

 
jkcjkc
Hi ManojSankaran,

Thank you for trying to help. Finally found the solution on

http://salesforce.stackexchange.com/questions/1766/how-do-i-create-a-table-with-more-than-one-column-from-a-single-list
  
<table>
     <tr>
         <apex:repeat value="{!arAllMainVariables}" var="var">
              <apex:variable value="{!objAllMainVariables[var]}" var="details">
                   <td class="data-column">
                        <a href="#" id="{!details.key}" class="copy">{!details.val}</a>
                   </td>
              </apex:variable>
         </apex:repeat>
    </tr>
</table>
<table>
     <tr>
         <apex:repeat value="{!arAllUserVariables}" var="var">
              <apex:variable value="{!objAllUserVariables[var]}" var="details">
                   <td class="data-column">
                        <a href="#" id="{!details.key}" class="copy">{!details.val}</a>
                   </td>
              </apex:variable>
         </apex:repeat>
    </tr>
</table>
then I set the css for class data-column 
.data-column{
     width: 25% !important;
     float: left;
}


 
This was selected as the best answer