I tried adding a regular <select> but same issue (I just added it above the first one to test). Same there, you see it "jump" to form-control size but then back to small size.
Are you using the latest version of the template? in the last version there is a select2 sizing section, so you just have to use data-select2-size = "sm" or data-select2-size = "lg" then just run the script: App.select2()
I tried adding a regular […]
<div class="col-md-4 form-group">
<small>Gender</small>
<select id="test" runat="server" class="form-control select2">
<option value="1">He</option>
<option value="1">She</option>
</select>
<asp:DropDownList ID="ddSex" runat="server" CssClass="form-control form-control-lg select2" placeholder="Select gender">
<asp:ListItem Value="1">Male</asp:ListItem>
<asp:ListItem Value="0">Female</asp:ListItem>
</asp:DropDownList>
</div>
Here is the rendered code:
<div class="col-md-4 form-group" data-select2-id="6">
<small>Gender</small>
<select name="ctl00$ContentPlaceHolder1$test" id="ctl00_ContentPlaceHolder1_test" class="form-control select2 select2-hidden-accessible" data-select2-id="ctl00_ContentPlaceHolder1_test" tabindex="-1" aria-hidden="true">
<option value="1" data-select2-id="16">He</option>
<option value="1" data-select2-id="2">She</option>
</select><span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" data-select2-id="1" style="width: 203.9px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-ctl00_ContentPlaceHolder1_test-container"><span class="select2-selection__rendered" id="select2-ctl00_ContentPlaceHolder1_test-container" role="textbox" aria-readonly="true" title="She">She</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<select name="ctl00$ContentPlaceHolder1$ddSex" id="ctl00_ContentPlaceHolder1_ddSex" class="form-control form-control-lg select2 select2-hidden-accessible" placeholder="Select gender" data-select2-id="ctl00_ContentPlaceHolder1_ddSex" tabindex="-1" aria-hidden="true">
<option value="1" data-select2-id="4">Male</option>
<option value="0">Female</option>
</select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="3" style="width: 203.9px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-ctl00_ContentPlaceHolder1_ddSex-container"><span class="select2-selection__rendered" id="select2-ctl00_ContentPlaceHolder1_ddSex-container" role="textbox" aria-readonly="true" title="Male">Male</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>