The Jquery tabbed panel has a huge box that I can't reduce

[Chaplain Dale]

In the below image the tabbed panel has this huge blue box that I can't seem to reduce.  It's supposed to wrap around the tabs that are created.  But, as you can see, this is not so.  I've tried editing the ui code to no avail.  And I keep getting an error on line 15 that says I'm missing a right brace.  But, when I insert the right brace, the error just gets bigger and my blue box disappears.  Here's the link to the web page where I have it posted:  https://www.lotcs.org/forms2.html.  If someone would please let me know how to fix this, I'd greatly appreciate it.  So far, I've spent like 5 hours on the problem.  Spry was much easier to code with.  Maybe Adobe will bring back an enhanced version of Spry.  Jquery is not friendly...at least not to me!

Thanks,

Dale Iannello

[BenPleysier · Accepted solution]

There are better ways to create a tabbed panel as well as making the page responsive.

But to help you out of your dilemma, add the following style rule to your document:

#mainContent #Tabs1 .ui-tabs-nav.ui-helper-clearfix.ui-widget-header {
    height: 90px;
}

[Chaplain Dale]

Thanks Ben!  I used my CSS Designer tab and it works awesome now!  I gotta get used to this coding stuff!

All the best,

Dale Iannello

[osgood_]

I don't know about the height but this doesnt look correct on line 15:

0%;rgba(0,122,251,1.00)100%)

You can't start a css selector with 0%

That line needs to be removed completely. The whole line doesn't look correct, usually it would look like below:

background-color: rbga(0, 122, 251, 1); /* 1 being a solid background color and 0.5 being 50% opacity */

PS

Jquery is not friendly...at least not to me!

JQuery is quite 'friendly'. It was written to be more  'friendly' to what existed at the time. jQuery UI which you are using is a bit more complex. JQuery these days is an old workflow, still useful to know for old websites which depend upon it but going forward its not really necessary any longer since browsers have improved their support. JQuery was used extensively by developers to smooth out browser discrepancies and did a good job but these don't exist any longer so JQuery has somewhat fallen out of favour. Make your own mind up depending on what you use, there's no hard and fast rules to adhere to these days.

[Chaplain Dale]

Osgood,

That took care of the error message on line 15.  However, I still have this background that won't wrap around the tabs that I've created.  Thanks for the help though, eh!

All the best,

Dale Iannello

[Chaplain Dale]

Osgood,

Never mind the last.  Ben, ealier in the thread had the correct answer.  I didn't know where to put the height until I used my CSS Designer tab.  Thanks to all.

All the best, 

Dale Iannello