0

Please help me to style custom picklist in bootstrap theme.

So I have a controller with code:

public List<selectOption> getSettings() {
        List<SelectOption> options = new List<selectOption>();
        options.add(new SelectOption('Market/OTC','Market/OTC'));
        options.add(new SelectOption('Margin Lending','Margin Lending'));
        options.add(new SelectOption('Other Services','Other Services'));
        return options;
    } 

And also the vf page with row:

        <div class="form-group">
            <label for="Setting">Setting</label>
            <apex:selectOption value="{!SelectedSetting}" id="Setting" >
                <apex:selectOption value="{!Settings}" />
            </apex:selectOption>
        </div> 

I want to get something like this:

<div class="form-group">
  <label for="Setting">Setting</label>
  <select class="form-control" id="Setting">
    <option>{!Settings}</option>
  </select>
</div>

How to do that?

1 Answer 1

1

you can write the bootstrap class in apex selectList. Use styleClass for write classes of bootstrap

    <div class="form-group">
        <label for="Setting">Setting</label>
        <apex:selectList value="{!SelectedSetting}" id="Setting2" styleClass="form-control" size="1"> <apex:selectOptions value="{!Settings}" /> </apex:selectList>
    </div>
3
  • Hi! The styleclass attribute is no longer supported by the apex:selectoption
    – Viktor
    Nov 13, 2018 at 10:36
  • I am using this in my code, that is latest Nov 13, 2018 at 10:41
  • Ok I get it! the style class attribute is not supported by the selectoption, but the selectlist supports! so the correct answer should look like this: <div class="form-group"> <label for="Setting2">Setting</label> <apex:selectList value="{!SelectedSetting}" id="Setting2" styleClass="form-control" size="1"> <apex:selectOptions value="{!Settings}" /> </apex:selectList> </div>
    – Viktor
    Nov 13, 2018 at 11:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .