Why is div clipped off jcarousel? unknown issue challenge

Question

Development test site

https://ntsu.unioncloudsandpit.org/

Can anyone help solve why the jcarousel contained newsblock is clipped off.

FYI newsBlock are just empty divs populated via javascript

I have tried filling newsBlocks with lots of content, but the cutoff remains

i've tried

adjusting the z-index -1 -999
overflow:auto;
height:X px;

I can adjust the carousel size, but cannot for the life of me stop newsBlocks from being cut off?

newsBlock css is simply

.newsBlock {
height:500px;
background:white;}

Any advice?

Answer 1

The height of the <ul> that contains the carousel items is set to height: 90px;. This needs to be changed if it's set via a config or you need to change the height prop via CSS.

.stripe-carousel ul, 
.grid-carousel ul {
  height: auto;
}

Answer 2

It looks like the height of the carousel is currently 90px, which is being set here:

.stripe-carousel ul,.grid-carousel ul {
    margin: 0;
    padding: 0;
    height: 90px
}

That's found in the minified/combined "application_student_view-800c0baf1f440dfdc34b6b467c315e46574331c5f3987c31f22978b55353aec9.css" file.

If you remove the "stripe-carousel" class from the div with the id "news-stripe" (or change the height value defined above) the carousel displays at full size.