When I add different length of comment in an html data table, all column column alignment is going wrong
Please can you check my example link and please help . But when I run js fidle is coming fine but when I run the html file in Vs Code the column alignment is going wrong
Please help my code is given below
How column alingment is going wrong?
Since they are not set, "th" is centered and "td" is left
Page generated by VS should be exactly same as your posted code, you can just save this code to an .htm file and load on browser.
Try check on browser using F12, to see if you have same code
Sorry I have posted with some missing code earlier, Now I have edited the code with all the lines . Earlier I had missed some lines to copy. Sorry for that . There was grouping of rows and below details line . After giving long comment , all column positioning
going wrong . The comment line not being properly wrapped up to the next line to suit the column width. I want to give comment line to be showed as wrapping up to the next line if the comment is long
Please can you check Would you mind me asking the help , with suggested code
The only problem I see, independent of Comment size is padding style applied on first column which drive you think it is right aligned, try remove such style to see
I cannot remove that line. Because the group header should be shown on the left side . So that code only brings the group header to the left and it will not make any change other column. Also I tried by removing the padding-left: 4em. Still no change.
I've tried your code on my side but it seems working well.
polachan
When I add different length of comment in an html data table, all column column alignment is going wrong
I could not see the wrong column alignment.
Here is my running result.
If possible, please provide more detailed information like your screenshot so that it will be easier to help with you.
Best Regards,
Jenifer
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
285 Points
996 Posts
Column alignment is going wrong when I add different comment column with different size, Please h...
Mar 24, 2019 02:16 PM|polachan|LINK
When I add different length of comment in an html data table, all column column alignment is going wrong
Please can you check my example link and please help . But when I run js fidle is coming fine but when I run the html file in Vs Code the column alignment is going wrong
Please help my code is given below
<html> <head> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css"> <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css" type="text/css"> <style> tr.odd td:first-child, tr.even td:first-child { padding-left: 4em; } </style> </head> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> <th>Comment</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> <td>sdkjfhsdh s dofhsdfh sdiufuisfi iufhi s uifi s iuf sdif</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> <td>idyiadssad asudi idyui yuasd as iudfyasui sdsshadasidhi asiudhisadh asiudh</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> <td>asjkdskahhafhd sdiyfuidsfudsy sdfi ufsdyuifysiduy fuify usdify dsifu ydsiufyisd ndu fysdyfdi </td> </tr> </tbody> </table> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script> <script> $(document).ready(function() { $('#example').DataTable({ order: [ [2, 'asc'], [1, 'asc'] ], rowGroup: { dataSrc: [2, 1] }, columnDefs: [{ targets: [1, 2], visible: false }] }); }); </script> </body> </html>Member
749 Points
527 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 24, 2019 02:29 PM|jzero|LINK
How column alingment is going wrong?
Since they are not set, "th" is centered and "td" is left
Page generated by VS should be exactly same as your posted code, you can just save this code to an .htm file and load on browser.
Try check on browser using F12, to see if you have same code
Member
285 Points
996 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 24, 2019 04:42 PM|polachan|LINK
jZero
Sorry I have posted with some missing code earlier, Now I have edited the code with all the lines . Earlier I had missed some lines to copy. Sorry for that . There was grouping of rows and below details line . After giving long comment , all column positioning going wrong . The comment line not being properly wrapped up to the next line to suit the column width. I want to give comment line to be showed as wrapping up to the next line if the comment is long
Please can you check Would you mind me asking the help , with suggested code
Regards
Pol
Member
749 Points
527 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 24, 2019 05:06 PM|jzero|LINK
The only problem I see, independent of Comment size is padding style applied on first column which drive you think it is right aligned, try remove such style to see
<style> tr.odd td:first-child, tr.even td:first-child { padding-left: 4em; } </style>Member
285 Points
996 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 24, 2019 05:42 PM|polachan|LINK
jzero
I cannot remove that line. Because the group header should be shown on the left side . So that code only brings the group header to the left and it will not make any change other column. Also I tried by removing the padding-left: 4em. Still no change.
Member
749 Points
527 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 24, 2019 05:55 PM|jzero|LINK
I think you can define an class to be applied just on group cells.
Check on Datables examples page
Contributor
2100 Points
705 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 25, 2019 09:47 AM|Jenifer Jiang|LINK
Hi polachan,
I've tried your code on my side but it seems working well.
I could not see the wrong column alignment.
Here is my running result.
If possible, please provide more detailed information like your screenshot so that it will be easier to help with you.
Best Regards,
Jenifer
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
285 Points
996 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 25, 2019 10:39 AM|polachan|LINK
Sorry Jeni I sorted that problem, by aligning the column to the centre already. Thanks anyway
Pol
Member
749 Points
527 Posts
Re: Column alignment is going wrong when I add different comment column with different size, Plea...
Mar 25, 2019 11:53 AM|jzero|LINK
Checked Datatables for setting class on group or cells, but looks it is not available with RowGroup plugin.
Suggest check or post in Datatables forum