Search code examples
c#asp.netaspxgridview

Make div scroll with browser scrollbar


I have a page that holds two iframes sitting next to each other inside of two divs. There is a scrollbar on the second iframe that I want to remove so that the iframe scrolls with the browser scrollbar. The iframe with the unwanted scrollbar contains a gridview and when the data becomes longer than the browser height, the scrollbar appears.

<div data-dx-role="view" data-dx-name="Index" data-dx-title="Home" style="height: 100%">
    <div data-dx-target-placeholder="content">
        <div id="treeframe" class="ui-widget-content" style="position: absolute; overflow-x: scroll; width: 20%; overflow: hidden; bottom: 0px; top: 0px; left: 0px; z-index: 1">
            <iframe class="iframeformat" height="1100" style="width: 100%; overflow: auto;" id="ifrmtree" src="./SiteTree.aspx"></iframe>
        </div>

        <div id="contentframe" class="mobform" style="position: relative; overflow: hidden; top: 0px; width: 100%%; height:100%" aria-haspopup="False">
            <iframe id="ifrmlogin" class="embed-responsive-item"  src="./DashboardHome.aspx" style="height: 1100px; overflow: hidden; width: 100%; border: none;"></iframe>
        </div>    
    </div>
</div>

.aspx Page with Gridview:

<dx:ASPxGridView ID="ASPxGridView1" runat="server" Style="align-content: center;height:100%; text-align: center; overflow:hidden;" OnHtmlDataCellPrepared="ASPxGridView1_HtmlDataCellPrepared" CssClass="auto-style1" RightToLeft="False" Width="100%">
    <Settings VerticalScrollBarMode="Hidden"/>
    <SettingsPager Mode="ShowAllRecords" PageSize="30">
        <PageSizeItemSettings ShowAllItem="True">
        </PageSizeItemSettings>
    </SettingsPager>
</dx:ASPxGridView>

Solution

  • This Javascript solution was helpful to me a couple of years ago, but it will only work is the iframe contents resides on the same domain:

    <script>
      function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }
    </script>
    
    <iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />