idGrid Scroll bar disappears | Infragistics Forums

8920

idGrid Scroll bar disappears

Michael Seidel posted over 6 years ago

igGrid scroll bar not showing in Chrome...

IE :

Same site/code in Chrome:

the grid defined on the following:

</div>

In IE11 the relevant source looks like:

<div id="uoaGridContainer2"><div tabindex="0" class="ui-widget ui-helper-clearfix ui-corner-all ui-iggrid" id="uoaAuditGrid_container" style="width: 100%; height: 100%;"><div class="ui-widget-header ui-helper-reset" style="overflow: hidden; white-space: nowrap; position: relative;"><table class="ui-iggrid-headertable" id="uoaAuditGrid_headers" style="padding-right: 17px;" border="0" cellspacing="0" cellpadding="0"><colgroup><col style="width: 25%;"><col style="width: 25%;"><col style="width: 25%;"><col style="width: 25%;"></colgroup><thead><tr data-header-row=""><th class="ui-iggrid-header ui-widget-header" id="uoaAuditGrid_Name"><span class="ui-iggrid-headertext">Unit of Account Name</span></th><th class="ui-iggrid-header ui-widget-header" id="uoaAuditGrid_Description"><span class="ui-iggrid-headertext">Description</span></th><th class="ui-iggrid-header ui-widget-header" id="uoaAuditGrid_uoaBenefitYear"><span class="ui-iggrid-headertext">Benefit Year</span></th><th class="ui-iggrid-header ui-widget-header" id="uoaAuditGrid_AuditName"><span class="ui-iggrid-headertext">Audit Name</span></th></tr></thead></table></div><div class="ui-iggrid-scrolldiv ui-widget-content" id="uoaAuditGrid_scroll" style="height: 341px; -ms-overflow-x: hidden; -ms-overflow-y: auto; -ms-touch-action: none;" data-scroll="true" data-onedirection="true" data-xscroller="#uoaAuditGrid_hscroller">

in Chrome relevant source :

<div id="uoaGridContainer2"><div id="uoaAuditGrid_container" tabindex="0" class="ui-widget ui-helper-clearfix ui-corner-all ui-iggrid" style="width: 100%; height: 100%;"><div class="ui-widget-header ui-helper-reset" style="overflow: hidden; position: relative; white-space: nowrap;"><table id="uoaAuditGrid_headers" class="ui-iggrid-headertable" cellpadding="0" cellspacing="0" border="0" style="padding-right: 15px;"><colgroup><col style="width: 25%;"><col style="width: 25%;"><col style="width: 25%;"><col style="width: 25%;"></colgroup><thead><tr data-header-row=""><th id="uoaAuditGrid_Name" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Unit of Account Name</span></th><th id="uoaAuditGrid_Description" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Description</span></th><th id="uoaAuditGrid_uoaBenefitYear" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Benefit Year</span></th><th id="uoaAuditGrid_AuditName" class="ui-iggrid-header ui-widget-header"><span class="ui-iggrid-headertext">Audit Name</span></th></tr></thead></table></div><div id="uoaAuditGrid_scroll" class="ui-iggrid-scrolldiv ui-widget-content" data-scroll="true" data-onedirection="true" data-xscroller="#uoaAuditGrid_hscroller" style="overflow: hidden; height: 340px;"><table id="uoaAuditGrid" cellpadding="0" cellspacing="0" border="0" class="ui-iggrid-table ui-widget

Control is 14.2 and if I would change style="overflow: hidden; to "overflow-y:auto; scroll bar appears .. Why different style generated in different browser... the question is what I can add to grid setting so to force scroll bar in Chrome same way that is in IE11. Also when I am in the touch screen that I can scroll by using finger and scroll bar appears while scrolling .. I need it permanently presented on the grid when user uses Chrome.

Top Replies

17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to Michael Seidel +1 verified
Hello Michael, Your approach seems good. I was also thinking about a similar solution. The only scenario, that I can think of, that can cause some issues...view reply »

Parents

17590

Offline Vasya Kacheshmarova posted over 6 years ago

Hello Michael,

According to our product lifecycle document, support for any versions prior to 2015.1 have expired.
If you create a small, isolated sample (without any external dependencies) that reproduces the issue and attach it in this thread I can have a look how it behaves in our latest versions that are still eligible for support. For creating this sample you can use Infragistics trial CDN links. For example:


    <link href="http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="">ajax.aspnetcdn.com/.../script>
    <script src="">code.jquery.com/.../script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    
    <script src="">cdn-na.infragistics.com/.../script>
    <script src="http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>

Please add any details that might be considered relevant such as steps to reproduce the issue, the device that you are using etc.

In regards to the way the scrollbars are rendered on touch under Chrome, this is not specific to Ignite UI controls. It is globally applied approach and this behavior will replicate on all devices under Chrome browser. In order to show always show a scrollbar you will have to implement your custom approach.

Please let me know if you need any further assistance with this matter.

Regards,

Vasya Kacheshmarova

Associate Software Developer

Infragistics
Cancel
Reply

Cancel

Reply

17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to Vasya Kacheshmarova

Hello Michael,

I received the attachment via the support case created from my colleague. I will investigate this matter further and I will update you in this forum thread.

Please feel free to continue sending updates to this case at any time.

Regards,
Vasya Kacheshmarova
Associate Software Developer
Infragistics
Cancel
Reply

Cancel

Children

17590

Offline Vasya Kacheshmarova posted over 6 years ago in reply to Michael Seidel

Hello Michael,

Please let me know if you need any further assistance with this matter.

Regards,
Vasya Kacheshmarova
Associate Software Developer
Infragistics
Cancel
Reply

Cancel
8920

Offline Michael Seidel posted over 6 years ago in reply to Vasya Kacheshmarova

there is no virtualization.. I guess css selector it good enough..
Cancel
Reply

Cancel
17590

Verified Answer
Offline Vasya Kacheshmarova posted over 6 years ago in reply to Michael Seidel

Hello Michael,

Your approach seems good. I was also thinking about a similar solution.
The only scenario, that I can think of, that can cause some issues is if virtualization feature is configured.

Do you have this feature enabled for any of your grids?

Regards,
Vasya Kacheshmarova
Associate Software Developer
Infragistics
Cancel
Reply

Reject Answer

Cancel
8920

Offline Michael Seidel posted over 6 years ago in reply to Vasya Kacheshmarova

Hi Vasya,

I added css selector :

#grid1_scroll {
overflow-y: auto !important;

}

and it added the scroll bar to the grid... if you have better approach, I am open to it.. the issue seemed related to touch screens only.
Cancel
Reply

Cancel