Dojo FilteringSelect

0
votes

I'm using Dojo v1.8 Filtering Select Component. I have some text inside the drop down. When i type a text inside the filtering select, i found some characters were cutting of the length and displaying outside the filtering Select box.

Note: i must turn on the force width attribute and cannot be removed.

Kindly find the jsfiddle url, where i have kept my sample code.Type "All" , and the issue is reproduced.

URl : jsfiddle.net/sumanth418/KUH3P/

Thanks

1
dojo

1 Answers

3
votes

That's an interesting bug you found. It seems that the menu item CSS code is actually using the following CSS property:

.dijitMenuItem {
    white-space: nowrap;
}

This means that if the content doesn't fix in the box, it will not create a new line, but it will in fact just go through (and that's the effect you're seeing). That alone is no problem if the overflow property is defined somewhere. If I look at the CSS of the dijitComboBoxMenu, I notice that the following is present:

.dijitComboBoxMenu {
    overflow: visible;
}

Both CSS properties combined, makes it so that the content will overflow and that the overflowing content will be visible as well.

This looks like a bug, and indeed it is. If I run your code using Dojo 1.9.1, the problem is solved and the overflowing content is invisible.

To manually fix your problem (if upgrading to Dojo 1.9.1 is no possibility), you could do several things:

  1. Change the white-space property to inherit. This will cause the overflowing content to be displayed on the next line.

  2. Change the overflow prperty of dijitMenuItem to hidden. This will hide the overflowing content (like the fix in Dojo 1.9.1)

  3. Change the overflow property of dijitComboBoxMenu to scroll. This will add a horizontal and vertical scrollbar to the combobox menu. However, because the overflow is overriden by inline CSS, you need to append the !important modifier

  4. If you dislike the vertical scrollbar from solution 3, you can use:

.dijitComboBoxMenu {
    overflow-x: scroll !important;
}

However, the overflow-x property is a CSS3 property which might not work on older browsers.