Нормальный HTML листбох?
В принципе есть, НО в
edge
а в Chrome и FF
Неизвестно что на маке
https://jsfiddle.net/8ajm0r4w/
В принципе, если убрать серый цвет в едге, то всё нормально. Проблема в том как? Говорят что низзя.
Советуют енто но что то пока не пошло
Там, где говорят, что этот элемент рендерится OS-dependent, там же вроде и альтернативы предлагают - заменить select на похожий элемент.
https://stackoverflow.com/questions/68626310/can-you-chang...
У меня эта портянка работает на Эдже
Можно листбокс сделать на div-ах, наружний div, и внутри дивы.
Дневник тяжелобольного инвалида
Вот небольшой пример, я сделал на ul-li:
<!DOCTYPE html>
<html>
<head>
<title>ListBox Demo</title>
<style>
#listbox { width:150px; height:100px; border:1px solid #eee; overflow-y:scroll; padding:1px 1px; }
#listbox li { width:100%; list-style:none; cursor:pointer;}
#listbox .selected { background-color:blue; color:white; }
</style>
<script>
// Очистка выделения
function clear() {
document.querySelector('li').style.backgroundColor = 'white';
document.querySelector('li').style.color = 'black';
}
</script>
</head>
<body>
<ul id="listbox">
<li onclick="clear(); this.setAttribute('class', 'selected');">a1</li>
<li onclick="clear(); this.setAttribute('class', 'selected');">a2</li>
<li onclick="clear(); this.setAttribute('class', 'selected');">a3</li>
</ul>
</body>
</html>
Дневник тяжелобольного инвалида
Вот так работает:
CSS:
#listbox .unselected { background-color:white; color:black; }
Javascript:
<script>
function _clear() {
var el = document.getElementById('listbox');
for(c of el.children)
c.setAttribute('class', 'unselected');
}
</script>
HTML:
<ul id="listbox">
<li onclick="_clear(); this.setAttribute('class', 'selected')">a</li>
<li onclick="_clear(); this.setAttribute('class', 'selected')">b</li>
<li onclick="_clear(); this.setAttribute('class', 'selected')">c</li>
</ul>
Дневник тяжелобольного инвалида
Если Блейзор, то в Радзене вот такой листбокс есть. Там берём первый пример, жмакаем "Edit Source", правим код и жмём "Run". Я пока добился лишь ховер сделать жёлтым с пунктами, просто переписав частично их стили. Как красный пока не понял - там для выделенного элемента другой стиль, но у меня он не переписывается. Можете скопировать код внизу польностью и заменить им код примера - это и есть код примера, но с добавленными мной стилями. Суть в том, чтобы просто сделать флекс-контейнер и растянуть его коллекцию предметов без отступов. Поиграйтесь - может, получится у вас.
Код удалил, заменил новым - смотрите ниже.
Вот получилось. И очистил от мусора. Checked убрал - просто переписал стиль выделенного элемента самого Радзена.
@using RadzenBlazorDemos.Models.Northwind
@inherits DbContextPage
<style>
.rz-listbox-list
{
align-items: stretch;
}
.rz-multiselect-item{
height: 100%;
width: 100%;
}
.rz-state-highlight{
height: 100%;
width: 100%;
background-color: red!important;
border-style: dotted;
}
.rz-multiselect-item:hover {
background-color: yellow!important;
border-style: dotted;
}
</style>
<div class="rz-p-sm-12 rz-text-align-center">
<RadzenListBox @bind-Value=@value Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" Style="width: 100%; max-width: 400px; height: 200px">
<Template>
Company: @((context as Customer).CompanyName)
</Template>
</RadzenListBox>
</div>
@code {
string value = "AROUT";
IEnumerable<Customer> customers;
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
customers = dbContext.Customers;
}
}
Спасибо, но есть еще одна проблема - никаких дополнительных библиотек.
Так что пока дев. ехпресс. Контрол правда, тоже не без проблемный, однако пока удается бороться.
Похоже что у них блазором совсем другая команда занимается, всё хуже чем раньше или просто еще мало времени прошло.
Может, тот же принцип - посмотрите, какие там стили в компонентах этого Девэкспресса, как они меняются при манипуляциях с компонентами, и перепишите часть под себя. Тем более с изоляцией стилей в Блейзоре это должно быть достаточно легко - добавил файл стилей в компонент и больше нигде, кроме этого компонента, этот стиль не применяется. За подробностями в МСДН.
Ещё вариант - глянуть, как они в Радзене это сделали, и скопировать код. Стили там, разметку. Можно в инструментах разработчика браузера, можно в ихнем Гите.
Вообще, я в этом фронтэнд вебе плохо разбираюсь, но у меня догадка, что всё основное я сделал сам - просто переписал нужные мне свойства стилей. Своего рода хак. Да, листбокс рендерится ОС (в смысле элементы option), но я внутренний элемент списка растянул, так что рендеринг ОС перекрылся моим элементом. Просто попробуйте не на option напрямую вешать красящие бэкграунд стили, а на его содержимое (если в option можно запихать какую-нибудь разметку, конечно).
с изоляцией стилей в Блейзоре
Есть один маленький нюанс - для дев эксперсса это не работает. Тикет по этому поводу даже есть.
Но потихоньку проблемы решаются.
Что фигово сделано:
- Отрисовка "большого" листбоха медленная
- Для показа текста используется имя проперти, вместо актион
- Высота задается в пикселях, а не в "строках листбокса"
Ну и клаву гады не прилепили. Теперь получается, что один элемент в фокусе который принимает события от клавы содержит другой элемент листбох. И не всегда передача фокуса срабатывает нормально.
Ещё вариант - глянуть, как они в Радзене это сделали
фигвам - без базовых компонентов/классов ничего не работает.
Да, листбокс рендерится ОС
Если бы это было действительно так, то от браузера не зависело бы
Просто попробуйте не на option
Ну ссылку, на попробовать я давал в самом начале.
- Отрисовка "большого" листбоха медленная
Без виртуализации?
Они хвалятся, что у них всё хорошо оптимизировано. Правда, там постраничный дата грид, или если непрерывным списком, то с виртуализацией.
Без виртуализации?
Это же listbox. Да и большой = 15 элементов
Справа появляется какой то странный символ во время отрисовки и при старом коде он вообще в ступор уходил - обнова была через секунд 20
Но в старом коде было быстрое обновление страницы раз 10 подряд, как это убралось, обновление стало незаметно. (И строму листбоху было до лампочки)