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:
parent
177400121e
commit
415ce622c3
@ -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 );
|
||||
}
|
||||
|
||||
|
@ -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 */
|
||||
|
@ -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 );
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
},
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user