DropdownList with images

[tullio0106]

Is it possible to have a DropdownList showing images in the list ?
Tks

[YavorDashev]

Hi tullio0106,
I have created a quick code example that showcases you how to achieve the functionality you need.
In your html file:

    <smart-drop-down-list  drop-down-open-mode='dropDownButton' display-member="value" drop-down-height='800' drop-down-width='800'>
            <smart-list-item value="first image">
                <img src="path to your image" alt="">
            </smart-list-item>
            <smart-list-item value="second image">
                <img src="path to your image" alt="">
            </smart-list-item>
    </smart-drop-down-list>
 

And also some necessary CSS:

smart-drop-down-list{
	min-height: 35px;
	height: auto;
}
.smart-list-item-container img {
	width: 100%;
	height: 100%;
}
smart-list-item .smart-content,
smart-list-item .smart-overlay,
smart-list-item,
smart-drop-down-list {
	height: 300px;
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[tullio0106]

Tks for your help.
I tryed your suggestion and it works, however I’d like, if possible, to show the selected item not as a value but as an image.
Is it possible ?
Tks

[YavorDashev]

Hi tullio0106,
Yes it’s possible using ‘token-template’ property for which I have created yet another code example for how to achieve this functionality:
In your HTML file:

    <template id="tokenTemplate">
        <span><img class="avatar" src="" width="35" height="35" /></span>
        <span>{{data}}</span>
    </template>
    <smart-drop-down-list
        selection-display-mode="tokens"
        token-template="tokenTemplate"
        selection-mode='zeroOrMany'
        drop-down-open-mode='dropDownButton'
        display-member="value"
        drop-down-height='800'
        drop-down-width='1300'>
            <smart-list-item value="first image">
                <div>
                    <img src="your-img-src" alt="">
                    <p  class="image-description"s> First image desscription </p>
                </div>
            </smart-list-item>
            <smart-list-item value="second image">
                <div>
                    <img src="your-img-src" alt="">
                    <p class="image-description"> Second image desscription </p>
                </div>
            </smart-list-item>
    </smart-drop-down-list>

This time we will need to add some JavaScript as well:

window.onload = function () {
    document.querySelector('smart-drop-down-list').addEventListener('change', function () {
        const tokens = this.getElementsByClassName('smart-token');
        for (let i = 0; i < tokens.length; i++) {
            if (tokens[i].textContent.indexOf('first image') > -1) {
                tokens[i].getElementsByClassName('avatar')[0].src = 'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg';
            }
            else if (tokens[i].textContent.indexOf('second image') > -1) {
                tokens[i].getElementsByClassName('avatar')[0].src = 'https://hatrabbits.com/wp-content/uploads/2017/01/random-word-1.jpg';
            }
        }
    });
}

And again the needed CSS:

smart-drop-down-list{
    min-height: 35px;
    height: auto;
    width: 30%;
}
.smart-list-item-container img {
    width: 70%;
    height: 100%;
}
smart-list-item .smart-content,
smart-list-item .smart-overlay,
smart-list-item,
smart-drop-down-list {
    height: 300px;
}
.smart-list-item-container .image-description {
    display: block;
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 70%;
}
.avatar {
    border-radius: 50%;
}
.smart-token > span:first-of-type {
    padding-left: initial;
}
.smart-token {
    margin-left: 5px;
}
.smart-token > span {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
}
smart-drop-down-list[selection-display-mode="tokens"] .smart-selection-field > .smart-token {
    box-shadow: initial;
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts