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

abiodunajai 371 Reputation points
2023-07-25T17:17:13.0566667+00:00

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

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,176 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
9,949 questions
ASP.NET API
ASP.NET API
ASP.NET: A set of technologies in the .NET Framework for building web applications and XML web services.API: A software intermediary that allows two applications to interact with each other.
279 questions
{count} votes

Accepted answer
  1. Lan Huang-MSFT 22,996 Reputation points Microsoft Vendor
    2023-07-27T03:02:30.4166667+00:00

    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;">
    

    enter image description here

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

    enter image description here

    enter image description here

    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.


0 additional answers

Sort by: Most helpful