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

No Data

Reply

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

Children

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