+ Start a Discussion
kirubakaran viswanathankirubakaran viswanathan 

How to increase the size of the checkbox in <apex:outputfield>?

I am rendering the boolean value to the Outputfield, which displays as a checkbox (checked or not checked). But I need to increase the size of the checkbox for visibility
I tried below code,  with and without style attribute inside the Outputfield.
​<apex:column
<span style="height: 40px !important; width: 40px !important;">
<apex:outputField value="{!a.aAttendee.evt__Attended__c}" style="height: 40px !important; width: 40px !important;" />
</span>
                            
 </apex:column>

But still the checkbox display as a default size of 21 X 16.

User-added image
Can anyone help me to increase the size of the checkbox ?

Thanks,
Kiruba
Best Answer chosen by kirubakaran viswanathan
PradeepgorePradeepgore
Hi kirubakaran viswanathan !!


Try the code below , this does not increase the size of checkbox but simply zooms it to appear bigger
<style type="text/css">
        [id*=Attended_Id] { zoom: 200%;   }         
     </style>

<apex:outputField value="{!a.aAttendee.evt__Attended__c}" id="Attended_Id" />
Let us know if the issue is solved 

Thanks
 

All Answers

PradeepgorePradeepgore
Hi kirubakaran viswanathan !!


Try the code below , this does not increase the size of checkbox but simply zooms it to appear bigger
<style type="text/css">
        [id*=Attended_Id] { zoom: 200%;   }         
     </style>

<apex:outputField value="{!a.aAttendee.evt__Attended__c}" id="Attended_Id" />
Let us know if the issue is solved 

Thanks
 
This was selected as the best answer
NagendraNagendra (Salesforce Developers) 
Hi Kirubakaran,

You need to use CSS to further style the checkbox by default applying the height and width will not change the dimensions of the checkbox. Review the below article Hope this helps.

Regards,
Nagendra.
kirubakaran viswanathankirubakaran viswanathan
Thanks @Pradeepgore, your answer solved my problem and @Nagendra.