Remove From My Forums

Column alignment is going wrong when I add different comment column with different size, Please help

Question

User-1355965324 posted

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>

Sunday, March 24, 2019 2:16 PM

Answers

0

Sign in to vote
User839733648 posted

Hi polachan,

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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, March 25, 2019 9:47 AM

All replies

0

Sign in to vote

User-943250815 posted

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

Sunday, March 24, 2019 2:29 PM
0

Sign in to vote

User-1355965324 posted

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

Sunday, March 24, 2019 4:42 PM
0

Sign in to vote
User-943250815 posted

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>
Sunday, March 24, 2019 5:06 PM
0

Sign in to vote

User-1355965324 posted

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.

Sunday, March 24, 2019 5:42 PM
0

Sign in to vote

User-943250815 posted

I think you can define an class to be applied just on group cells.
Check on Datables examples page

Sunday, March 24, 2019 5:55 PM
0

Sign in to vote
User839733648 posted

Hi polachan,

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
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, March 25, 2019 9:47 AM
0

Sign in to vote

User-1355965324 posted

Sorry Jeni I sorted that problem, by aligning the column to the centre already. Thanks anyway

Pol

Monday, March 25, 2019 10:39 AM
0

Sign in to vote

User-943250815 posted

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

Monday, March 25, 2019 11:53 AM

Answered by:

Column alignment is going wrong when I add different comment column with different size, Please help

Question

Answers

polachan

All replies

polachan