minHeight on table header causes layout faults if there is a scrollbar

**enw** · 23 Oct 2012 2:30 AM

To reproduce, run this:

Code:

Ext.onReady (function () {
    Ext.widget ('grid',
                { store: { type: 'array',
                           fields: ['text'],
                           data: [['xxx'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['xxx']] },
                  columns: { minHeight: 50,
                             items: [{ text: 'lalala', dataIndex: 'text' }] },
                  height: 200,
                  renderTo: document.body });
});

Note that the layout error only appears if there is a scrollbar in the grid view, or so it seems. If you delete a couple of data rows, so that all the remaining fit in the view, layout works without problems.

Also 'height' instead of 'minHeight' is a possible workaround, but it certainly doesn't have the same semantics and I need *minimum* height (it depends on size of another component).

**mitchellsimoens** · 23 Oct 2012 5:22 AM

The header container is 50px for me on Chrome 22

Screen Shot 2012-10-23 at 8.22.22 AM.png

**enw** · 23 Oct 2012 6:18 AM

Here is what I see, Google Chrome 22.0. The header is 50 px, but it is empty (no text, no background), and there is "Layout run failed" error in the console. Depending on font size you may need to add a couple of lines in the grid so that scrollbar appears.

grid-header.png

**mitchellsimoens** · 23 Oct 2012 6:22 AM

This is what I see in Chrome 22:

Screen Shot 2012-10-23 at 9.21.40 AM.png

**enw** · 23 Oct 2012 7:22 AM

I tested it with 4.1.2a (latest released version, as I understand) and also the nightly build from 22.10.2012. In both cases I can reproduce my error. But, cannot reproduce if I just run the code on e.g. Ext example pages on Sencha website...

So, can you please test with this HTML page? It is self-contained except you may need to alter the two Ext CSS and JS paths.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link rel="stylesheet" href="ext-all.css" type="text/css"/>
  <script type="text/javascript" src="ext-all-dev.js"></script>
  <script type="text/javascript">


Ext.onReady (function () {
    Ext.widget ('grid',
                { store: { type: 'array',
                           fields: ['text'],
                           data: [['xxx'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['zzz'], ['xxx']] },
                  columns: { minHeight: 50,
                             items: [{ text: 'lalala', dataIndex: 'text' }] },
                  height: 200,
                  renderTo: document.body });
});


  </script>
</head>
<body></body>
</html>

minHeight on table header causes layout faults if there is a scrollbar

Thread Tools

Search Thread

Display

minHeight on table header causes layout faults if there is a scrollbar

minHeight on table header causes layout faults if there is a scrollbar

Tags for this Thread