on change, cascading dropdown does not resize the table cell it resides in

on change, cascading dropdown does not resize the table cell it resides in


Hello, I have jquery to support a cascading dropdown (choose a value in the parent dropdown, it gets the data for the child dropdown).  The problem I am having is that when the data in the child dropdown exceeds the length of the table column it resides in, the table does not expand to fit the longer child dropdown.  It just gets cutoff.
 
Does anyone know of a way to fix this?
 
Here is the code:
 
  1. $(document).ready(

    function() {

    $(

    '[name="ParentId"]').change(

    function() {

    $(

    '[name="ChildId"]').html("");

    var parentId = $('[name="ParentId"]').val();

    if (parentId != 0) {

    $.getJSON(

    '/Directory/Controller/GetChildIds?parentId=' + parentId,

    function(childIds) {

    $(

    '[name="ChildId"]').append("<option value=\"0\">--Choose--</option>");

    $.each(childIds,

    function() {

    $(

    '[name="ChildId"]').append("<option value=\"" + this['Id'] + "\">" + this['Name'] + "</option>");

    }

    );

    }

    );

    }

    else {

    $(

    '[name="ChildId"]').append("<option value=\"0\">--Choose--</option>");

    }

    }

    );

    }

    );