Try this:
.tabs-shortcode .ui-tabs-panel {
max-height: 140px; /* Adjust */
overflow-x: hidden;
overflow-y: scroll;
}
Thread Starter
ibogo
(@ibogo)
Oops there is an issue.
It is not responsive on mobile.
It cuts off at bottom without a scroll.
You’ll need to add some @media such as:
@media screen
and (min-device-width: 320px)
and (max-device-height: 640px) {
.tabs-shortcode .ui-tabs-panel {
max-height: 80px; /* Adjust */
overflow-x: hidden;
overflow-y: scroll;
}
}
Thread Starter
ibogo
(@ibogo)
The above code is not working.
@media screen
and (min-device-width: 320px)
and (max-device-width: 640px) {
.tabs-shortcode .ui-tabs-panel {
max-height: 80px; /* Adjust */
overflow-x: hidden;
overflow-y: scroll;
}
}
Sorry, been experimenting with some new code. try above.
Thread Starter
ibogo
(@ibogo)
Still not showing scrollbar, but read below.
Scrollbar is only important on desktop.
We need to make this desktop only:
.tabs-shortcode .ui-tabs-panel {
max-height: 280px; /* Adjust */
overflow-x: hidden;
overflow-y: scroll;
}
Good lateral thinking!
@media all and (min-width:980px) {
.tabs-shortcode .ui-tabs-panel {
max-height: 280px; /* Adjust */
overflow-x: hidden;
overflow-y: scroll;
} }
Hi Everyone,
I’m new here! 🙂
I’ve been trying to figure out how to put a scrollbar into a tab so that the text won’t cover the complete page. Thankfully I found this post, but as I have absolutely not a lot of basic knowledge ”yet” about css etc. I can not figure out by myself where I copy and paste the code as written above.
I hope someone can bring up a little bit of patience to perhaps explain this to me in a short but powerful step by step so that I can put it onto my page and learn 🙂
Thank you in advance!
I’m just working on the layout of my pages so I haven’t copied any of the text on my pages yet.. if interested in having a look it’s http://vestapac.com/our-products/
