This is a very specific issue I am seeing, and I have a workaround, but I wanted to see if there is a better way. I am using IGGrid and displaying a set of data and everything is working fine on a normal pc in Firefox, Chrome and IE. But when I try it on a Surface Pro 2 device, the Firefox browser keeps setting the overflow to hidden(Chrome and IE are fine.). This is a problem because then the users cannot see all of the data in the grid because they cannot scroll and there is no scrollbar. I have a workaround in that I added #objectid{ overflow: auto !important;} to my site.css file, but I do not like having to do this. Is this a known issue, is there a better work around?
Hello,
Thank you for using our forum!
Could you please give me more information regarding this issue, version of our product, Firefox version and also is there something that you are using on igGrid initialization and usage. I have made a sample and tested your scenario, although this issue does not appear, could you please make changes to this sample in order to reproduce the issue, or send me isolated sample on your own.
This will be highly appreciated!
Thank you for your reply.
The version of firefox is 26.0.
Infragistics version 13.1.2292.
I have changed a lot of the names and deleted some of the non-grid content, but I think it is still capturing what I am doing with the grid. Let me know if this does not help. I did open the page you sent on my device and I did see your scroll bar, so it must be in one of the features or other things I am doing. I was also wondering if it might occur because of the splitter. The one thing I am not showing here is the initial css for the whole page. Here is the css for the MainGridDiv:
.MainGridDiv
{
height: 40%;
clear: both;
overflow-x: hidden;
margin-bottom: 5px;
}
<script>
$('#grid1').live('iggridrendered', function (evt, ui) {
var temp = "@Model.selectedRow";
if( temp != null)
$("#grid1").igGridFiltering('filter', ([{ fieldName: "rowID", expr: temp, cond: "equals" }]));
});
$(function () {
$("#splitter").igSplitter({
height: "86%",
orientation: "horizontal",
panels: [{ collapsible: true }, { size: 200, collapsed: false, collapsible: true }],
resizeEnded: function (evt, ui) {
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
if (selected == 0) {
$('#TabDiv').resize();
},
expanded: function (evt, ui) {
collapsed: function (evt, ui) {
$("#tabs").tabs({
select: function (event, ui) {
if (ui.index == 0) {
beforeLoad: function (event, ui) {
ui.jqXHR.error(function () {
ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible.");
});}
$("#grid1").live("iggriddatarendered", function (evt, ui) {
$('#grid1 tr').each(function () {
if ($(this)[0].cells[6].textContent == "Cond1" && $(this)[0].cells[10].textContent == "ValueA")
$(this).addClass("cssStyleClassA");
if ($(this)[0].cells[6].textContent == "Cond1" && $(this)[0].cells[10].textContent == " ValueB")
$(this).addClass("cssStyleClassB");
if ($(this)[0].cells[6].textContent == "Cond1" && $(this)[0].cells[10].textContent == " ValueC")
$(this).addClass("cssStyleClassC");
})
</script>
<body style="overflow:hidden">
<div id="splitter">
<div class="MainGridDiv">
@(Html.Infragistics().Grid<ModelType>(Model.List.AsQueryable()).ID("grid1")
.AutoGenerateColumns(false)
.Columns(column =>
column.For(x => x.col1).Hidden(true).Column.Key="rowID";
column.For(x => x.col2);
column.For(x => x.col3);
column.For(x => x.col4);
column.For(x => x.col5);
column.For(x => x.col6);
column.For(x => x.col7);
column.For(x => x.col8);
column.For(x => x.col9);
column.For(x => x.col10);
column.For(x => x.col11);
column.For(x => x.col12);
.Features(features =>
features.Sorting().Type(OpType.Local);
features.Paging().Type(OpType.Local).PageSize(25).PageSizeDropDownLocation("hidden"); features.Selection().MultipleSelection(false).AddClientEvent("rowSelectionChanged","changeTabs");
features.RowSelectors();
features.Filtering().Mode(FilterMode.Advanced);
.Height("100%")
.DataSourceUrl(Url.Action("PagingGetData"))
.DataBind().Render())
</div>
<div class="TabDiv" id="TabDiv">
<div id="tabs">
<ul>
<li>
<a href="#tabs-1">Tab 1</a>
</li>
<a href="#tabs-2"> Tab 2</a>
</ul>
<div id="tabs-1" >
//Content
<div id="tabs-2" >
</body>
<script type="text/javascript">
function changeTabs(event, args) {
//Handle changing tab content based on selected row.