CODEWITHSUNDEEP
jquerycss
bhargav
bhargav

Reputation: 619

how to set width of li based on its longest contents width

i hav an unordered list whose contents are filled dynamically from database using below in code behind

    StringBuilder output = new StringBuilder();
    int lastDepth = -1;
    int numUL = 0;

    foreach (DataRow row in dt.Rows)
    {
        int currentDepth = Convert.ToInt32(row["Depth"]);
        if (lastDepth < currentDepth)
        {
            output.Append("<ul class=\"dropdown\">");
            numUL++;
        }
        else if (lastDepth > currentDepth)
        {
            output.Append("</li></ul></li>");
            numUL--;
        }
        else if (lastDepth > -1)
        {
            output.Append("</li>");
        }
        output.AppendFormat("<li><span class=\"text\"><a href=\"{1}\" title={1}>{0}</a></span>", row["ApplicationName"], row["Url"]);

       lastDepth = currentDepth;
    }
    for (int i = 1; i <= numUL; i++)
    {
        output.Append("</li></ul>");
    }
    Literal1.Text = output.ToString();

In above code "dropdown" is the class i used to style the ul...everything is workin fine.......

above code returns unordered list lke this

<ul>Home
<li><a href="#">Country</a></li>
<li>State</li>
<li>City</li>
</ul>

i have a bit more ul's coming similarly from database.the problem is i need to set the longest content width as width of li coming under ul for example:Country is longest above so the width of all the li's coming under "Home" should hav the same width....

the styling is done over here to create a good lookin navigation bar in external css

ul.dropdown                         {text-align:left; position:relative;z-index:1; }

ul.dropdown li                      { font-weight: bold;border:1px solid green; float:left;color:white;background: black; }

ul.dropdown a:hover                 { color: white; }

ul.dropdown a:active                { color: white; }

ul.dropdown li a                    { text-align:left; display:inline; padding:4px;
                                      color:white;}

ul.dropdown li:last-child a         { border-right: none; } 


ul.dropdown li:hover                { background: orange; color: white; position:relative; }



.dropdown ul                        {  visibility:hidden; 

position:absolute;  left: 0; }

ul.dropdown ul li                   
{ font-weight: normal; background:black; color: white; float:left; }


ul.dropdown ul li a{color:White; border-right: none;display: inline-block; } 


ul.dropdown ul ul                   { left: 100px; top: 0; }

ul.dropdown li:hover > ul           { visibility: visible;}

Thanx in advance

Upvotes: 0

Views: 7141

Answers (2)

JackWilson
JackWilson

Reputation: 577

You can use JavaScript/jQuery after the document has been loaded to find the width of the largest li element and then set all the list elements' width to that value.

EDIT: The below code won't work as is since element.css('width') returns "40px". You'll have to trim the "px" off the end. EDIT 2: I've fixed the code.

Something like this: (change the 'li' selector to whatever you need)

$(document).ready(function() {
        var maxWidth = 0;
        var elemWidth = 0;
        $('li').each(function() {
            elemWidth = parseInt($(this).css('width'));
            if (parseInt($(this).css('width')) > maxWidth) {
                maxWidth = elemWidth;
            }
        });
        $('li').each(function() {
            $(this).css('width', maxWidth + "px");
        });
    });

Upvotes: 5

prodigitalson
prodigitalson

Reputation: 60413

Since the actual width of the items wont be determined until runtime and you have to set a hard width for the dropdowns to work correctly i would iterate over the list items after you append them to the dom and find the longest with then call element.css('width', widthoflongest) on the parent li.

Upvotes: 1

Related Questions