How can I make chosen-select go over the parent Table when clicked upon?

Question

Please has anyone tampered with the Chosen Select CSS before to make it go over the parent table?

What I wanted to archive is shown below. I don't know what to change to make it flow over the parent Table.

Chosen_Select.PNG

My Razor view Code is pasted below

public class DropdownDTO
    {
        public string InsBranchCode  { get; set; }
        public string FullDescription { get; set; }
    }


    public class Underwriting_InsurerPolicyDistribution
    {
        public string InsBranchCode  { get; set; }
        public string PolicyRefCode{ get; set; }
        public string InsurerLeadCode{ get; set; }
        public string PercentageCover{ get; set; }
        public string InsBranchCode  { get; set; }
        public bool isConfirmed{ get; set; }

    }


       public static IEnumerable<DropdownDTO> InsurerBranchDropDownList(this HtmlHelper htmlHelper)
        {
            var context = HttpContext.Current;

            var itemList = new List<DropdownDTO>();

            if (itemList == null)
            {
                var list = new List<DropdownDTO>();
                list.Add(new DropdownDTO() { InsBranchCode = string.Empty, FullDescription = "Please select a Branch...." });
                list.Add(new DropdownDTO() { InsBranchCode = "0001", FullDescription = "Nigeria" });
                list.Add(new DropdownDTO() { InsBranchCode = "0002", FullDescription = "Zambia" });
                list.Add(new DropdownDTO() { InsBranchCode = "0003", FullDescription = "South Africa" });
                list.Add(new DropdownDTO() { InsBranchCode = "0004", FullDescription = "Ghana" });
                list.Add(new DropdownDTO() { InsBranchCode = "0005", FullDescription = "SeriaLeone" });
                list.Add(new DropdownDTO() { InsBranchCode = "0006", FullDescription = "Cotonou" });
                list.Add(new DropdownDTO() { InsBranchCode = "0007", FullDescription = "Ivory Coast" });
                list.Add(new DropdownDTO() { InsBranchCode = "0008", FullDescription = "Egypt" });
                list.Add(new DropdownDTO() { InsBranchCode = "0009", FullDescription = "Mozambique" });
                list.Add(new DropdownDTO() { InsBranchCode = "0010", FullDescription = "Maurutania" });
                list.Add(new DropdownDTO() { InsBranchCode = "0011", FullDescription = "Niger" });
                list.Add(new DropdownDTO() { InsBranchCode = "0012", FullDescription = "Democratic Republic of Cogo" });
                list.Add(new DropdownDTO() { InsBranchCode = "0013", FullDescription = "Central African Replublic" });
                list.Add(new DropdownDTO() { InsBranchCode = "0014", FullDescription = "South Africa" });
                list.Add(new DropdownDTO() { InsBranchCode = "0015", FullDescription = "Tunisia" });
                list.Add(new DropdownDTO() { InsBranchCode = "0016", FullDescription = "Algeria" });
                list.Add(new DropdownDTO() { InsBranchCode = "0017", FullDescription = "Kenya" });
                itemList = list;
            }
            return itemList;
        }
 
   <a href="#showDialog" class="btn btn-primary" title="Apportionment" data-toggle="modal" data-id="">Branches</a>


        <div class="row">
            <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
                <div id="showDialog" tabindex="-1" role="dialog" aria-labelledby="showDialogLabel" aria-hidden="true" class="modal fade" data-backdrop="static" data-keyboard="false">
                        <div class="modal-dialog modal-lg" style="height:50vh; max-height:50vh; width:110vh; max-width:180vh; overflow-y: initial !important">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="showDialogLabel">Co-Insurers Risk Apportionment</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="table-responsive">
                                        <table id="requestItems" class="table table-bordered table-striped table-hover" cellspacing="0">
                                            <thead>
                                                <tr>
                                                    <td>
                                                        <div text-align:center" class="btn btn-primary btn-sm">
                                                            <strong></strong><span class="glyphicon glyphicon-remove center-block"></span>
                                                        </div>
                                                    </td>
                                                    <td>Insurer Branch Code</td>
                                                    <td>Lead Insurer</td>
                                                    <td>Percentage Covered</td>
                                                    <td>Confirm?</td>

                                                </tr>
                                            </thead>

                                            @{if (!string.IsNullOrEmpty(Model.Underwriting_PolicyFile.PolicyRefCode))
                                        {
                                            var prefx4 = "Underwriting_InsurerPolicyDistribution";
                                            var prefx6 = prefx4 + ".index";
                                            for (var i = 1; i <= Model.Underwriting_InsurerPolicyDistribution.Count; i++)
                                            {
                                                var itemIndex3 = string.Format("X{0}", i);
                                                var n7 = string.Format("{1}[X{0}].PolicyRefCode", i, prefx4);
                                                var n8 = string.Format("{1}[X{0}].InsBranchCode", i, prefx4);
                                                var n9 = string.Format("{1}[X{0}].InsuerLeadCode", i, prefx4);
                                                var n10 = string.Format("{1}[X{0}].PercentageCover", i, prefx4);
                                                var n11= string.Format("{1}[X{0}].isConfirmed", i, prefx4);
                                                <tr>
                                                    <td>
                                                        <input type="hidden" name="@prefx6" value="@itemIndex3" />
                                                        @Html.Hidden(n7, Model.Underwriting_InsurerPolicyDistribution[i - 1].PolicyRefCode, new { id = n7 })
                                                        <button type="button" style="background-color:#89006e !important; color:#fff; text-align:center" class="btn-primary btn-xs delbtn"><span class="glyphicon glyphicon-remove"></span></button>
                                                    </td>
                                                    <td>
                                                        @Html.DropDownList(n8, new SelectList(Html.InsurerBranchDropDownList(), "InsBranchCode", "FullDescription", Model.Underwriting_InsurerPolicyDistribution[i - 1].InsBranchCode), new { id = n8, @class = "form-control input-sm chosen_select_L" })
                                                        @Html.ValidationMessage(n8, "", new { @class = "text-danger" })
                                                    </td>
                                                    <td>
                                                        @Html.CheckBox(n9, Model.Underwriting_InsurerPolicyDistribution[i - 1].InsuerLeadCode, new { id = n9, @class = "form-control input-sm" })
                                                        @Html.ValidationMessage(n9, "", new { @class = "text-danger" })
                                                    </td>
                                                    <td>
                                                        @Html.TextBox(n10, Model.Underwriting_InsurerPolicyDistribution[i - 1].PercentageCover, new { id = n10, @class = "form-control input-sm", @style = "width: 65px;" })
                                                        @Html.ValidationMessage(n10, "", new { @class = "text-danger" })
                                                    </td>
                                                    <td>
                                                        <div class="form-check" type="checkbox">
                                                            @Html.CheckBox(n11, Model.Underwriting_InsurerPolicyDistribution[i - 1].isConfirmed, new { id = n11, @class = "form-check-input" })
                                                            @Html.ValidationMessage(n11, "", new { @class = "text-danger" })
                                                        </div>
                                                    </td>

                                                </tr>
                                            }
                                        }

                                        else
                                        {
                                            int c = 1;
                                            foreach (var module in Model.Underwriting_InsurerPolicyDistribution)
                                            {
                                                Html.RenderPartial("InsurerPolicyDistributionEditor", module, new ViewDataDictionary(ViewData) {
		                                             {"prefix", "Underwriting_InsurerPolicyDistribution"}, {"itemIndex", "X" + c}
		                                             });
                                                c = c + 1;
                                            }
                                        }
                                            }
                                        </table>
                                        <input type="submit" class="btn btn-primary" value="Add New" onclick="addRow('requestItems'); return false;" />
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Next</button>
                                </div>
                            </div>
                        </div>
                </div>

            </div>
        </div>



