JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › DropDownList › DropdownList with images
Tagged: DropdownList images
- This topic has 3 replies, 2 voices, and was last updated 3 years, 2 months ago by YavorDashev.
-
AuthorPosts
-
July 29, 2021 at 8:53 am #102106tullio0106Member
Is it possible to have a DropdownList showing images in the list ?
TksJuly 29, 2021 at 1:46 pm #102109YavorDashevMemberHi 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/October 1, 2021 at 8:58 am #102311tullio0106MemberTks 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 ?
TksOctober 1, 2021 at 12:31 pm #102312YavorDashevMemberHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.