Vue-good-table: Design problem in using 20+ headers in horizontal scroll
Good day,
I tried to use 20+ headers but the table footer isn't responsive.
The search box is stuck at the left side as well.
Is there any fix for this? Thank you
deanilvincent
All 10 comments
I also have a problem related to the responsive.
When I see the table at the mobile phone I can't adjust the width to the mobile phone screen. If you found the solution to make it responsive share it please.
sorribes22
on 22 Jan 2018
@deanilvincent, you need to add Component Option styleClass, with "table-responsive", my example styleClass="mb-3 table table-hover table-responsive table-bordered condensed"
rayets123
on 26 Jan 2018
I don't know why, after I put that code in my styleClass, it's still the same. @rayets123
deanilvincent
on 29 Jan 2018
@deanilvincent because that is a solution only for people using bootstrap. I'll try to put in a fix for this today. In the mean time, you can create your own class emulating what bootstrap does and pass it through :styleclass property:
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_tables.scss
xaksis
on 29 Jan 2018
@xaksis thank you for your quick response. I'll wait for the new version then. :)
deanilvincent
on 29 Jan 2018
Hello,
Unfortunately, we have come across the same issue too. Adding the table-responsive did not help at all.
http://prntscr.com/i7iix2 (Custom css applied for colors, rounded corners but even reverting it - has no affect to footer).
The main reason why we got this issue is that the footer is a different element all together http://prntscr.com/i7ik06
Maybe anyone has an idea how to fix this? :)
ModestasV
on 30 Jan 2018
This should now be fixed in v1.19.2. Problem was introduced when pagination was separated from the main table rendering responsive class ineffective. closing.
xaksis
on 31 Jan 2018
@xaksis Can confirm that this issue was fixed after update for our project :)
Thank you!
ModestasV
on 31 Jan 2018
Hello @xaksis still, my header is the same even I already upgraded the vue-good-table to version 1.19.2
deanilvincent
on 31 Jan 2018
@xaksis I can confirm that the footer is okay now. But the header position with search isn't fixed while scrolling horizontally.
deanilvincent
on 2 Feb 2018
Related issues
tverilytt
路
6Comments
jonathan-wondereur
路
6Comments
LiamMcArthur
路
3Comments
dylanvanes
路
3Comments
hoanghiep1x0
路
5Comments
Most helpful comment
@deanilvincent, you need to add Component Option styleClass, with "table-responsive", my example styleClass="mb-3 table table-hover table-responsive table-bordered condensed"