Das lässt sich im CSS sehr leicht einstellen:
Code:
.select2-option img {
/* height: 50px; */
height: 70px;
margin-right: 0.5em;
}
Bedenke jedoch, dass sich jedes Bild durch einfachen Klick oben groß anzeigen lässt.
Selbstverständlich. Hier würde es sich anbieten, das nur in der Handy-Ansicht zu machen weil dann weniger Platz in der Breite aber mehr Platz in der Höhe ist. Und auf dem Desktop anders herum.
Code:
<link href="css/select2.min.css" rel="stylesheet" />
<style>
/* Options in Select2 */
.select2-option {
display: grid;
grid-template-columns: 1fr auto;
font-size: 1.5em;
}
.select2-option img {
/* height: 50px; */
height: 100px;
margin-right: 0.5em;
}
.select2-option .dl-icon {
margin-left: auto;
font-size: 1.5em;
}
.select2-option .option-text {
grid-column: 1/3;
margin-top: 0.2em;
}
@media (min-width: 600px) {
.select2-option {
grid-template-columns: auto 1fr auto;
align-items: center;
}
.select2-option .option-text {
grid-column: 2/3;
}
.select2-option .dl-icon {
grid-row: 1/2;
grid-column: 3/4;
}
}
.select2-container li {
background-color: #FFF8DC;
}
und darunter wie bisher.
Und das HTML, das wir im Javascript einfügen, muss ein wenig anders aussehen:
Code:
function makeOption(data, container) {
if (!data.id) return data.text;
const $state = $(`
<span class="select2-option">
<img src="${data.element.dataset.imgUrl}">
<span class="dl-icon" data-link=${data.element.value}>⭳</span>
<span class="option-text">${data.text}</span>
</span>`);
return $state;
};
Diese Funktion
ersetzen, nicht hinzu fügen.
