React-table: Tall pagination section

[byumark]

For some reason the pagination section at the bottom of the table is really tall. I'm probably doing something wrong.

This element has a style height of 100% but I can't figure out what's causing it to be so tall

<button type="button" disabled="" class="-btn" data-reactid="228">Previous</button>

When I use it as a component in StoryBook it looks fine. Is some other css I have messing with it?

[tannerlinsley]

You are likely putting a height on the table element which is forcing it to stretch since its built with flex box. Remove any height related styles from the table and it should function properly.

[helsont]

I'm experiencing the same issue and I'm not tampering with any of the React Table css

[tannerlinsley]

Is container-fluid a flex element? If this is still happening for whatever reason, you can put a flex-grow: 10000 or some other very high number on the rt-table element.

[helsont]

Here's container-fluid. Nothing too crazy going on and no flex either.

I tried your suggestion and it didn't work - nothing changed. Also, I tried making container-fluid a flex element with flex-direction: column and it didn't help either.

What should I look out for in my CSS?

[helsont]

I found the "issue".

I removed the height:100% from the pagination button class and it worked perfectly. Is it something I should override in my CSS?

[byumark]

@helsont that did it for me as well.

[tannerlinsley]

Does that change affect any of the examples? If not, please submit a PR :)

[tannerlinsley]

Fixed now.

[squanchd]

Still seeing this.

[tessakindel]

Still had this issue. The auto button height fix from @helsont worked:

.ReactTable .-pagination .-btn {
    height: auto;
}

[nathan-gilbert]

Thank you @alexkindel, I ran into this issue tonight and your solution worked best for me.

[SrikanthRayaprolu]

I found the issue,but not am not able to override the value. The default value 100% shows when I run it how can I do this to override it to this
.ReactTable .-pagination .-btn {
height: auto;
} I have this in my CSS and I imported this CSS into my class