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}" />

I want to get something like this:

<div class="form-group">
  <label for="Setting">Setting</label>
  <select class="form-control" id="Setting">

How to do that?


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>
  • Hi! The styleclass attribute is no longer supported by the apex:selectoption
    – Viktor
    Nov 13 '18 at 10:36
  • I am using this in my code, that is latest Nov 13 '18 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 '18 at 11:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.