Trying to make KendoUI to work with Hebrew or more generally in RTL environment we had to find a way to guess the position of scroll bar when direction is rtl.
The problem exists due to the fact that some browsers (Chrome one of them) always put scroll bars to the right. That's utterly wrong. Consider a label and a listbox:
You can see that the scroll bar appears between the label (on the right) and the data in the list box (on the left) in Chrome, and on the left side of the list box in the IE.
We came up with the following test that calculates a scroll bar position in rtl mode:
<script type="text/javascript"> var _scrollbar; function scrollbar() { if (!_scrollbar) { var div = document.createElement("div"); div.style.cssText = "overflow:scroll;zoom:1;clear:both;direction:rtl"; div.innerHTML = "<div> </div>"; document.body.appendChild(div); _scrollbar = { size: div.offsetWidth - div.scrollWidth, rtlPosition: div.offsetLeft < div.firstChild.offsetLeft ? "left" : "right" }; document.body.removeChild(div); } return _scrollbar; } </script>
In conjuction with an approach described in How to create a <style> tag with Javascript we were able to define rtl css classes for kendo controls and in particular for the grid, combobox, dropdownlist, and datepicker.
Remember Me
a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u