jQuery select/dropdown and adjust button position

I have an ASP.NET MVC project, on one of the view I have a very simple layout

<% using (Html.BeginForm("MyAction", "MyController")) { %>
<select id="drDropdown" name="drDropdown"></select>
<input type="submit" value="Next" />
<% } %>

And I have some jQuery script to dynamically load content from controller to populate values of that drop down.

<script language="javascript" type="text/javascript">
    function myClientControl_onSelect(e) {
        $.ajax({
            type: "Post",
            url: "/MyController/MyAction/" + parameter,
            dataType: "json",
            error: function (request, error) {
                alert("readyState开发者_开发知识库: " + request.readyState + "\nstatus: " + request.status);
                alert("responseText: " + request.responseText); 
                alert('Error ' + error);
            },
            success: function (data) {
                data = $.map(data, function (item, a) {
                    return "<option value=" + item.Id + ">" + item.Name + "</option>";
                });
                $("#drDropdown").html(data.join(""));
            }
        }); 
    }
</script>

Function wise, it work just fine. But something strange happens on my IE8. Because each time the content loaded from controller various, which results the width of select/dropdown not consistent. In IE8 the position of my submit button never changes, when width of select grows, it just stays on top of it. In my FireFox it just works fine, the position of submit button adjusts itself to stay next to my select.

Any clue, what shall I do to make it consistent between 2 browsers?

Thanks Hardy

Just make the width of the dropdown be whatever the max width it should be by applying a style:

<select id="drDropdown" name="drDropdown" style="width: 200px;"></select>

Please remove the "width" CSS style definition for <select>.

For IE, if you set "width" for <select>, but content length is longer then the value you set, then the longer part will be hidden.

Form elements will adjust unless you have CSS telling the browser not to.

Remove your CSS references and any inline styling and see if your code behaves the same, it probably won't.

If removing all of your styling is not possible, look at the CSS hierarchy with FireBug and IE Developer Toolbar. Both will tell what CSS is applied to the select and or container items that may not allow it to grow with your data. You can also simulate the dynamic data loading by manipulating your options list with these tools. You should get the same results with your manual manipulation as the ajax loading.