JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ComboBox › disable combobox dropdown button
- This topic has 3 replies, 2 voices, and was last updated 2 years, 3 months ago by
edwardsmarkff.
-
AuthorPosts
-
May 9, 2022 at 5:19 pm #103168
edwardsmarkff
Participanthello – first off, let me start out by saying that html smart elements ComboBox is the most valuable and useful javascript widget i have ever found. THANK YOU so much for providing it.
i am dynamically creating ComboBox items and believe it will be very helpful to my clients if we can suppress/hide the drop-down arrow completely if there are indeed no items to select. otherwise, they click & see “No items”, so i do not see a reason to display the button in such situations.
Newbies, please remember that with or without the arrow, ComboBox is still a very powerful HTML input item.
i was unable to find such an option, so i came up with a simple suggestion/solution:
https://codepen.io/edwardsmarkf/pen/poayPbg
or perhaps i missed if this is already possible with the current set of options?
again, thank you so much for providing ComboBox.
-
This topic was modified 2 years, 3 months ago by
edwardsmarkff.
May 9, 2022 at 5:32 pm #103173admin
KeymasterHi,
Would not it better if you use the smart-input in that case instead? Otherwise with CSS you can hide it. The ‘.smart-drop-down-button’ CSS class is applied to the dropdown button.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/May 10, 2022 at 4:35 pm #103191edwardsmarkff
Participanthi Peter – thank you for your reply.
the issue i am facing is that i am creating <span style=”text-decoration: underline;”>dynamic</span> ComboBox elements from a data source, and it is very difficult to determine ahead of time if there are going to be list items or not.
i set up an example here of what i am thinking: https://codepen.io/edwardsmarkf/pen/poayPbg
for ( let tmp in document.getElementsByTagName(‘smart-combo-box’) ) {
. . . if (!isNaN(parseInt(tmp))) {
. . . . . . . . let comboBox = document.getElementsByTagName(‘smart-combo-box’)[tmp] ;
. . . . . . . . if ( !comboBox.items.length) {
. . . . . . . . . . . . comboBox.getElementsByClassName(‘smart-drop-down-button’)[0].style.setProperty(‘display’ , ‘none’ );
. . . . . . . . . . . . // HIDE the drop-down arrows if there are no items to select
. . . . . . . . }
. . . . }
}May 10, 2022 at 9:11 pm #103199edwardsmarkff
Participantdisregard last message please – i am going to try to see if i can get a “count” first and then try out your EXCELLENT RECOMMENDATION of using the “smart-input” instead of “smart-combo-box” when there are no line items.
thank you.
-
This reply was modified 2 years, 3 months ago by
edwardsmarkff.
-
This reply was modified 2 years, 3 months ago by
edwardsmarkff.
-
This topic was modified 2 years, 3 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.