jquery tabs with get distorted when content contains a list

Question

0.00/5 (No votes)

See more:

hey all...
i have the following scenario
jquery ui tabs that has 4 tabs that each contain some text + images
i also use jquery to make the tabs take 90% of the available width
so far all was good until i had to add an unordered list to one of the tabs content.
When I did that, the width of the tab headers shrunk to what im guessing is the default width or something.

here is the jquery code that i use to make the tab headers take the desired width:

C#

function stretchTabs() {
    var tabNums = $('#consultancyTabs ul li').length;
    var w = 1000 / tabNums;
    var wi = w - 10 + "px";
    //alert(wi);
    $('.ui-tabs .ui-tabs-nav li').css({
        'width': wi
    });
    $('.ui-tabs .ui-tabs-nav li a').css({
        'width': 90 + "%",
        'text-align':'center'
    });

}

I call the above function in the document.ready function after converting the target content into tabs
i have jquery ui tabs used on other pages and they work just fine as long as the content does not contain any lists

I am guessing that the workaround is something trivial but i still didnt figure it out
Any help is greatly appreciated
Thanks in advance :)

Posted 23-Sep-13 20:07pm

Reda Makarem

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Reda Makarem · Accepted Answer · 2013-09-23T21:10:00

Solution 1

i managed to solve the problem after debugging my jquery code
i had to modify the selector and make it more specific

the updated function would be :

C#

function stretchTabs() {
    var tabNums = $('#consultancyTabs:first-child ul:first li').length;
    var w = 1000 / tabNums;
    var wi = w - 10 + "px";
    $('.ui-tabs .ui-tabs-nav li').css({
        'width': wi
    });
    $('.ui-tabs .ui-tabs-nav li a').css({
        'width': 90 + "%",
        'text-align':'center'
    });

}

Cheers :)

Posted 23-Sep-13 21:10pm

Reda Makarem

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Sep-13 4:13am

You can accept your own answer, if problem is solved.

Thanks,
Tadit

Reda Makarem 24-Sep-13 4:23am

forgot to do that
thanks for the reminder

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Sep-13 4:35am

Most Welcome... :)