Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #102106
    tullio0106
    Member
    Up
    0
    Down

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

    #102109
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102311
    tullio0106
    Member
    Up
    0
    Down

    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

    #102312
    YavorDashev
    Member
    Up
    0
    Down

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.