function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
StarhunterStarhunter 

How can I use render condition inside html class

Is it possible to use render condition inside html class. Intention is to conditionally alter the bootstrap column class
<div class="form-group col-md-3">
Can the above be converted into something like : 
<div class = {!IF(!isCondition,"form-group col-md-3","form-group col-xs-3")}">
Of course the rendering can be done by including two different div block(one for md-3 and other for xs-3).But am curious to know if the same can be achieved via one div block.
 
Best Answer chosen by Starhunter
James LoghryJames Loghry
As far as rendering / rerending elements goes, that is dependent on Visualforce tags and the render / rerender attribute.  Instead of <div> tags, you would use <apex:outputPanel> or <apex:outputText> tags. etc.

However, in your example, you have a conditional class in your div, which should work ok once the syntax is fixed.  You're essentially saying that "If this condition is met, I want to apply the col-md-3 class, otherwise, I want to apply the col-xs-3 class".  This isn't "rendering" per se, but will impact the styling of your div.

I fixed your div example above to be syntactically correct (I think, I havent tested it out mind you):
 
<div class="{!IF(isCondition,"form-group col-md-3","form-group col-xs-3")}">

 

All Answers

James LoghryJames Loghry
As far as rendering / rerending elements goes, that is dependent on Visualforce tags and the render / rerender attribute.  Instead of <div> tags, you would use <apex:outputPanel> or <apex:outputText> tags. etc.

However, in your example, you have a conditional class in your div, which should work ok once the syntax is fixed.  You're essentially saying that "If this condition is met, I want to apply the col-md-3 class, otherwise, I want to apply the col-xs-3 class".  This isn't "rendering" per se, but will impact the styling of your div.

I fixed your div example above to be syntactically correct (I think, I havent tested it out mind you):
 
<div class="{!IF(isCondition,"form-group col-md-3","form-group col-xs-3")}">

 
This was selected as the best answer
StarhunterStarhunter
Thanks @James Loghry