Menu icon Foundation
Equalizer working only on nested Divs

Hello Experts,
My page consists of a blog type structure, with a main content and a sidebar. I have set the panel-heights of both these under the Equalizer.js. In addition to these I also have some nested Divs within the main content. These are also set with an Equalizer.js and they are working quite correctly. However, the equalizer does not work on the main content and the sidebar.
Is there someone willing to help me with this problem?

Here is an example: http://www.caydees.com/1_sampler/jQtabs/tabs2.html
(please ignore the footer!)

Thank you in advance,

Bit

Equalizerjavascript

Hello Experts,
My page consists of a blog type structure, with a main content and a sidebar. I have set the panel-heights of both these under the Equalizer.js. In addition to these I also have some nested Divs within the main content. These are also set with an Equalizer.js and they are working quite correctly. However, the equalizer does not work on the main content and the sidebar.
Is there someone willing to help me with this problem?

Here is an example: http://www.caydees.com/1_sampler/jQtabs/tabs2.html
(please ignore the footer!)

Thank you in advance,

Bit

Rafi Benkual almost 5 years ago

Glad you like the footer ;) http://patterntap.com/code/footer

Equalizer is working. You can see the columns are equal height in the inspector.
https://www.diigo.com/item/image/513go/s3xd

You will want to make the tabs fill the column height 100%

.ui-tabs {
  height: 100%;
}

Bit Byte almost 5 years ago

Hello Rafi,

Many thanks for having a look..

I entered the .ui-tabs height to the existing .ui-tabs in jquery.ui.tabs.min.css.

Yes, the columns are theoretically of the same height, but I would like these to be visually also the same, i.e. I would like the bottom outlines of both the sidebar and the main-content to line up. I suppose I would have to apply the "data-equalizer-watch" to some other element. I tried on some other variations, but visually it remains the same. [sigh!]

One other thing I noticed is that when I refresh the page it reverts to the first Tabs on both sides. Is there a way to keep the open tabs as they are when refreshing? And is there a way to place a set of tabs or links at the bottom of the content so that you don't have to scroll to the top to change the tab?

Thank you so much for the wonderful "footer"; it works so beautifully and with so little code!