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
Michael DelyMichael Dely 

Visualforce Aligning Icons

I have been buidling out a visualforce templates and ran into an issue when trying to align a couple of the icons side by side.  I have attached the code below.  Then I attached two illustrations.  The first is how it currently looks and the second is how I want it to look.   

 Can someone help me modify the code so the end result looks like the 2nd one?  I appreciate it!  

Thanks, 
​Mike 

User-added image
User-added image

User-added image
 
Sampath SuranjiSampath Suranji
Hi, try something like below 
<table>
        <tr>
            <td style="width:50px">
                <img src='http://g-ecx.images-amazon.com/images/G/01/gift-certificates/corporate/BrandUse/a_generic.png'/>
            </td>
            <td style="float:left; width:200px">
                
                <table>
                    <tr>
                        <td style="font-weight: bold;">
                            Gift card amount
                        </td>
                        
                    </tr>
                    <tr>
                        <td style="font-weight: bold;font-size: 33px;">
                            $50.00
                        </td>
                        
                    </tr>
                </table>
                
            </td>
            
            <td style="width:100px">
                <table>
                    <tr>
                        <td style="font-weight: bold">Claim code
                        </td>
                    </tr>
                    <tr>
                        <td>xxxxxxxxxxxx
                        </td>
                    </tr>
                    <tr>
                        <td>Redem Now
                        </td>
                    </tr>
                </table>
                
            </td>
        </tr>
    </table>
best regards
Sampath
 
Michael DelyMichael Dely
Hi Sampath.  Thanks this worked very well!  My only remaining question is the height/width of the "Redeem Now" button.  I changed that part of the code and the button is the size that I want in the preview, but once it is sent out the button is too small on the receiving side.  Here is the code I currently have within what you provided.  I included a screenshot below the code showing how small the button is.  Let me know your thoughts.  Thanks!

                        <td><apex:outputLink value="https://www.amazon.com/gp/css/gc/payment/view-gc-balance?ie=UTF8&amp;ref_=gc_lp_atya" style="display:block;width:200px;margin-top:20px;padding:20px 30px;background-color:#F68F2E;font-size:14px;color:#FFF;text-decoration:none;text-align:center;"><b>Redeem Now</b></apex:outputLink>
                        </td>
                    </tr>
                </table>
                
            </td>
        </tr>
    </table>
<br /></td>


User-added image
Sampath SuranjiSampath Suranji
Hi,
Try something like below, 
<td style="width:200px">
                <table style="margin-bottom: 16px;">
                    <tr>
                        <td style="font-weight: bold; font-size:14px">Claim code
                        </td>
                    </tr>
                    <tr>
                        <td>454-565-7878
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <apex:outputLink value="https://www.amazon.com/gp/css/gc/payment/view-gc-balance?ie=UTF8&amp;ref_=gc_lp_atya" style="display: block;width: 137px;padding: 4px 7px;background-color: #F68F2E;font-size: 14px;color: #FFF;text-decoration: none;text-align: center;display: -moz-box;position: fixed;"><b>Redeem Now</b></apex:outputLink>
                        </td>
                    </tr>
                </table>
                
            </td>

you may use this inside an email template. if the button is too small  when you send it, please let me see a screen shot of the email when you sent it.

regards
Sampath