CSS issue in IE10 in editor mode

[JoshClose]

The text is cutoff in editor mode.

[JoshClose]

If I remove height: 100%; from .backgrid td.editor input[type=text], everything works fine.

Is there a reason this needs to be there?

[wyuenho]

I forgot. It had to be there for Firefox or Chrome to render properly if I remember correctly. File me a PR if you could fix this and not break Chrome and Firefox.

[JoshClose]

It works in latest... I don't know about older versions. Are you supporting older versions of FF and Chrome?

[wyuenho]

Nope. Just the lastest version of FF and Chrome.

[JoshClose]

Ok. I can do a PR for you tonight then.

[wyuenho]

Do the cells come out right on IE8 and IE9 currently?

[JoshClose]

They do in IE8 and IE9 mode under IE10 in the developer tools. I haven't tested the actual browsers, but the modes will usually render just like the browser would.

[dcb]

Don't know what happened here but in master "height: 100%" is still there and it still breaks IE 10 and Firefox.

[wyuenho]

The padding has been removed instead of setting height to auto and breaking chrome.

[dcb]

As you can see from the screenshots below, in my tests the current master is cutting off the text on IE 10 and Firefox 24 (I did not test other versions). On IE 10 even the samples on backgridjs.com have the same problem.
I think in my example the problem appears on Firefox as well because I have bigger padding on the table cells.

Anyway, removing height: 100% from the editor as suggested by @JoshClose does solve the problem in IE and FF and it doesn't seem to break Chrome and Safari.

[wyuenho]

Both IE 10 on Win 7 and Firefox 25 on the Mac work fine. I was testing with master. Which Windows version were you using?

[dcb]

Ok, sorry my master build was a couple of weeks old. I've got the latest and that problem is solved, but I've got another one, although it could be related to my styling as well. Now the editor seem to be losing the vertical alignment in IE10 on Win7 and Firefox 24 on Mac. I'll investigate and report back. Thanks for the support!

[dcb]

With the latest CSS from master what I found is that the editor input is always 19px high on FF and IE. height: 100% doesn't seem to have any effect. Setting the editor height to the actual desired pixel height fixes the problem (37px in this example). I'm using Bootstrap 3, the grid is styled with Bootstrap and I got a hunch that that's where the problem comes from, but I couldn't pinpoint yet the exact Bootstrap style that causes this issue. I'll investigate further when time allows.

[ntodorov]

I see similar cutoff in Chrome Version 53.0.2783.4 dev-m (64-bit)

the screenshot if from backgridjs.com - it is the latest version.