CODEWITHSUNDEEP
jquery
Justin Rassier
Justin Rassier

Reputation: 908

jQuery Tab Height with a picture

I am using jQuery UI to get a nice 3 tab layout using their tabs feature. Everything works great if I have a text within each of the < li> elements that describe the tab text. It turns out it would be super handy to have a little icon on one of the tabs. The icon is made to clarify the tab's feature, and it would be only one 1 of the 3 tabs.

within the line item I add the image as follows:

<li>
     <a href="#stats"> <img src="Images/image.gif" style="border-style: none" />Tab Title</a>
</li>

It is a small 16px tall image. The image renders just fine, but it looses the separation between the bottom of the tab and then the top of the content. Without the picture, there is a small separation that is gone as soon as I add the image.

Is there any way to get jQuery to know the size of the largest tab height so that everything matches and I can get that visual separation between all the tabs?

Thanks everyone for the help!

Upvotes: 1

Views: 208

Answers (2)

PeeHaa
PeeHaa

Reputation: 72689

It is possible to loop through each li and get the height of it using

var max_height = 0
$('ul.tabs li').each(function() {
  if ($(this).height() > max_height) max_height = $(this).height();
});

Upvotes: 0

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

Make the image float: left, or position: absolute so it does not affect the layout.

Upvotes: 3

Related Questions