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.
Thank you for the snippet code, but could you please send isolated sample in order to reproduce the issue, because as you said it is very specific and now the Model part is missing and I can not conclude how it is structured.
It will be highly appreciated if you provide a sample.
Looking forward to hearing from you!
Best Regards, Zdravko KolevDeveloper Support EngineerInfragistics, Inc.
Zdravko,
I am not sure I understand what you cannot discern. I specify that there are 12 columns one of which is hidden. You can see it in the code I sent. With the holidays, I do not have time to develop a full working sample at this time. I am not sure what more adding my model to the example would provide. I think the important thing here is somewhere it is explicitly setting/allowing the overflow to be set to visible? Otherwise the style below would make no difference.
#grid1_scroll{
overflow: auto !important;
I am sorry I cannot be more helpful at this time, but with a valid work around I cannot spend more time on this issue. I do hope you can resolve the porblem as I do not think this should be happening.
Thanks,
Jonathan
Hello Jonathan,
Thank you for your patience!
I have investigate this matter further and some questions appeared. Could you please tell me what you are trying to achieve with setting body style to overflow hidden (I understand that you don't want to show the page scrollbar), also what is this css class that you are applying on grid data rendered, although it may not be relevant to the issue.
If you want to show the scrollbar of the grid, with overflow of the body set to hidden, you need to specify its height in pixels not in percentages or to specify the splitters height in pixels not in percentages (see the sample) and leave the height of the grid to 100%. The use of percentage heights is causing the issue.
I have create a sample in order to achieve the issue with the scrollbar. Could you please send a screenshot relevant to the issue in order to clarify it.
Looking forward to hearing from you.
Sorry for the delay in my reply, I have been busy.
The CSS class is only setting the background color, the purpose is to set the color based upon the given conditions.
The body style is actually a mistake on my part, it was my attempt to force the scroll bar to appear. I have since removed it from my code.
I am not a huge fan of explicitly setting the size in Pixils because there is no way to know the target devices screen size. I can check if doing that does fix the issue, but given the option between setting the size in pixils or overwriting the objects css I will overwrite the css. Again, the issue is that somewhere the overflow is being set to visible or adding the following to my css file would not work, and it currently does solve the problem for me.
#objectid{ overflow: auto !important;}
Thank you for sharing your solution on this matter with us and everyone that can face it in future.
I just wanted to clarify the specific css I am setting.
#grid1_scroll{ overflow: auto !important; }