In my last post, I discussed how the Infor CRM (Saleslogix) ComboBox is a Dijit Select form widget. This opens up a few different things about what you can do to the control based on what is possible to do with the Dijit Select. For example, controlling the height of the popup list for the ComboBox.
The Problem
The Infor CRM ComboBox doesn’t look so nice, or is easy for an end-user to use, once the list gets long. It’s ugly and cumbersome to work with. Here’s an example:
(click for larger view)
It gets even worse if the list is longer. Even to the point where it runs right off the screen and causes the entire page to keep scrolling for as long as the ComboBox gets. It just keeps getting longer and longer.
The Solution
Since the ComboBox is really just a Dijit Select widget, the Select has an attribute that can be added called maxHeight. This attribute will cause the popup list to have that height and also a scrollbars for the items that exceed that height. We can do this on a case-by-case basis by adding this attribute to the ComboBox.
comboBox1.Attributes["maxHeight"] = "200"; |
Then, the maxHeight will be passed along to the control on the SmartPart and get picked up by the Dojo Dijit library when it renders the control and set the height accordingly. Then, that ugly list above will end up more like this:
That is so much better. Personally, I think all ComboBoxes in the system should have this same maxHeight set. Luckily, there’s a way to add this to all controls with a simple CSS style-sheet addition.
Add a new style-sheet to the css folder in the SupportFiles of the portal with the following:
.dijitSelectMenu
{
max-height: 200px !important;
overflow-y: scroll !important;
}
|
(Don’t miss that “.” before the dijitSelectMenu). Also, open the base.Master and add the stylesheet there as well. Then, the style will apply to all ComboBox popup lists in the system and no need to set it on a per-control basis.
