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

mattscotty opened this Issue May 22, 2014 · 6 comments


None yet
5 participants

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;
example fix


arschmitz commented May 22, 2014

@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 commented May 22, 2014

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.

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 commented May 27, 2014

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


arschmitz commented May 27, 2014

@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

arschmitz reopened this May 27, 2014

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" wrote:

Reopened #7415.

Reply to this email directly or view it on GitHub.

gabrielschulhof added this to the 1.4.3 milestone May 27, 2014

gabrielschulhof self-assigned this May 27, 2014

@gabrielschulhof gabrielschulhof added a commit that referenced this issue Jun 6, 2014

@gabrielschulhof gabrielschulhof Table: Copy entire contents of reflow headers into reflow bold tags
(cherry picked from commit a9472ce)

Closes gh-7437
Fixes gh-7415

@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014

@gabrielschulhof @agcolom gabrielschulhof + agcolom Table: Copy entire contents of reflow headers into reflow bold tags
Closes gh-7437
Fixes gh-7415
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment