Hi All,
I have more columns in the table, to avoid scrolling client requested to allow text wrapping for columns with bigger text.
I am doing it by removing white-space: nowrap; css of the table, but then other table columns are also getting affected like some are moving up, some down.
Can someone please suggest any solution for this.
Thanks
Shivangi
Hi @Shivangi Thakur,
Instead of removing white-space: nowrap; globally for the entire table, apply CSS to specific columns that need text wrapping.
Assign a Class to the Specific Column:
CSS -
/* Allow text wrapping only for specific columns */
.table .wrap-text-column {
white-space: normal; /* Allow text to wrap */
word-wrap: break-word; /* Break long words */
}
/* Prevent other columns from wrapping */
.table td {
white-space: nowrap; /* Retain nowrap for all other columns */
Thanks,
Vipin Yadav
Hi,
This is not working, can you provide oml ?
@Shivangi Thakur, Could you please share your OML file with me? I'll make the necessary changes.
Hi @Shivangi Thakur
Did you try this css. It works for me.
word-break: break-all;
Please provide oml if it works for you. Also I do not need sorting to display below text.
Please find below attached OML i did some changes as per your requirement please refer it.
Regards,
Rajat
I do not need sorting icon to come down,
I tried fixing it but then other will be impacted if i apply width and it will be inline css which i do not want to use.
hi @Shivangi Thakur for this You can remove the Sorting Attribute
its needed,
Hi Rajat,
Oml is still old one only.
ok I will check and update on that.
please find below attachment.
I have attached the oml below for ease, the point is the columns with large text needs to be wrap in 2 lines instead of 3 and sorting icon should be beside the text not below it.
Please check OML I updated you code now icon come in a one line.
Hi @Shivangi Thakur please try this CSS.
.table-header th { white-space: normal;}
it works for me .
regards
Ram baghel
Can you try:
overflow:hidden;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;Best regard!