@section scripts {
    <script src="~/Scripts/chosen.jquery.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function () {
        $(".chosen_select_L").chosen({
            width: "100%",
            no_results_text: "Oops, nothing found!",
            disable_search_threshold: 5
        });


    function addRow(dataTable) {
        var table = document.getElementById(dataTable);
        var rowCount = table.rows.length;
        if(rowCount < 500){
            $(".chosen_select_L").chosen('destroy');
            var row = table.insertRow(rowCount);
            row.id = "X" + rowCount;
            var colCount = table.rows[1].cells.length;

            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/X1/g, row.id);

                switch (newcell.childNodes[0].type) {
                    case "text":
                        newcell.childNodes[0].value = "";
                        break;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
                    case "hidden":
                        newcell.childNodes[0].value = "";
                        break;
                }
            }
        }
        else{
            BootstrapDialog.alert("Maximum rows are 500");
        }

        $(".chosen_select_L").chosen({
            width: "100%",
            no_results_text: "Oops, nothing found!",
            disable_search_threshold: 5

        });

    }
  });
}

Any assistance will be greatly appreciated.

Best regards,

Abiodunajai

Answer 1

Hi @abiodunajai,

I think you can do this with the position property.

The position property specifies the type of positioning method used for an element.

You can add code based on the two places I've marked below.

 <div class="modal-content" style="position: relative;">

 <td style=" position: absolute; width:300px;border:none">

Best regards,

Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.