React responsive carousel height not adjusting properly

Question

I am using react responsive carousel and it's rendering weird

render() {
    return (
      <div className="slider-container">
        <Carousel className="carousel-style" showArrows={true} showThumbs={false} showStatus={false}>
          {this.generateCards()}
          <div className="slider-item-div">
            Test
          </div>
        </Carousel>
      </div>
    );
  }

Here's the CSS

.slider-container {
    width: 100%;
    height: 100%;
}

.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}

.carousel-style {
    height: 100% !important;
}

and unfortunately this is what it renders as

I would like to have the height == 100% and fill the screen. Also I'd like the right and left arrows to be show without hovering over them like here: http://react-responsive-carousel.js.org/#demos

Answer 1

Make changes in CSS and fixed position of the slider container

.slider-container {
    width: 100%;
    height: 100%;
    position:fixed; /* add this code for position fixed */
    top:0px; /* set top and left 0 */
    left:0px;
}
.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}
.carousel-style {
    height: 100% !important;
}

Answer 2

this might actually be a bug, because when I change the height pixel wise, it does adjust but if I do percentage for it to match parent it doesn't do anything

Answer 3

If you're wanting this carousel to fill the screen, then the following CSS adjustments should achieve that:

.slider-container {
width: 100%;
height: 100%;

/* Add this */
position:fixed;
top:0;
left:0;

}

Answer 4

If you're not against the idea of overriding the default CSS styling, then you could create a CSS file with the following:

.carousel .thumb img {
    width: 100% !important;
    height: 100% !important;
}

.carousel .slide img {
    max-height: 300px;  /* change this to whatever you want */
    width: auto;
}

and then in your code (assuming ES6 syntax) you would simply override the defaults by importing the CSS file you created. For example:

import React, { Component } from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import './style/overrides.css';  // change this to the file path of your overrides