Highlighted

Jquery tabbed panel header adjustment

New Here ,
Feb 06, 2020

Copy link to clipboard

Copied

When I insert a Jquery tabbed panel the header where the tabs reside is way to large in the "y" direction.  I have tried to use the CSS Designer panel to adjust the header to no avail.  I just can't seem to find the adjustment anywhere.  A picture of my issue is below.  With Spry there was a tutorial on these adjustments.  

Thanks,

 

This is my Jquery panelThis is my Jquery panel

Topics

Code, How to, Product issue

Views

339

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Jquery tabbed panel header adjustment

New Here ,
Feb 06, 2020

Copy link to clipboard

Copied

When I insert a Jquery tabbed panel the header where the tabs reside is way to large in the "y" direction.  I have tried to use the CSS Designer panel to adjust the header to no avail.  I just can't seem to find the adjustment anywhere.  A picture of my issue is below.  With Spry there was a tutorial on these adjustments.  

Thanks,

 

This is my Jquery panelThis is my Jquery panel

Topics

Code, How to, Product issue

Views

340

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Feb 06, 2020

Copy link to clipboard

Copied

Wrap your Tabbed panels in a parent container styled to whatever width is required.   For expediency, this example contains inline CSS.  In production, you would put CSS in your stylesheet.  Adjust values to suit. 

 

<div class="parent" style="width:50%; margin:0 auto">

<!--TABBED PANELS GO HERE-->

</div>

 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Feb 20, 2020

Copy link to clipboard

Copied

Nancy,

That doesn't work for me.  I still have that huge blue header.  When I use your code, it just reduces the width by 50%.  Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 20, 2020

Copy link to clipboard

Copied

It's pretty much impossible to say exactly what's going on with your page, without seeing the code.

Could you copy and paste the entire code of your page, and any css attached, into a forum reply so we can take a look at what's causing your issue?

...or better yet, post a link to a test page on a website you control so we can see with our browsers what's going on?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 20, 2020

Copy link to clipboard

Copied

 Not too sure what you mean by blue header.  Below is an example of jQuery UI Tabs with the Pepper Grinder theme.   By default the panels are only as big as content requires.

 

image.png

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--jQuery UI Theme, pepper-grinder-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">

<style>
body {background: darkgreen}
.parent {
width:50% !important; 
margin:56px auto}
</style>

</head>
<body>
<div class="parent">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
<li><a href="#tabs-4">Tab 4</a></li>
<li><a href="#tabs-5">Tab 5</a></li>
<li><a href="#tabs-6">Tab 6</a></li>
</ul>
<div id="tabs-1">
<h3>Heading 3</h3>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<h3>Ordered List</h3>
<ol>
	<li>Item </li>
	<li>Item </li>
	<li>Item </li>
	<li>Item </li>
</ol>
</div>
<div id="tabs-3">
<h3>Unordered List</h3>
<ul>
<li>something here</li>
<li>something here</li>
<li>something here</li>
<li>something here</li>
</ul>
</div>
<div id="tabs-4">
<h3>Heading 3</h3>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>

<div id="tabs-5">
<h4>Heading 4</h4>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>

<div id="tabs-6">
<h2>Heading 2</h2>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>
</div>
</div>

<!--jQuery core library--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<!--jQuery UI--> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
<script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</body>
</html>
Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...