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

Question

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 Answer

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;
}

osgood_ · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded