I am trying to build a responsive jQuery Cycle implementation. I have built the layout so that it resembles a 2 row, 2 column table. The 1st column is 25% width with height: auto
. The 2nd row essentially has a fixed height.
Both cells in the 2nd column cycle independently, but appear to cycle as one element (I don't think this is relevant, but I want to be thorough)
The issue I'm having is that jQuery Cycle adds position:absolute
(I understand why) to the cycled elements; however, I can't figure out why the height of the top right column (1st row, 2nd column) is the way it is.
If I force position with position:relative !important'
I get the necessary height but there is clearly an issue with the cycle.
I have tried cssBefore
, cssAfter
and every combination of styles I can think of, to no avail. If you look at the codepen referenced below, un-commenting the position:relative !important
will display the closest I have come.
I am using jQuery Cycle v 3.0.2.
You can see the example at http://codepen.io/chrisrockwell/pen/uafeD. If you search (CTRL+F on windows) for UNCOMMENT THE BELOW LINE you will see what to uncomment to force the position, and how the display runs.
Also note that I have disabled autorun on the codepen, so you need to click RUN above the JavaScript window to re-initialize the cycle.
Thanks for any help!