Avoid push columns to the right when column has a long text

AlexanderLamas

Hi everyone!

Does anyone know how to dynamically avoid pushing the columns to the right if one the columns on the left has a very long text?

Is it possible to dynamically show the column text only until the column border?

Perhaps dynamically cut the contents of the column until the border limit and show a tool tip if you hover over the column?

Perhaps dynamically show "..." at the end of column just before it touches the border to show that there is more information in the column?

Any other ideas?

Thank you very much!

Regards,
Alex

colin

You could try using columns.width, or removing nowrap on the column/table, if set.

Colin

AlexanderLamas

Hi @colin,

Thank you very much for your reply.

That is work fine now. So, thank you!

But, there is another problem now.
With that fix, my checkbox is not vertically centralized anymore.
It moved up quite a bit.

This is my checkbox column code
<td class=" select-checkbox"></td>

Do you know how can I keep the checkbox column vertically centralized across browsers?

Thank you!

Regards,
Alex

tangerine

Regarding your original question, have you seen DT's "ellipsis"?
https://datatables.net/manual/data/renderers#Custom-helpers

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

AlexanderLamas

Hi @tangerine ,

Thank you very much for your reply.

Very interesting helper, and, definitely quite helpful.
I tested, and it works like a charm.

My only concern is when you work with different resolutions and the space to show the contents can vary according to each resolution.

Not so simple exercise I believe, but, is it possible to make it dynamic according to the resolution?

Thank you very much!

Regards,
Alex

AlexanderLamas

Hi @colin ,

I have created a test case for your evaluation.

This is the link http://live.datatables.net/segogiyi/1/edit

You just have to drag the screen to the left, or disable the html and css and you will see how it position on the screen.

I have simplified the HTML code and the CSS code just to make it easier to analyse.

Thank you very much!

Regards,
Alex

allan

Add

table.dataTable tbody td.select-checkbox::before {
  top: 50%;
}

to your CSS to make the checkbox vertical align to the middle of the cell.

Allan

AlexanderLamas

Hi @allan ,

Thank you very much for your reply.

After applying your code suggestion, I've noticed that it works well for Google Chrome, Firefox, Microsoft Edge, but not for Internet Explorer.
For IE still keep the checkbox aligned to the top.

Anything we could do about IE?

Thank you very much!

Regards,
Alex

allan

Anything we could do about IE?

Yup - upgrade to a decent browser ;-).

In all seriousness - you could try this, which is another way to achieve the same effect:

table.dataTable tbody td.select-checkbox {
  vertical-align: middle;
}

table.dataTable tbody td.select-checkbox::before {
  position: relative;
  top: auto;
}

http://live.datatables.net/segogiyi/6/edit

Allan

AlexanderLamas

Hi @allan ,

Thanks for your reply and sorry for my very late reply.

But yes, I couldn't agree more with about the IE, but, unfortunately I still to keep supporting it.

We end up making some changes as follow:

    table.dataTable tbody td.select-checkbox:before {
        position: relative;
        top: auto;
        margin-top: auto;
    }

    table.dataTable tbody td.select-checkbox:after {
        top: auto;
    }

    table.dataTable tr.selected td.select-checkbox:after {
        margin-top: -16px;
    }

    @media screen and (-ms-high-contrast: none) {
        table.dataTable tr.selected td.select-checkbox:after {
            position: relative;
        }
    }

    @supports (-ms-ime-align: auto) {
        table.dataTable tr.selected td.select-checkbox:after {
            position: relative;
        }
    }

We also removed the "nowrap" from table and we added this

className: "word-break-all"

When declaring the column.

It worked.

The only issue I have found was that in IE and Edge when you have checked checkboxes the pointer gets weird, in Google Chrome, Firefox and Safari stays the normal pointer.
Also, again on IE and Edge, the header checkbox checked symbol gets shifted to the right slightly.

We also tested that in different resolutions, and I think it is working alright.

Let me know if you have anything to add to this.

Thank you very much!

Regards,
Alex

colin

Please could you update Allan's test case to demonstrate those issues.

Colin

AlexanderLamas

Hi @colin ,

Sorry for the very late reply.

We end up managing the code to centralize the checkbox as follow.

table.dataTable {
    line-height: normal;
}

    table.dataTable tbody td {
        vertical-align: middle;
    }

    table.dataTable thead th {
        vertical-align: middle;
    }

th.dt-center, td.dt-center {
    text-align: center;
}

table.dataTable thead th.select-checkbox {
    position: relative;
}

    table.dataTable thead th.select-checkbox:before,
    table.dataTable thead th.select-checkbox:after {
        display: block;
        position: absolute;
        top: 1.2em;
        left: 50%;
        width: 12px;
        height: 12px;
        box-sizing: border-box;
    }

    table.dataTable thead th.select-checkbox:before {
        content: ' ';
        margin-top: -8px;
        margin-left: -6px;
        border: 1px solid black;
        border-radius: 3px;
    }

table.dataTable tbody td.select-checkbox:before {
    position: relative;
    top: auto;
    margin-top: auto;
}

table.dataTable tbody td.select-checkbox:after {
    top: auto;
}

table.dataTable tr.selected td.select-checkbox:after {
    margin-top: -16px;
}

table.dataTable tbody td.select-action {
    white-space: nowrap;
    text-align:center;
}

@media screen and (-ms-high-contrast: none) {
    table.dataTable tr.selected td.select-checkbox:after {
        position: relative;
    }
}

@supports (-ms-ime-align: auto) {
    table.dataTable tr.selected td.select-checkbox:after {
        position: relative;
    }
}

table.dataTable .word-break-all {
    word-break: break-all;
}

I hope it can help someone.

Cheers,
Alex