Remove Nested Scrollbar from [pdb_list] Output Table Cells

There is no single way to deal with a situation like this, it’s a matter of deciding how you want to display large blocks of text inside a table. If you simply eliminate the scroll container, it will blow up your table. You can see what that looks like this this: (put it into the “Custom CSS: setting in the plugin settings)

.pdb-list span.textarea {
  display: inline;
}

It’s better to tweak the settings for the scroll container to get more of the text to show, but not so much that the table get too distorted. This is the rule that sets up the scroll container, use your browser dev tools to play with the values until it looks the way you want:

.pdb-list span.textarea {
  display: block;
  max-height: 5em;
  max-width: 150px;
  overflow: auto;
}

It’s the “overflow” attribute that causes the scrollbars to appear.

You may find that a table is not the best way to show your data, try using the “responsive” template, you may find it’s better at handling large blocks of text.

[pdb_list template=responsvie]

• This reply was modified 7 years, 9 months ago by xnau webdesign.

Thank you for your prompt response.

It took me a while to get the [pdb_list template=responsive] shortcode to work, until I realized “responsive” was spelled wrong in your original post (something to edit in case other readers rely on your post). ??

I took your suggestion and am using a variant of the CSS code below. This offers a good compromise. The text now spans the width of the column, which makes the responses more reader friendly and eliminates most of the scroll bars.

.pdb-list span.textarea {
  display: block;
  max-height: 5em;
  max-width: 150px;
  overflow: auto;
}

Thank you!
Michael

Yes, you’re right…spelling error on the template name, which I can’t fix now…should be:

[pdb_list template=responsive]