Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Jquery tabbed panel header adjustment

Explorer ,
Feb 06, 2020 Feb 06, 2020

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
691
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2020 Feb 06, 2020

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— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 20, 2020 Feb 20, 2020

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 20, 2020 Feb 20, 2020

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?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 20, 2020 Feb 20, 2020
LATEST

 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— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines