Search code examples
javascriptjquerydropdownjquery-select2

Select2 dropdown not shown properly in UI with struts tags

My selec2 dropdown is not shown properly.

Following is the code :

//Included select2 CSS file here HTML code:

<div>   
                            <tr>
                                <td><b><bean:message key="label.student.display" />:</b>
                                <html:select property="stuCode" styleId="rollno" onchange="getStuData(this);">
                                <html:option value=""><bean:message key="label.student.select" /></html:option>
                                <html:option value="ABC">ABC</html:option>
                                <html:option value="XYZ">XYZ</html:option>
                                <html:optionsCollection name="studentForm" property="StuList"  label="label" value="value" />
                                </html:select>
                                </td>
                                </tr>
                                </div>
//included javascript select2 tag
</body>

JQuery code :

$(function() {
            $("#rollno").select2();
            
    });

Select2 is being included without any errors in console.But output is not as expected .enter image description here

Please note : There are multiple forms in the HTML page.Some forms uses normal dropdown instead of Select2. Kindly help me to resolve this issue.Thanks in advance!

Solution

  • Give a width to the select in the struts tag and it should work. I faced the same issue before. I think thats the issue, I do not see anything else wrong.

    You can also use width parameter of select2 and set a width. If you want to give percentage width in struts tag then while creating select2 do below

    $("#rollno").select2({
    width: 'resolve'
});

    Also obviously you can also use css to set a width of the select in html.