1
0
mirror of https://github.com/DataTables/DataTables.git synced 2024-11-29 11:24:10 +01:00

New: Scrolling support for rtl language layout

- When scrolling is enabled, the scrollbar can be placed on the right or
  the left of the scrolling container by the browser for rtl layout (of
  the current browsers, only Safari appears to place it on the right) -
  when placed on the left the padding adjustment that DataTables makes
  for the scrollbar area was added to the wrong side.

- To cope with this, the browser compat method (moved to the compat
  file) will check for the position of the scrollbar and set a flag so
  the scroll draw can adjust the position as needed.
This commit is contained in:
Allan Jardine 2013-02-01 10:05:45 +00:00
parent 177400121e
commit 415ce622c3
4 changed files with 42 additions and 31 deletions

View File

@ -37,8 +37,8 @@ function _fnHungarianMap ( o )
/**
* Convert from camel case parameters to Hungarian, based on a Hungarian map
* created by _fnHungarianMap.
* @param {object} src The model object which holds all parameters can has
* previously been run through `_fnHungarianMap`.
* @param {object} src The model object which holds all parameters that can be
* mapped.
* @param {object} user The object to convert from camel case to Hungarian.
* @param {boolean} force When set to `true`, properties which already have a
* Hungarian value in the `user` object will be overwritten. Otherwise they
@ -49,7 +49,7 @@ function _fnCamelToHungarian ( src, user, force )
{
if ( ! src._hungaianMap )
{
return;
_fnHungarianMap( src );
}
var hungarianKey;
@ -98,3 +98,29 @@ function _fnLanguageCompat( oLanguage )
}
}
/**
* From some browsers (specifically IE6/7) we need special handling to work around browser
* bugs - this function is used to detect when these workarounds are needed.
* @param {object} oSettings dataTables settings object
* @memberof DataTable#oApi
*/
function _fnBrowserDetect( oSettings )
{
/* IE6/7 will oversize a width 100% element inside a scrolling element, to include the
* width of the scrollbar, while other browsers ensure the inner element is contained
* without forcing scrolling
*/
var n = $(
'<div style="position:absolute; top:0; left:0; height:1px; width:1px; overflow:hidden">'+
'<div style="position:absolute; top:1px; left:1px; width:100px; overflow:scroll;">'+
'<div id="DT_BrowserTest" style="width:100%; height:10px;"></div>'+
'</div>'+
'</div>')[0];
document.body.appendChild( n );
oSettings.oBrowser.bScrollOversize = $('#DT_BrowserTest', n)[0].offsetWidth === 100 ? true : false;
oSettings.oBrowser.bScrollbarLeft = $('#DT_BrowserTest', n).offset().left !== 1 ? true : false;
document.body.removeChild( n );
}

View File

@ -451,13 +451,14 @@ function _fnScrollDraw ( o )
// Figure out if there are scrollbar present - if so then we need a the header and footer to
// provide a bit more space to allow "overflow" scrolling (i.e. past the scrollbar)
var bScrolling = $(o.nTable).height() > nScrollBody.clientHeight || $(nScrollBody).css('overflow-y') == "scroll";
nScrollHeadInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
var padding = o.oBrowser.bScrollbarLeft ? 'paddingLeft' : 'paddingRight';
nScrollHeadInner.style[padding] = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
if ( o.nTFoot !== null )
{
nScrollFootTable.style.width = _fnStringToCss( iOuterWidth );
nScrollFootInner.style.width = _fnStringToCss( iOuterWidth );
nScrollFootInner.style.paddingRight = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
nScrollFootInner.style[padding] = bScrolling ? o.oScroll.iBarWidth+"px" : "0px";
}
/* Adjust the position of the header in case we loose the y-scrollbar */

View File

@ -267,28 +267,3 @@ function _fnCallbackFire( oSettings, sStore, sTrigger, aArgs )
return aRet;
}
/**
* From some browsers (specifically IE6/7) we need special handling to work around browser
* bugs - this function is used to detect when these workarounds are needed.
* @param {object} oSettings dataTables settings object
* @memberof DataTable#oApi
*/
function _fnBrowserDetect( oSettings )
{
/* IE6/7 will oversize a width 100% element inside a scrolling element, to include the
* width of the scrollbar, while other browsers ensure the inner element is contained
* without forcing scrolling
*/
var n = $(
'<div style="position:absolute; top:0; left:0; height:1px; width:1px; overflow:hidden">'+
'<div style="position:absolute; top:1px; left:1px; width:100px; overflow:scroll;">'+
'<div id="DT_BrowserTest" style="width:100%; height:10px;"></div>'+
'</div>'+
'</div>')[0];
document.body.appendChild( n );
oSettings.oBrowser.bScrollOversize = $('#DT_BrowserTest', n)[0].offsetWidth === 100 ? true : false;
document.body.removeChild( n );
}

View File

@ -239,7 +239,16 @@ DataTable.models.oSettings = {
* @type boolean
* @default false
*/
"bScrollOversize": false
"bScrollOversize": false,
/**
* Determine if the vertical scrollbar is on the right or left of the
* scrolling container - needed for rtl language layout, although not
* all browsers move the scrollbar (Safari).
* @type boolean
* @default false
*/
"bScrollbarLeft": false
},
/**