CODEWITHSUNDEEP
csshtml-tablescrollbaroverflow
Matte Crystal
Matte Crystal

Reputation: 87

overflow-x:hidden; won't work but overflow-x:scroll; will?

I have a table that contains various information. I'm trying to make it so that when it's content overflows it will provide a horizontal scrollbar to see the content.

overflow-x:scroll; is pretty much exactly what i want except i don't want to show the scrollbar when there is no content to overflow. So overflow-x:hidden; should be what i need. However, when i use that no scrollbar appears even if the content does overflow.

I've used overflow-x:hidden; before so I'm not really sure whats wrong.

An example can be seen via codepen

The css in question is located under .dataTables_wrapper{} on line 19

/* -----------NEED HELP HERE-----------       Cant get overflow-x: hidden to work */
.dataTables_wrapper{
  overflow-x: hidden; /*This wont work, acts like overflow hidden*/
  overflow-x: scroll; /*This works and is the desired effect but i dont want the scrollbar to show if no overflow*/
  background: #1B1E24;
}

Upvotes: 0

Views: 997

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Setting overflow:auto will fix your issue this will add scroller on when the width exceeds

.dataTables_wrapper{
  overflow:auto; /* set overflow auto */
  background: #1B1E24;
}

Upvotes: 1

Related Questions