[Table] thead border-bottom width doesn't resize when resize window #3687

xdvarpunen · 2016-03-14T08:34:34Z

Hello,

I noticed the border-bottom width does not resize when resizing window. To repeat this create simple table and then open browser window as default with small size and put it to fullscreen.

-XDVarpunen

EloB · 2016-03-15T13:26:02Z

It's also on your docs page.

kinglion · 2016-03-18T08:21:44Z

<TableHeader style={{borderBottom : 'none'}}>
<TableRow style={{borderBottom : 'none'}}>

can solve it but no good

ledsun · 2016-07-14T10:53:01Z

I found minimum reproduce code.

code

<!DOCTYPE html>

<body>
    Resize the window and this document wraped and height of this document is changed. So, the table will move but the bottom boder of the table will not move.
    <div style="transform: translate3d(0px, 0px, 0px);">
    </div>
    <table style="border-collapse: collapse;">
        <thead style="border-bottom-width: 1px; border-bottom-style: solid;">
            <tr>
                <th style="position: relative;">
                    header
                </th>
            </tr>
        </thead>
    </table>
</body>

browsers

This is reproduced on the Chrome 51.0.2704.103.

This is not reproduced on the Firefox 46.0.

styles

transform: translate3d(0px, 0px, 0px);

is used in a button tag on Table - Material-UI

position: relative;

is set in material-ui/TableHeaderColumn.js at master · callemall/material-ui

Question

Is position: relative; necessary?

ledsun · 2016-07-19T12:03:37Z

There is a limited workaround.

Set TableHeaderColumn style {{position: "static"}}
Hide all checkboxes

For example:

const TableExampleSimple = () => (
  <Table>
    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      <TableRow>
        <TableHeaderColumn style={{
          position: "static"
        }}>ID</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={false}>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
)

Demo

Source codes for demo

<body>
  <h1>Sapmle for [#3687](https://github.com/callemall/material-ui/issues/3687)</h1>
    Resize the window and this document wraped and height of this document is changed. So, the table will move but the bottom boder of the table will not move.


    <div style="transform: translate3d(0px, 0px, 0px);">
    </div>
    <div id="container">
    </div>

    <script src="bundle.js" charset="utf-8"></script>
</body>

const React = require('react');
const ReactDOM = require('react-dom');
const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHeaderColumn,
  TableRowColumn
} = require('material-ui');

const FixedTableExample = () => (
  <Table>
    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      <TableRow>
        <TableHeaderColumn style={{
          position: "static"
        }}>ID</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={false}>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
)

const BrokenTableExample = () => (
  <Table>
    <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
      <TableRow>
        <TableHeaderColumn style={{
          position: "relative"
        }}>ID</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody displayRowCheckbox={false}>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>
)

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <div>
      <h2>FixedTableExample</h2>
      <FixedTableExample/>
      <h2>BrokenTableExample</h2>
      <BrokenTableExample/>
    </div>
  </MuiThemeProvider>
)

ReactDOM.render(
  <App/>, document.querySelector('#container'))

The limitation

If you show checkboxes, their th element has a style of position: relative.
This issue is reproduced on the column for checkboxes.

oliviertassinari · 2017-07-28T12:01:37Z

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

The-Code-Monkey · 2017-09-29T12:19:51Z

@oliviertassinari This is still broken on V1 branch as of today as I have a Table > TableBody > TableRow > TableCell and in table cell input but I resize the page and it doesnt wrap them or anything. Why does it do this I can provide code if need be.

Is there any way of fixing this as the ways above no longer work in V1

nathanmarks added the bug 🐛 Something doesn't work label Mar 15, 2016

ledsun mentioned this issue Jul 6, 2016

[Table] horizontal line in the header table component doesn't behave correctly #3957

Closed

hugocaillard mentioned this issue Jul 15, 2016

[Table] Body, Header and Footer rendered in separate tables #4366

Closed

oliviertassinari added the component: table This is the name of the generic UI component, not the React module! label Dec 18, 2016

oliviertassinari closed this as completed Jul 28, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Table] thead border-bottom width doesn't resize when resize window #3687

[Table] thead border-bottom width doesn't resize when resize window #3687

xdvarpunen commented Mar 14, 2016

EloB commented Mar 15, 2016

kinglion commented Mar 18, 2016

ledsun commented Jul 14, 2016

ledsun commented Jul 19, 2016

oliviertassinari commented Jul 28, 2017

The-Code-Monkey commented Sep 29, 2017 •

edited

Loading

[Table] thead border-bottom width doesn't resize when resize window #3687

[Table] thead border-bottom width doesn't resize when resize window #3687

Comments

xdvarpunen commented Mar 14, 2016

EloB commented Mar 15, 2016

kinglion commented Mar 18, 2016

ledsun commented Jul 14, 2016

code

browsers

styles

Question

ledsun commented Jul 19, 2016

Demo

The limitation

oliviertassinari commented Jul 28, 2017

The-Code-Monkey commented Sep 29, 2017 • edited Loading

The-Code-Monkey commented Sep 29, 2017 •

edited

Loading