[FIX] point_of_sale: scroll contact list in Firefox and Edge

The POS uses tables to do some of it's layout. It also sets 'height:
100%' on a lot of these tables in an attempt to restrict their
height. The CSS standard however defines the height property on a table
as follows:

"A value of 'auto' means that the height is the sum of the row heights
plus any cell spacing or borders. Any other value is treated as a
minimum height." [1]

Chrome and Safari seems to handle this height property in a way that it
does in fact restrict height. The behavior of Firefox and Edge however
is more in line with the spec, and in these browsers table height is not
restricted by this property.

Because of this the contact list was not scrolleable in those
browsers. To resolve this we stop relying on non-standard behavior by
displaying the relevant contact list elements as regular block
elements. Additionally, we now have to recompute the height of the
client list whenever we show/hide the client details, something that
wasn't necessary before.

[1] https://www.w3.org/TR/CSS21/tables.html#height-layout

Fixes #11020
This commit is contained in:
Joren Van Onder
2017-01-23 12:09:27 -08:00
parent cb597806ec
commit f0eeed93dc
2 changed files with 17 additions and 0 deletions
@@ -213,6 +213,19 @@ td {
position: relative;
}
.pos .clientlist-screen .window,
.pos .clientlist-screen .full-content .subwindow{
display: block;
}
.pos .clientlist-screen .full-content .subwindow-container{
display: block;
height: 100%;
}
.pos .clientlist-screen .full-content .subwindow.collapsed,
.pos .clientlist-screen .full-content .subwindow-container.collapsed{
height: auto;
}
/* ---- Scrollers ----- */
.pos .scroller-container{
@@ -1299,6 +1299,9 @@ var ClientListScreenWidget = ScreenWidget.extend({
var new_height = contents.height();
if(!this.details_visible){
// resize client list to take into account client details
parent.height('-=' + new_height);
if(clickpos < scroll + new_height + 20 ){
parent.scrollTop( clickpos - 20 );
}else{
@@ -1328,6 +1331,7 @@ var ClientListScreenWidget = ScreenWidget.extend({
});
} else if (visibility === 'hide') {
contents.empty();
parent.height('100%');
if( height > scroll ){
contents.css({height:height+'px'});
contents.animate({height:0},400,function(){