Table Reflow Column headers' text includes any elements such as button text

[mattscotty]

In some cases its useful to have a button within a table header group to add new items to the table for example.
However when the table is 'reflowed' it includes any text from these elements' text (such as the text in a button) in the table group header.

See Example Fix;

[arschmitz]

@mattscotty thanks for reporting this. This however seems like an odd change to me. This does not seem like it would make sense in a reflow table the buttons will be hidden when the table switches to reflow mode.

@uGoMobi @gabrielschulhof thoughts on this?

[jaspermdegroot]

I think a table should only contain data, no controls. So I don't think we should make changes that encourage people to use interactive elements (other than links) inside a table. And I agree with @arschmitz that it's not a good idea to have a button in the table head, because it won't be visible on small screens.

Closing this issue because this is not something we want to change.

[mattscotty]

Jasper, thanks for looking in to this.
To put it into context, we have a setup part of our website.
When in mobile mode this is automatically hidden, but the main tables are still available for reference (I.e. You can view the table information but not add to or edit it. The button in this case, adds to the table).
However, because they are hidden (via css) but still in the dom, the jquery text function still considers it when evaluating the element and it's children.

I believe this is a legitimate issue with minor work / performance implications to implement, however I respect your decision and thank you for your time.

Regards, Matt.

[scottgonzalez]

There are plenty of scenarios where controls are placed inside table cells, even inside headers. Editable grids, adding columns, sorting, etc.

[arschmitz]

@uGoMobi @mattscotty im going to reopen this because it is valid to have other elements in a table and we should not limit to just text.

What we should be doing here is using .html() rather then just .text() and copying everything in the cell.

@mattscotty this would also solve your use case as you could conditionally hide the button with css

[mattscotty]

Alexander, thanks for following up on this, that's exactly how we've implemented it.
Much appreciated, Matt.

Sent from my iPhone

On 27 May 2014, at 16:57, "Alexander Schmitz" notifications@github.com wrote:

Reopened #7415.

—
Reply to this email directly or view it on GitHub.