Is there a possibility to limit the width of a column an fill out the text? I have one column which is a text column. People tend to fill that column with (too long) stories. Those stories are displayed on one rule. So I get a veeeerrry wide column. Thanks in advance for your answer
you can put a CSS class on the column and then define the width. To cut off the text, you can also set the style "text-overflow=ellipsis" in this CSS class.
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
And we wish to thank Jens for helping out a fellow user, that is very kind of you, as always. :)
We will do our best to advise you on this use-case. It depends on several table display settings/how you configured them, as to what the best solution will be, such as if you enabled or disabled the word wrap; If you set the table to be "Limited to Page width" or not, and so on.
First we will share the built in/easiest way how you can set the custom column width, and then later we will share another, custom way if you need to have the horizontal scroll.
You can make custom widths for columns in two ways.
This will allow you to set a custom width on any column.
Enter the column settings / Column width > and set a number for pixels, or a percentage value.
Here is an example on my table > i shorten the width for this column :
Now, if somebody writes a very long text in a String cell, and if you keep the 'word wrap' disabled, it will just cut off the rest of the text and leave three dots like "some long text...". So in that case, there won't be need for any custom CSS. Let us know if that works for you.
2. Alternatively, you can also add custom CSS classes to multiple columns,
then you can manipulate this class through our plugins settings/Custom JS and CSS/Custom CSS, ( if you wish to set same style for all tables that have this class);
and also, each table has its own Customize/Custom CSS,
for example, if i add custom Class named "customWidth", i can call CSS like :
.customWidth {
width : 200px !important;
}
Let us know if you have further questions about that.
Hi,
Is there a possibility to limit the width of a column an fill out the text? I have one column which is a text column. People tend to fill that column with (too long) stories. Those stories are displayed on one rule. So I get a veeeerrry wide column. Thanks in advance for your answer
Hi,
you can put a CSS class on the column and then define the width.
To cut off the text, you can also set the style "text-overflow=ellipsis" in this CSS class.
Kind regards
Jens
Hi, and so I did. But how can I call the class I made? It won't work as is.
I'll send you a picture
Thanks.
Attached files: def of a class.png
You can only store the CCS class there.
Step 1:
After that you mast define the class.
Step 2:
Go to "wpDataTables" > "Settings" > "Custom JS and CSS" and add in the box "custom wpDataTables-CSS" your CSS-Class.
Excample :
.yourStyleName
{
width: 100px;
}
I hope the menu items are called something like what I named them in English.
Kind regards
Jens
I did define the class in the menu "Aanpassen"
After that I called the new class
But nothing happens. The column width stays flexible and gets bigger and bigger with more text in it.
Please help me out.
Hi M. de Leeuw,
Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.
And we wish to thank Jens for helping out a fellow user, that is very kind of you, as always. :)
We will do our best to advise you on this use-case.
It depends on several table display settings/how you configured them, as to what the best solution will be, such as if you enabled or disabled the word wrap;
If you set the table to be "Limited to Page width" or not, and so on.
First we will share the built in/easiest way how you can set the custom column width, and then later we will share another, custom way if you need to have the horizontal scroll.
You can make custom widths for columns in two ways.
This will allow you to set a custom width on any column.
Enter the column settings / Column width > and set a number for pixels, or a percentage value.
Here is an example on my table > i shorten the width for this column :
Now, if somebody writes a very long text in a String cell, and if you keep the 'word wrap' disabled, it will just cut off the rest of the text and leave three dots like "some long text...".
So in that case, there won't be need for any custom CSS.
Let us know if that works for you.
2. Alternatively, you can also add custom CSS classes to multiple columns,
then you can manipulate this class through our plugins settings/Custom JS and CSS/Custom CSS, ( if you wish to set same style for all tables that have this class);
and also, each table has its own Customize/Custom CSS,
for example, if i add custom Class named "customWidth", i can call CSS like :
.customWidth { width : 200px !important; }Let us know if you have further questions about that.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables