Dlaczego mój rozwijany CSS znika i jak mogę to naprawić?

Question

To naprawdę dziwny problem, który dotyczy tylko Google Chrome.

Jeśli mam 299 wierszy z rozwijanej listy, zachowuje mój niestandardowy CSS. Jednak po drugiej stronie, do której docieram do 300 wierszy, cała moja stylizacja jest usuwana i domyślnie jest ustawiona na domyślną przez Google Chrome.

Na stronie JSFiddle ma 300 wierszy, jeśli wyświetli się wynik, będzie miał domyślną stylizację. Ale jeśli usuniesz jeden wiersz, zastosowana zostanie moja niestandardowa stylizacja. Dlaczego to?

JSFiddle: Element dół https://jsfiddle.net/s7opd7dm/

Proste drop:

@Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), "Select Supplier Name", new { @id = "SuppNameDD", @class = "GRDropDown", disabled = true }) 

Answer 1

miałem ten sam problem. Dowiedziałem się, że wyłączyli go na 300 opcji lub więcej.

My celowo wyłączone stylizacji dla ponad 300 opcji z powodu problemu wydajności (crbug.com/500401).

przeczytać o tym here

Answer 2

Chrome Celowo zrobiłem niepełnosprawnych stylizacji dla ponad 300 opcji, więc nie możemy dotrzeć odpowiedź, że sposób.

W skrócie chciałbym powiedzieć, że należy użyć dowolnego niestandardowego menu rozwijanego.

Jak prosisz o rozwiązanie do osiągnięcia, oto poprawka W tym przypadku wolałbym utworzyć niestandardowe rozwijane przy użyciu innych elementów HTML, takich jak divs i listy i wziąć wybraną wartość listy. Tutaj pokażę, jak utworzyć niestandardowy element div. Kod został przetestowany w ASP.NET MVC5 C# i działa dobrze. Opublikuj tę demonstrację, aby promować ten pomysł, ponieważ może to pomóc każdemu, kto szuka takiej możliwości w takich przypadkach.

w some_view.cshtml dodać następujące włączenia jQuery i style

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script> 
<!--<script src="@Url.Content("~/Scripts/myjquery.js")"></script> in case want this jquery to be external--> 
<script> 
function my_dd(el) { 
    this.dd = el; 
    this.initEvents(); 
} 
my_dd.prototype = { 
    initEvents : function() { 
    var obj = this; 
    obj.dd.on('click', function(event){ 
     $(this).toggleClass('active'); 
     event.stopPropagation(); 
    }); 
    } 
} 
$(function() { 
    var dd = new my_dd($('#dd')); 
    $(document).click(function() { 
     $('.wrapping').removeClass('active'); 
    }); 
}); 
/** on select take the value to hidden text field**/ 
$(document).ready(function() 
{ 
$('ul.my_dd li').click(function(e) 
    { 
    var selected=$(this).text(); 

    /**change label to selected**/ 
    $('.label').text(selected); 
    $('#selected-value').val(selected); 
    }); 
}); 
</script> 
<!--<link href="@Url.Content("~/Content/my.css")" rel="stylesheet" type="text/css" /> 
in case want the css to be external--> 
</script> 
<style> 
*,*:after,*:before { 
    box-sizing: border-box; 
} 
.wrapping { 
    position: relative; 
    width: 200px; 
    margin: 0 auto; 
    padding: 10px 15px; 
    cursor: pointer; 
    outline: none; 
} 
.wrapping:after { 
    width: 0; 
    height: 0; 
    position: absolute; 
    right: 16px; 
    top: 50%; 
    margin-top: -3px; 
    border-width: 1px solid red; 
    border-style: solid; 
    border-color: #366; 
} 
.wrapping .my_dd { 
    position: absolute; 
    top: 60%; 
    left: -45px; 
    right: 0px; 
    background: white; 
    transition: all 0.1s ease-out; 
    list-style: none; 
    opacity: 0; 
    pointer-events: none; 
} 
.wrapping .my_dd li a { 
    display: block; 
    text-decoration: none; 
    border: 1px solid; 
    padding: 10px; 
    transition: all 0.1s ease-out; 
} 


.wrapping .my_dd li i { 
    margin-right: 5px; 
    color: inherit; 
    vertical-align: middle; 
} 

.wrapping .my_dd li:hover a { 
    color: grey; 
    background-color: darkgrey; 
    max-height:300px; 
} 
.wrapping.active:after { 
    border-width: 0 6px 6px 6px; 
} 

.wrapping.active .my_dd { 
    opacity: 1; 
    pointer-events: auto; 
    height:300px; 
    overflow-y:scroll; 
} 
</style> 

</style> 
    <div id="dd" class="wrapping">Test Drop Down 
     <ul class="my_dd"> 
    <!-- use list or a foreach or for loop to push content to list 
     example 
     @foreach(var productId in Model.FailedProductIdsList) 
     { 
     <li><a href="#">@Convert.ToString(productId);</a></li> 
     }--> 
     <li><a href="#"><i></i>Select 0</a></li> 
      ............... 
      <li><a href="#"><i></i>Select 300+</a></li> 
     </ul> 
    </div> 
    <!-- @Html.TextBoxFor(c => c.Propertyname, new { @Value = "selected" })-->