[FIX] point_of_sale: adapt to Chrome 50's new handling of cell heights

Chrome 50 treats percent-height divs inside of auto-height cells as
auto [1]. So from now on it's important that an explicit 'height: 100%' CSS
property is set on parent tds, otherwise you'll end up with elements
with a height of 0.

An extra difficulty is that this new height property on
subwindow-container will result in the element being as high as his
parent table. So the collapsed trick doesn't work anymore in the
customer list.

This has to be done conditionally. The proposed workaround of adding
100% height to parents of affected elements causes issues in IE/Edge
because the effect of adding a height in percent to a table-{cell,row}
element is not defined by CSS [2].

DO NOT FORWARD-PORT!

[1] 8876584335
[2] http://stackoverflow.com/a/27384730
This commit is contained in:
Joren Van Onder 2016-04-18 11:51:56 +02:00
parent 6057e645d6
commit 9fa53b7ee7
4 changed files with 17 additions and 1 deletions

View File

@ -0,0 +1,6 @@
.pos .screen .content-cell{
height: 100%;
}
.pos .subwindow .subwindow-container{
height: 100%;
}

View File

@ -166,6 +166,9 @@ td {
.pos .window .subwindow.collapsed{
height: 0px;
}
.pos .window .subwindow-container .collapsed{
height: 0px;
}
.pos .subwindow .subwindow-container{
display: table-cell;
position: relative;

View File

@ -965,6 +965,13 @@ function openerp_pos_widgets(instance, module){ //module is instance.point_of_sa
start: function() {
var self = this;
return self.pos.ready.done(function() {
if ($.browser.chrome) {
var chrome_version = $.browser.version.split('.')[0];
if (parseInt(chrome_version, 10) >= 50) {
openerp.loadCSS('/point_of_sale/static/src/css/chrome50.css');
}
}
// remove default webclient handlers that induce click delay
$(document).off();
$(window).off();

View File

@ -435,7 +435,7 @@
<section class="full-content">
<div class='window'>
<section class='subwindow collapsed'>
<div class='subwindow-container'>
<div class='subwindow-container collapsed'>
<div class='subwindow-container-fix client-details-contents'>
</div>
</div>