-1

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!

Chris Rockwell
  • 1,688
  • 2
  • 21
  • 36
  • I can't really see what the issue is here. It's not hard to make Cycle responsive. Could you say more simply what you are trying to do here? – ralph.m Aug 17 '13 at 05:26
  • @ralph.m sorry about not being clear. I updated the pen as I didn't realize last night that it wasn't being responsive (I am porting this over from my dev). Essentially, I need row 2 column 2 to always be the height of row 2 column 1, but I need row 1 height to be dictated by column 2 - does that make sense? – Chris Rockwell Aug 17 '13 at 17:24

1 Answers1

0

Hmm..made some changes to your code. See if this is what you needed: http://codepen.io/adityadineshsaxena/pen/hvmro

CSS Changes:

.left-top{
  height: 365px !important;
}

.carousel-body {
    color: cyan;
    p {
      padding-top: 0;
      margin-top:5px;
      margin-bottom:5px;
    }
  }
AdityaSaxena
  • 2,147
  • 11
  • 16
  • Ok, I see what you've done here. I realize now that the height of row 1 column 2 is being set by row 1 column 1 because of the `position: absolute`. I may need to use percentage padding to make sure, at the widest, `.left-top` is tall enough to force the rows height at least as tall as the image. I can't explicitly set the height of row 1 column 1 because, when the screen is narrow, I don't want it to be any taller than the adjacent cell (which contains the image). Sorry if I'm not making sense, trying to explain as best as possible. – Chris Rockwell Aug 17 '13 at 17:28
  • This did open my eyes to why the image cell was not tall enough. I'm going to think about other solutions, but in the end I may need to use JavaScript or padding to make row 1 column 1 tall enough. I'll likely accept this answer as it pointed me in the right direction. – Chris Rockwell Aug 17 '13 at 17:31