locked
MVC 5 ListBox items showing past its box on hover without setting JS RRS feed

  • Question

  • User-544325736 posted

    Hello everyone,

    I have a listbox on my application I added a new listbox to my view and all I did was move a class and an ID tag literally that was it and now when I check my old listbox it use to be able to scroll the items in it now when I go to scroll as soon as I hover on the listbox all the items show up and it goes past the range of the listbox.

    I never created any JavaScript for anything to do with hover or mouseover and it was working fine before until I added this new list box. Now when I take this new listbox away it still doesn’t work like it was before. Im pretty confused and don’t know what happened I tried rebuilding the application. Also restarting Visual Studio… Here is my view here is my JavaScript and here is where I load the listbox..

    http://i68.tinypic.com/2i0w7ki.png

    <div class="col-md-4 col-lg-4 ">
        <div class="form-group">
            <div class="panel text-center" id="borderIt">
                <div class="panel-heading text-center">
                    <div class="row">
                        <button id="btnToggleMachTypes" type="button" class="btn">Machine Types</button>
                        <small id="SMTcaption" class="col-md-12 col-lg-12">Click to show Machine Types</small>
                    </div>
                </div>
                <div id="MachineTypeListBox">
    
                    <div class="panel-body">
                        @Html.ListBoxFor(x => x.SelectedMachTypes,
                        Model.ListMachTypes,
                        new { @class = "form-control", @size = 8 })
                    </div>
                    <small>Hold Ctrl and click to select multiple machines</small>
                    <div class="panel-body text-center">
                        <input type="button" id="btnSelMacType" class="btn btn-sm" value="Select Machines" />
                        <input type="button" id="btnSMTall" class="btn btn-sm" value="All Machines" />
                        <input type="button" id="btnSMTclear" class="btn btn-sm" value="Clear Machines" />
                    </div>
    
                </div>
            </div>
        </div>
    </div>
    $(function () {
    $("#MachineTypeListBox").hide();
                $("#btnToggleMachTypes").click(function () {
                    $("#MachineTypeListBox").toggle();
                    //$("#MachineTypeListBox").css("border", "2px solid #173e43");
                    $("#borderIt").css("border", "1px solid #173e43");
                    $("#SMTcaption").toggle();
                });
    $("#btnSelMacType").click(function () {
                    var selected = $("#SelectedMachTypes option:selected");
                    var message = "";
                    var typetext = "";
                    var typeval = "";
    
                    selected.each(function () {
                        message += $(this).text() + " " + $(this).val() + "\n";
                        typetext += $(this).text() + "; ";
                        typeval += $(this).val() + "; ";
                    });
    
                    $("#MachineTypes").val(typetext);
    
                    $.ajax({
                        url: '/Parts/SelectMachineTypes',
                        method: 'POST',
                        data: { selectedTV: message, selectedT: typetext, selectedV: typeval },
                        success: function () {
                            //alert("s");
                        },
                        error: function () {
                            alert("e");
                        }
                    });
                });
    public List<SelectListItem> GetMachineTypes()
            {
                var machines = (from m in context.MachineTypes
                                orderby m.Sequence
                                select new SelectListItem
                                {
                                    Value = m.ID.ToString(),
                                    Text = m.MachineType1
                                }).ToList();
                return machines;
            }
    Monday, June 24, 2019 4:47 PM

All replies

  • User665608656 posted

    Hi ExceedingLife,

    Acoording to your descritpion,the code you provided is the old listbox that existed on your page?

    If so, please provide the following new listbox you added, because I can't reproduce your issue now.

    I suggest you could try to add a fixed height to the listbox, just like below:

     @Html.ListBoxFor(x => x.SelectedMachTypes,
                        Model.ListMachTypes,
                        new { @class = "form-control", @size = 8 , @style = "height:100px;" })

    Best Regards,

    YongQing.

    Tuesday, June 25, 2019 5:23 AM
  • User-544325736 posted

    A Fixed height would fix it but I was kinda hoping to have it as previous. Just a listbox that is scrollable.

    Here are both the ListBoxes. I didnt add anything else for this error to occur. Just changed a class and id tag. The one I already had.

     <div class="form-group">
                                                    <div class="panel text-center" id="borderIt">
                                                        <div class="panel-heading text-center">
                                                            <div class="row">
                                                                <button id="btnToggleMachTypes" type="button" class="btn">Machine Types</button>
                                                                <small id="SMTcaption" class="col-md-12 col-lg-12">Click to show Machine Types</small>
                                                            </div>
                                                        </div>
                                                        <div id="MachineTypeListBox">
    
                                                            <div class="panel-body" >
                                                                @Html.ListBoxFor(x => x.SelectedMachTypes,
                                                                Model.ListMachTypes,
                                                                new { @class = "form-control", @size = 8 })
                                                            </div>
                                                            <small>Hold Ctrl and click to select multiple machines</small>
                                                            <div class="panel-body text-center">
                                                                <input type="button" id="btnSelMacType" class="btn btn-sm" value="Select Machines" />
                                                                <input type="button" id="btnSMTall" class="btn btn-sm" value="All Machines" />
                                                                <input type="button" id="btnSMTclear" class="btn btn-sm" value="Clear Machines" />
                                                            </div>
    
                                                        </div>
                                                    </div>
                                                </div>

    This is my newly added one.

     <div class="panel-body">
                                <h5>Last Used in this Book</h5>
                                @Html.ListBox("lstLastUsedParts", new SelectList(new[] { "" }),
                                 new { @class = "form-control", @size = 10 })
    
                            </div>

    Tuesday, June 25, 2019 2:19 PM
  • User-544325736 posted

    adding this seemed to fix my scroll disappearing and listbox showing past the box

    Model.ListMachTypes,
    new { @class = "form-control", @style="overflow:scroll;", @size = 8 })

    Tuesday, June 25, 2019 6:52 PM
  • User665608656 posted

    Hi ExceedingLife,

    According to your description, since I can't reproduce your issue, I added the div of the second listbox you provided to the code for testing, and everything worked fine.

    I added the overflow:scroll you suggested in the first listbox style, the listbox still shows normal, and I tried to change the style to overflow:visible, my listbox had issues you had before.

    You could refer to the overflow style by this link : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

    This is the result of the work demo:

    Best Regards,

    YongQing.

    Wednesday, June 26, 2019 1:28 AM