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
Brooks Johnson 6Brooks Johnson 6 

Stuck on some CSS

Hi Friends. sorry to post such a blatant cry for help. But I can't this to work. I have a VF Page that renders as a PDF. I need to get the final  <td> in to align left and merge two rows so that the output is centered. Everything I ends up causing the entire page to fall apart. 

Here is a sample of a block I need to adjust. The final <td> That contains the <apex:outputText> should span two rows that the output can be centered vertically. 
  
<tr width="100%">
            <td width="25%" class="icon-label">
                <span class="icon-label">
                    Percent of Influencers Contacted
                </span>
            </td>
            <td width="50%" align="center">
                <apex:outputText value="{0, number, 0}%" style="font-size: 38px; font-weight: bold;
                                        font-family: SansSerif;
                                     color: {!if(Region__c.Percent_Influencers_Contacted__c >= 50, '#00a846',
                                     if(Region__c.Percent_Influencers_Contacted__c >= 35, '#aabb1a',
                                     if(Region__c.Percent_Influencers_Contacted__c >= 20,'#f0b428',
                                     if(Region__c.Percent_Influencers_Contacted__c >= 10, '#FF6428', '#B42846'))))}">

                    <apex:param value="{!FLOOR(Region__c.Percent_Influencers_Contacted__c)}"/>
                </apex:outputText>
            </td>
            <td width="25%">
            </td>
        </tr>
        <tr width="100%">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_percent_contacted}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
                Percentage of total influencers who have received at
                least one email communication in the past 90 days
            </td>
            <td width="25%" align="center" class="grade_Output">
                <apex:outputText value="{!Region__c.Percent_Contacted_Grade__c}"
                                 style="font-size: 51px; font-weight: bold;
                                 margin-bottom: 20px; font-family: SansSerif;
                                     color: {!if(Region__c.percent_contacted_grade__c='A', '#00a846',
                                     if(Region__c.percent_contacted_grade__c ='B', '#aabb1a',
                                     if(Region__c.percent_contacted_grade__c ='C','#f0b428',
                                     if(Region__c.percent_contacted_grade__c ='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>
        <hr/>
The end state is the block where the letter F is right now should be centered vertically. 

User-added imageThank you for an
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Brooks,

Try this
  
<tr width="100%">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_percent_contacted}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
               <p> Percentage of total influencers who have received at
                least one email communication in the past 90 days</p>

            <center class="grade_Output">
                <apex:outputText value="{!Region__c.Percent_Contacted_Grade__c}"
                                 style="font-size: 51px; font-weight: bold;
                                 margin-bottom: 20px; font-family: SansSerif;
                                     color: {!if(Region__c.percent_contacted_grade__c='A', '#00a846',
                                     if(Region__c.percent_contacted_grade__c ='B', '#aabb1a',
                                     if(Region__c.percent_contacted_grade__c ='C','#f0b428',
                                     if(Region__c.percent_contacted_grade__c ='D', '#FF6428', '#B42846'))))}"/>
             </center>
            </td>
        </tr>


Hope this helps!

Regards,​​​​​​​

Santosh.
Brooks Johnson 6Brooks Johnson 6
Hi Santosh, I tried using the center tags but this is what happened. 

User-added image
Rajesh3699Rajesh3699
Hi Johnson,

Try with style="text-align:center;" for apex:outputText tag, if this does not work, go with the Inspect Element in the borwser this will help you for sure.

Thank You,
Rajesh Adiga P.
 
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Johnson,

Try this.it should work.I have tried on my side.
  
<tr width="100%">
            <td width="25%" class="icon">
                <apex:image url="{!$Resource.icon_percent_contacted}" height="45" width="45"/>
            </td>
            <td width="50%" class="center_text">
               <p> Percentage of total influencers who have received at
                least one email communication in the past 90 days</p>

                <apex:outputText value="{!Region__c.Percent_Contacted_Grade__c}"
                                 style="font-size: 51px; font-weight: bold;
                                 margin-bottom: 20px; font-family: SansSerif;
                                     color: {!if(Region__c.percent_contacted_grade__c='A', '#00a846',
                                     if(Region__c.percent_contacted_grade__c ='B', '#aabb1a',
                                     if(Region__c.percent_contacted_grade__c ='C','#f0b428',
                                     if(Region__c.percent_contacted_grade__c ='D', '#FF6428', '#B42846'))))}"/>
            </td>
        </tr>


Regards,

Santosh.
Brooks Johnson 6Brooks Johnson 6
Thanks, Santosh, it still is not working. I think maybe I was not clear about the end state.   Below is a screenshot of the PDF with a border around one of the TDs. I want to merge that TD into the row above it and then center the contents vertically.   Even with a rowspan=2, nothing is happening. When I made your adjustment it moved the letter grade below the center text. I want it to stay where it is but merge the cells and align it vertically. 

User-added image
User-added image
 
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Johnson,

are you looking similar to this?

User-added image
Brooks Johnson 6Brooks Johnson 6
No, right now that table is two rows and three colums. I was the final  <td></td> with the letter F to merge into the row above it. Everything else should stay as it is and the final letter should just take up two rows instead of one.