We have a strange issue, that can only be reproduced on a mobile or tablet device (it does not happen on a laptop/computer).
The datatable we are using is an inline editing datatable that is like excel (so all fields and all rows are always available for edit).
On a tablet or mobile device if I scroll so that the datatable is not fully in view (so part of the datatable is not showing), then when I go back to use the datatable (so click in a cell to select a drop down or type some text) the datatable re-renders.
The same happens if I scroll up to the top of the page, so the databtable is fully out of view and scroll around a bit it will also suddenly re-render the datatable as well.
Like I have said this never happens on a laptop/computer so I am not sure what the issue is.
On the mobile and tablet I have tested chrome for android and firefox.
Any ideas, would be very much appreciated!
Here is an example of one of the data tables and a screen shot
self.table = $(self.parentContainerSelector + ' table').DataTable({
scrollY: 300,
"scrollX": true,
paging: false,
order: [[$(self.parentContainerSelector + ' th.posno-column').index(), 'asc']],
data: self.DataForInitTable,
createdRow: function (row, data, index) {
self.checkRowForAnotherRules(row, data);
},
columnDefs: [
{
Screenshot of datatable
Related
Oracle ADF 12.1.2 - 12.2.1 has an issue that table scrolling moves only a few pixels down at a time whe you move the scroll wheel while the mouse is over a table.
If you use the table scroll bars, it works as expected.
It also works as expected when using Google Chrome to view the page.
I found the answer here:
[https://community.oracle.com/thread/3527303]
add "!important" to the CSS property af|table::data-body like this:
af|table::data-body {
position: static !important;
}
The ExtJS chart must be rendered in order for the svg data to be plucked from the html element. This chart is on tab2 in my test app, with tab1 being the active tab. How do I force render the chart without the user seeing it so I can grab the svg data?
Added
forceLayout: true,
deferredRender: false,
layoutOnTabChange: true,
defaults:{hideMode: 'offsets'}
to parent tab of chart but did not help. What this does do is force the chart div to show up in the html node tree - however the svg data is a skeleton without the chart details .... very strange since switching to tab2 shows the chart in all its glory! The full svg data only shows up in the html node tree after switching back and forwards between the 2 tabs.
Got around this by putting the ExtJS chart on the front tab so it gets rendered in time, where the chart is "offscreen" and cannot be seen by user. Using layout: 'fit' only shows the first, top container where I process the chart svg data, and the rendered chart is within the second, lower container with its svg data available but unseen on gui. There maybe a more elegant way but I could not find one.
Issue with using kendo.resize inside the window.resize function. i need to bootstrap 3 functionalists for kendo chart, when i change the browser size so i used kendo.resize function. chart re sizing work perfectly only chart in visible area. as example i have kendo tab strip with two tab with 2 chart (tab 1 -chart1, tab 2-chart 2) when i click on tab 1 and re size the browser chart will re size, then go to tab 2 chart 2 is still in previous size when i re size the browser its again re size.
I suggest to look at example on kendo website:
http://demos.telerik.com/kendo-ui/bootstrap/
There is exactly what you request:
here is a sample code:
function resizeTabStripContent() {
kendo.resize("#tabstrip");
}
$("#tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
},
activate: resizeTabStripContent
});
// resize nested charts when window resizes
$(window).resize(resizeTabStripContent);
It resizes charts in tab strip on window resize event and when tab is activated.
I have done application using ExtJs 4, contains feature menu. Menu items are showing nicely in all browser like IE9, Firefox, Chrome and Safari. But issue is coming when launch the same app in IE10 menu not showing menu items. when inspect the element menu it contains menu items data. Can anybody tell me why it is not displaying in IE10? How to showcase menu items data. i am adding dynamically items menu by using the reference of items. below is my code.
refs:[
{
ref: 'region',
selector: 'globalNavigationView > button[name="btnFilter"] > menuitem[text="Region"]'
},
Within FunCalling
Here regionValue contains list of items.
this.getRegion().menu.removeAll();
dynamicRegion=new Array();
for(var i=0; i<regionValue.length; i++){
var objSubR=new Object();
objSubR.cls= 'filterMenuCls';
objSubR.text=regionValue[i];
dynamicRegion.push(objSubR);
}
this.getRegion().menu.add(dynamicRegion);
Ext JS 4.1 does not support IE10, 4.2 does.
i have a window with grid panel as the content...
when the window first shown, my store is empty and i can't see the scrorllbar (good)
when i load the data to store, i can see the scrollbar (good)
when i remove all data from store, i can still see the scrollbar and scrollable. when exactly there's no data in view (bad)
so my question is my title, how to remove scrollbar after datastore removed
here is the demo
Its is a open bug. Sencha team promises to fix it it 4.0.7. Have a look at this discussion at Sencha forum.
One possible solution given in the forum, is to hide the scrollbar using hideVerticalScroller() method. I did try it on fiddle but was not successful 100% (may be something to do with fiddle). I had to click "remove data" button twice to remove the scroll bar:
handler:function(){
storeSr.removeAll();
gridSr.hideVerticalScroller();
}
On the forum, they suggest doing (And this works!):
storeSr.removeAll();
var data = [];
var store = gridSr.getStore();
store.loadData(data, false);
if (data.length == 0) {
gridSr.hideVerticalScroller();
}