We Keep Coding

Make div scroll with browser scrollbar [duplicate]

This question already has answers here:
Make iframe automatically adjust height according to the contents without using scrollbar? [duplicate]
(16 answers)
Closed 4 years ago.
Locked. There are disputes about this question’s content being resolved at this time. It is not currently accepting new answers or interactions.
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>

Locked. There are disputes about this answer’s content being resolved at this time. It is not currently accepting new interactions.
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)" />

How to remove overflow: hidden using with telerik

Below is code before convert to HTML.I want to change overflow hidden.I found many way of CSS file. But couldn't find it and try using id to change css always no responding.
Telerik Code
<telerik:ReportViewer ID="ReportViewer1" runat="server" Height="800px"
Width="100%"></telerik:ReportViewer>
HTML View Through Browser Developer tools
<td id="TD_2">
<div id="TD2" style="overflow-y: auto; padding-left: 100px; width: auto; overflow-x:
hidden; position: inherit; height: 355px;">
<telerik:ReportViewer ID="ReportViewer1" runat="server" Height="800px"
Width="100%"></telerik:ReportViewer>
</td>

overflow : hidden hides content in placeholder object

I have an asp placeholder object, within a div.
<div id="contentMenu" class="contentMenu">
<asp:PlaceHolder ID="plhMenu" runat="server">
</asp:PlaceHolder>
<div id="divMenuImage" class="menuImage">
<asp:Image ID="imgMenu" runat="server" ImageUrl="images/menu.gif" />
</div>
</div>
the div uses the following css:
.contentMenu
{
color: #ffffff;
left: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
position: absolute;
top: 85px;
width: 500px;
z-index: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Items in the menu are added to the placeholder using calls such as:
plhMenu.Controls.Add(btnArrow);
plhMenu.Controls.Add(btnCategory);
Using the text-overflow property in the css is supposed to crop the text and show ellipses.
However, when the property "overflow : hidden" is in the css, all the menu disappears. Remove that propery and the menu appears, but the text-overflow doesn't work (it seems that overflow : hidden is required).
Any help in sorting this out would be very much appreciated as I have spent hours trying to figure out what is going on.
Thanks in advance.

You don't have a height on your container div, if you are adding items to the placeholder dynamically after the page is first drawn, then they might not cause the div to grow vertically.
You could try using overflow-x: hidden;?

Image not displayed in chrome and firefox using "progid:DXImageTransform.Microsoft.AlphaImageLoader"

i am using "progid:DXImageTransform.Microsoft.AlphaImageLoader" to display iamge in div
My code is:
<body class="style_page" style="margin: 0px; background: white;" onload="onLoad()"
onunload="onUnload()" onresize="onResize()">
<div id="mediaPlayer" style="position: absolute; visibility: hidden;">
</div>
<div id="first" style="position: absolute; left: 50%; top: 0px; width: 800px; height: 600px;
font-size: 10pt; background: white;">
<div class="placeholder" style="left: 0%; top: 0%; width: 100%; height: 166%;">
<div class="outline" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='output6.jpg');">
</div>
</div>
</div>
It works fine in IE8 but doesn't work in Mozilla and google chrome
Plz help
Thanks

Mozilla, Opera, G.Chrome and other browsers doesn't support Microsoft filters for transform text and images(controls). I think that every brower producer use diferent method.
Try to find help on their sites, and you must write javascript functions to recognize browser whos load page you developed.

rotating wheel while executing backend code asp.net

I am trying to put a rotating wheel popup on the page while I am executing backend code for fetching new data from DB.
Here is what I tried, but it doesn't want to work so far, nothing gets displayed.
I want to display something when the checkbox is clicked (CheckedChanged), that's when something is fetching from db.
Here is the ajax code I have:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger controlid="cbAll" eventname="CheckedChanged" />
</Triggers>
<ContentTemplate>
</ContentTemplate>
</asp:UpdatePanel>
<asp:updateprogress associatedupdatepanelid="UpdatePanel1"
id="updateProgress" runat="server">
<progresstemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage"> Loading...<br /><br />
<img alt="Loading" src="../images/ajax-loader.gif" />
</div>
</progresstemplate>
</asp:updateprogress>
And here is the checkbox control:
<asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything" ForeColor="White"
Visible="false" AutoPostBack="True"
oncheckedchanged="cbAll_CheckedChanged" />

Modify your code a bit.
You do not need the trigger, the event has AutoPostBack checkbox.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<%--<Triggers>
<asp:AsyncPostBackTrigger ControlID="cbAll" EventName="CheckedChanged" />
</Triggers>--%>
<ContentTemplate>
<asp:CheckBox ID="cbAll" runat="server" Checked="true" Text="Show me everything"
ForeColor="White" Visible="false" AutoPostBack="True" OnCheckedChanged="cbAll_CheckedChanged" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" ID="updateProgress" runat="server">
<ProgressTemplate>
<div id="progressBackgroundFilter">
</div>
<div id="processMessage">
Loading...<br />
<br />
<img alt="Loading" src="../images/ajax-loader.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
I hope this helps.

I've done something like this in the past by skipping the update progress control and instead handling the PageRequestManager beginRequest and endRequest events. In my case I also wanted to block the ui of the page, so I used the jQuery blockUI plugin.
Put the following div somewhere at the root of your page:
<div id="processMessage">
Loading...
<br />
<br />
<img src="/images/ajax-loader.gif" alt="Loading" />
</div>
And style it with the following css:
#updatingDiv
{
width: 75px;
height: 75px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 10px;
display: none;
background-color: #EEEEEE;
border: solid 1px #AAAAEE;
}
Add the following JavaScript:
$(function() {
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function() {
$.blockUI({ message: $('#updatingDiv'), css: { border: 'none', background: 'transparent'} });
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
$.unblockUI();
});
});
You'll need to be sure to include the jQuery library and the blockUI plugin I mentioned earlier.
Of course, you can modify the css/html to suit your needs.

Try this, and don t forget the script manager blog.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger controlid="cbAll" eventname="CheckedChanged" />
</Triggers>
<ContentTemplate>
<asp:updateprogress associatedupdatepanelid="UpdatePanel1" id="updateProgress" runat="server">
<progresstemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage"> Loading...<br /><br />
<img alt="Loading" src="../images/ajax-loader.gif" />
</div>
</progresstemplate>
</asp:updateprogress>
</ContentTemplate>
</asp:UpdatePanel>
Source

`
.divWaiting
{
position: absolute;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding-top: 40%;
}
.divWaiting #div1
{
position: relative;
top: 0;
left: 0;
background-color: White;
width: 180px;
left: 460px;
border: 2px solid #870307;
border-radius: 6px;
text-align: center;
}
Download .gif image for rotating wheel