Grid Header Wrapping

[BanyanAir]

In the past when a grid column was narrow, the header automatically wrapped to 2 lines ("Sort Code") for example. This wrapping function is not working when the grid is inside an accordion layout. In designer, the sub-file looks correct. When running in web browser wrapping is not occurring, unless I make the header size 100px instead of my usual 28px.

Attached screens show designer and production. I've tested and got the same results IE, Firefox and Chrome.

Any suggestions?

Larry

[Scott Klement]

Hmmm... this sounds like a problem in the CSS. Can you post a JSON dump? You can get that by pressing Ctrl-F9 while the screen is active. It'll ask you to download a file named json.txt -- please upload that file, here.

[BanyanAir]

Here is the file

[Scott Klement]

Hmmm... when I try this JSON file, it seems to crash Profound UI... did you have trouble with it crashing?

[Scott Klement]

Ugh, sorry for the false alarm... I accidentally added some extra characters when I was looking at your JSON file, that's why it was crashing... entirely my fault... works fine now that I fixed those.

But, now that I've done that, I am looking at your Kits/Options section in the accordion panel, and I don't see a "Sort Code" column on the grid at all. This is what the grid looks like on my screen:

1-16-2015 7-29-11 PM.png (37 KiB) Viewed 393 times

As you can see, it looks very different from the screenshot you posted earlier. I see that it is using a CSS class of "custom-grid", and I'm guessing that this CSS class is something you created -- can you send me a copy of your CSS file that contains the custom-grid class?

Thanks!

[Scott Klement]

Larry,

I've been looking at this in more depth. For now, instead of using your custom CSS, I've just changed it to use our 'hybrid-grid' CSS, and I'm able to reproduce the exact same problem you are seeing.

What's happening is that it's trying to center the column headings vertically. There is code inside the Grid widget that does this by asking the browser what the height of the colum heading is, and then calculating the appropriate positioning so that it will be centered within the heading space.

The problem is that your grid is hidden at the time that this code runs (because it's on a section of the accordion that's not displayed when the screen renders). Because of this, the browser is telling the grid that the text in the headings has no height (0 pixels high), and that's true, because it's not on the display. So when the grid calculates the positioning, it calculates it wrong.

If you look carefully, all of your headings are wrong. they are supposed to be centered vertically, but they are not -- you can see that they are positioned at the bottom of the heading boxes -- that's because this calcualion is not working. The "Sort Code" is a little more obvious because it is two lines -- you see the first line of it, and the second line is being sent, but it's below the data portion of your subfile, so the row background is drawn over it, and so you can't see it.

I'm not exactly sure how to fix this at this moment, but I will discuss this with other developers and see if we can come up with a plan. This looks like a support issue rather than a "how-to" issue, so I will send you an e-mail with a support ticket, et al.

[Scott Klement]

I've created a fix for this, and it will be included in the next release of Profound UI.

If anyone needs it sooner, please e-mail support@profoundlogic.com and mention that you need a patch for issue 1269.