CODEWITHSUNDEEP
asp.netdrop-down-menu
Shivkumar Deshmukh
Shivkumar Deshmukh

Reputation: 1148

Text Not Fitted in ASP:DropDownList

I'm Using ASP:DropdownList(Code Behind Approach) which has some events assosiated with it, my problem is my full text is not visible in the dropdownlist it is due to the width of dropdown list which I can't increase so how can I show the full text I searched this Link

http://jquery.sanchezsalvador.com/jquery/page/jquerycomboboxexamplestyle.aspx

at one place in I used Jquery ui Widget but my events are not fired because it ultimately renders textbox.

Does anyone have any solutions?

thanks in advance

CSS Class

.dropdown
 {
    border: #000000 1pt solid;
    font-weight: normal;
    font-size: 13px;
    vertical-align: middle;
    font-style: normal;
    font-family: verdana;
    text-align: left;
    height: 22px;
    overflow:visible;
}

Upvotes: 1

Views: 2936

Answers (3)

Bill Berlington
Bill Berlington

Reputation: 2414

No need to implement any messy logic for this issue. The answer is sweet and simple. Just remove the property "Width" in the ASP:DropdownList in the .aspx page. The dropdown will expand to the width of the largest item added to it.

Also remove the width properties added to the Css class of the dropdown.

Upvotes: 2

Shadow Wizzard
Shadow Wizzard

Reputation: 66396

You can mess with the font size so it "auto fits" the width of the drop down list.

To achieve that, just decrease the font size when item is selected until it fits:

$(document).ready(function() {
    $(".dropdown").each(function() {
        $(this).data("org_fontsize", $(this).css("font-size"));
    });


    $(".dropdown").change(function() {
        var ddl = $(this);
        var fontSize = parseInt(ddl.css("font-size"), 10);
        if (!isNaN(fontSize)) {
            var originalWidth = ddl.outerWidth();
            ddl.css("width", "auto");
            var currentWidth = ddl.outerWidth();
            if (currentWidth > originalWidth) {
                while (currentWidth > originalWidth) {
                    fontSize--;
                    if (fontSize < 2)
                        break;
                    ddl.css("font-size", fontSize + "px");
                    currentWidth = ddl.outerWidth();
                }
            }
            else {
                ddl.css("font-size", ddl.data("org_fontsize"));
            }
            ddl.css("width", originalWidth + "px");
        }
    });
});

This will also restore the original font size for items that don't exceed the width.

Live test case.

Upvotes: 0

Berker Y&#252;ceer
Berker Y&#252;ceer

Reputation: 7345

From what i understand ur havign problems with showing the text of ur options.

These are style classes of ur options

comboboxDropDownItemClass: "comboboxItem", 
comboboxDropDownItemHoverClass: "comboboxItemHover",

and here is ur options style sheet.

.comboboxItem { background:#fff; color:#000; text-transform:lowercase; 
                font-weight:normal; font-style:normal; overflow:visible; } /* here is ur text visibility */ 

.comboboxItemHover { background-color:#999; color:#fff; text-transform:uppercase;
                     padding-left:4px; overflow:visible; } /* here is ur text visibility */

and what u need to do just putting overflow:visible; there.

if still not solved than just change the width of the comboboxItem that should do the job.

Upvotes: 0

Related Questions