03. Module Name is too long in the dropdownlist
11 Jan 2014 02:21:00 AM

Note: on version 4.1.0, the module name has already been fixed. Once you upgrade to version 4.1.0 , you will be asked to run a renaming setup wizard. Just follow through the process and you will notice the name will be automatically updated.

If you are using the older version, you can see the following walkthrough. Unfortunately, the name of the module is quite long and it is designed to be quite long name so it can be unique against other module definitions. To overcome this is actually pretty easy. Firstly you will need to know the basic of css. Secondly, we will going to use Chrome or Firefox browser, because this browser can inspect the elements of the htmls, so it can guide you to which html tags like class or id you will need to alter.

Note: the sample below we give might use the older version of DNN, if you are using the latest version, you might find out that some class or tags defined might have been different. So please just learn the basic tutorial below and apply it to the newer version.

3.1 Adjusting the DNN css to extend the width of the dropdownlist (Module Names)

Please see the following illustration / guides if you want to extend the width of the dropdownlist.

1. Use Chrome or Firefox browser as they have the built in html tag inspector or viewer. We will use the Chrome browser for this example.

2. Right click of the dropdownlist not the square box and click Inspect menu.

Inspect Element

3. Once you click the Inspect Element, you will see that the dropdownlist has a style width of 160px marked with blue circle. The wrapper of the square box is marked with red circle and the wrapper for the dropdownlist is marked with yellow circle.

Inspect Element

Figure 3A

Click the megaborder line, and you will be able to see the style used for the dropdownlist box and the css file named called module.css showed on the right hand side and you can see that the width is specified to 275px showed in blue circle.

Inspect Element

4. Right click the current page and view the source code and look for module.css location path.

Do a quick search and look for module.css and you should be able to find it under:


5. Open the module.css it should be under root folder

Then look for the wording megaborder, you should find the following css.

#dnnCommonTasks .megaborder{width:275px;min-width:275px;}

change to

#dnnCommonTasks .megaborder{width:550px;min-width:550px;}

As you can see We double size the width. After saving the file, try to refresh the page. You will see that the box is now wider than its original size.

Next one is to fix up the dropdownlist. In the same file (module.css), you can look dnnCPModSelection as marked as yellow circle on Figure 3A
Do a quick search and replace the following css:
.dnnCPModSelection .dnnClear input[type="text"], .dnnCPModSelection .dnnClear select, .dnnCPModLocation .dnnClear select, #dnnCurrentPage input[type="text"], #dnnCurrentPage select{width:160px !important;overflow:hidden;}

.dnnCPModSelection .dnnClear input[type="text"], .dnnCPModSelection .dnnClear select, .dnnCPModLocation .dnnClear select, #dnnCurrentPage input[type="text"], #dnnCurrentPage select{width:350px !important;overflow:hidden;}
You can notice I have increased the size from 160px to 350px.
Here is the final result after we apply the changes.

Note: above example is only applying for ribbon bar control panel. If you are a developer or designer, you should be able to the sample methods We showed above. Just use the Firefox and Chrome to view the html tags.

There are 0 comments for this article