The formatting of column widths in HTML tables can be difficult because the table will always try to show all the content and fill the horizontal width available to it. You can’t necessarily just set the widths of columns to whatever you want.
The text area and rich text fields are wrapped in an extra div tag that allows the content in those fields to overflow and let those columns find their own width. The width of the wrappers can be set with CSS.
The solution really depends on what you want it to end up looking like. Most of the time, you just need to show fewer columns, that will give you more flexibility in formatting the column widths. More complex layouts are possible by using a custom template.
Your second point…what is happening is that sharing plugin is adding it’s buttons to content using the “the_content” filter. The content of rich text fields is passed through that filter, so the sharing plugin is adding it’s content to the rich text field content.
You can prevent this by unchecking the “Use WordPress Auto Formatting” setting under the advanced tab, but that will probably affect the layout of your rich text fields because you lose the auto paragraphs.
Another way to deal with this is to use a CSS rule that hides the sharing buttons when they are in a Participants Database rich text field.
Hi, thanks for this extensive reaction.
Most of the time, you just need to show fewer columns
The problem is that even when I have only 1 column over the full width of the site, the column with the rich text field is always the same width (I just did on the url I mentioned before). It would already help if the width would be flexible, depending on the total width of the page, table and number of columns, but now it’s not.
I’ll try to find the wrappers to set them in CSS, but could you please have another look at the result of the search?
I used the CSS-settings to suppress the sharing buttons in the rich text fields, that works all right, thanks!
OK, then you just need to adjust the max-width of the span with something like this:
.pdb-list span.textarea {
max-width: 300px;
}
put that into the custom CSS setting and it will override the default. You can also target specific columns by using the field name class in the TD
That works great, thanks!
Sorry to comment on a resolved thread, but is there any way to change the width of the help text column for a single row?
So far I’ve got
.pdb-signup span.helptext {
width: 600px;
}
But that affects the whole column and I just want to make the help text column wider for one row. Is this possible? Thanks.
