Elements pushed out of the viewport.

Question

JCarlson 0 Newbie Poster

15 Years Ago

Hey Guys,

I'm working on a Webapplication.
The a page with a left sidebar, and a bottom bar.
What is left shows the different "stages" it's included as an iframe.
So, if you click on a stage, you still see the left sidebar and bottom bar.
And the iframe gets it's new path.

Now first of all, if I'm inside this iframe the both bars aren't counting to the viewport.
Aren't they?

The next thing is, that I got in some of the iframes elements in px size and elements in percentage.
And the problem is if one of these elements which has percentage includes text which is bigger than the element, it's just resizing it, and the element pushes the one with the fixed size out of the viewport.

Isn't there a way to tell this element it should have 100% width or height - px of the fixed element?

Hope you understand what I tried to say :)

Cheers,
JC

user-interface web-design

3 Contributors
6 Replies
379 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Arkinder

Dani AI

Generated 9 Months Ago

Short answer for : the iframe document does not “see” the parent bars — percent heights/widths inside the iframe are relative to the iframe’s own viewport, not to the parent page’s header/left/footer. That makes two common failure modes: (a) a percentage-based element inside the iframe thinks it has 100% and then unwrapped content forces it larger, and (b) table cells (table-layout:auto) will grow to fit content and push nearby fixed-width elements. was right to try overflow, and is right that JS can be used — but the fix depends on what you can change (parent page vs. iframe content) and how old the target browsers are.

Practical options (ordered by least-to-most invasive):

Prevent content from forcing expansion: force wrapping/breaking and use box-sizing so paddings/borders don’t add unexpected size.

/* inside the iframe where long strings occur */
.content { overflow-wrap: break-word; word-break: break-word; box-sizing: border-box; }

If you can change the iframe’s layout, constrain the percent element with calc() so it equals “100% minus X px” (exactly your question).

/* inside the iframe */
.leftArea { width: calc(100% - 460px); max-width: calc(100% - 460px); overflow: auto; }
/* or for height: height: calc(100% - 44px); */

If you can change the parent, position the frames instead of relying on a table. Make the main iframe fill the rectangle: left:150px; top:26px; bottom:44px; right:0; then the iframe’s inner 100% will be correct.
```
/* parent page */
#wpFrame { position: absolute; left:150px; top:26px; right:0; bottom:44px; }
```

Legacy fallback: compute sizes in JS on resize and set the iframe or inner container height/width when calc() isn’t available.

function resize() {
  var h = window.innerHeight || document.documentElement.clientHeight;
  document.getElementById('wpFrame').style.height = (h - 26 - 44) + 'px';
}
window.addEventListener('resize', resize);
resize();

Extra tips: apply overflow:auto to the actual scrolling container (a wrapper div) rather than a table cell, and prefer a wrapper inside the cell for borders so clipping doesn’t hide the border. Test while forcing long unbroken content to verify wrapping/scrolling behavior.

All 6 Replies

leakbali 0 Light Poster

15 Years Ago

Trying to add style to the element, like example below:

div{overflow : auto;}

leakbali 0 Light Poster

15 Years Ago

can you post the complete html and css?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

JCarlson 0 Newbie Poster · Answer 1 · 2011-07-26T20:25:50+00:00

I already added that, but it has no effect.
If I add the table-layout: fixed; the div is cut at the right place and the overflow works.
But this is not a solution since it isn't possible to see the right-border for this div.

Arkinder 93 Posting Pro in Training · Answer 2 · 2011-07-27T00:45:56+00:00

Isn't there a way to tell this element it should have 100% width or height - px of the fixed element?

Not with HTML or CSS alone. I'm sure the fix you're looking for is easy enough. If you have a link to a test page that would be great.

Regards
Arkinder

JCarlson 0 Newbie Poster · Answer 3 · 2011-07-27T15:52:37+00:00

I can't give you a link to this application, my company doesn't allow that.
So I just can give you the important html/css and a picture of the issue.

The mainpage:

<%@ Page Language="c#" CodeBehind="XPert.aspx.cs" AutoEventWireup="false" Inherits="Isonet.TxpEnterprise.XPert" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head runat="server">
	<title>TicketXpert.NET Enterprise Edition</title>
	<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
	<meta name="CODE_LANGUAGE" content="C#">
	<meta name="vs_defaultClientScript" content="JavaScript">
	<meta name="vs_targetSchema" content="">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-icon" href="icon-iphone.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="icon-ipad.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="icon-iphone4.png" />
	<%# FavIcon %>

	<script language="javascript">		
	</script>

	<style type="text/css">
		html, body, form { height: 100%; width: 100%; margin: 0; padding: 0; }
		.frames .left { width: 150px; }
		.frames .top { height: 26px; }
		.frames .bottom { height: 44px; width: 100%; }
		.frames .right { width: 100%; }
		.middle { height: 100%; }
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<table class="frames" id="topframeset" onload="loaded()" width="100%" height="100%"
			style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px"
			border="0" onload="checkPermaLink();return true;" cellspacing="0" cellpadding="0">
			<tr>
				<td width="150" height="26">
					<iframe class="left top" src="Navigation/Bar_Logo.aspx" frameborder="0" scrolling="no"
						name="logo" id="logo"></iframe>
				</td>
				<td rowspan="2" width="100%" height="100%">
					<iframe class="right middle" id="wpFrame" frameborder="0" src="Stage/Workplace/Workplace_Stage.aspx"
						scrolling="no" name="stage" runat="server"></iframe>
				</td>
			</tr>
			<tr>
				<td>
					<iframe class="left middle" src="Navigation/Bar_Left.aspx" frameborder="0" scrolling="no"
						name="nav" runat="server" id="nav"></iframe>
				</td>
				<td>
				</td>
			</tr>
			<tr height="44">
				<td colspan="2">
					<iframe class="bottom" src="Navigation/Bar_Bottom.aspx" frameborder="0" scrolling="no"
						name="bottom" id="bottom"></iframe>
				</td>
			</tr>
		</table>
	<%# GetDefaultStatusScript() %>
	<%# GetPermanentLinkScript() %>
	<%# GetOpenTicketDialogScript() %>
	</form>
</body>
</html>

The iFrame(wpFrame is the parent):

<%@ Page Language="c#" CodeBehind="ServicePortfolio_Stage.aspx.cs" AutoEventWireup="true"
	Inherits="Isonet.TxpEnterprise.ServicePortfolio.Stage.ServicePortfolio.ServicePortfolio_Stage" %>

<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="uc1" TagName="TopMenu" Src="../../../Navigation/TopMenu.ascx" %>
<%@ Register TagPrefix="uc1" TagName="ServicePortfolioTree" Src="~/ServicePortfolio/Controls/ServicePortfolioTree/ServicePortfolioTree.ascx" %>
<%@ Register TagPrefix="uc1" TagName="ServicePortfolioBrowser" Src="~/ServicePortfolio/Controls/ServicePortfolioBrowser/ServicePortfolioBrowser.ascx" %>
<%@ Register TagPrefix="uc1" TagName="ServicePortfolioFilterControl" Src="~/ServicePortfolio/Controls/ServicePortfolioFilterControl/ServicePortfolioFilterControl.ascx" %>
<%@ Register TagPrefix="uc1" TagName="ServicePortfolioDetailsPanel" Src="~/ServicePortfolio/Controls/ServicePortfolioDetailsPanel/ServicePortfolioDetailsPanel.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head runat="server" id="head1">
	<title>Service Portfolio Stage</title>
	<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" />
	<meta content="C#" name="CODE_LANGUAGE" />
	<meta content="JavaScript" name="vs_defaultClientScript" />
	<meta content="" name="vs_targetSchema" />
	<link href="../../../Styles/Global.css" type="text/css" rel="stylesheet" />
	<link href="../../../Styles/Stage.css" type="text/css" rel="stylesheet" />
	<link href="../../../Styles/Menu.css" type="text/css" rel="stylesheet" />
	<meta http-equiv="Page-Enter" content="revealTrans(Duration=0,Transition=6)" />

	<script type="text/javascript" language="javascript" src="../../../../Scripts/jQuery/hoverIntent.js"></script>

	<style type="text/css">
		html, body, table
		{
			height: 100%;
			width: 100%;
	  }
		.ServicePortfolio
		{
			background-color: #7288ac;
			height: 22px;
		}
		.ServicePortfolio TABLE
		{
			border-collapse: collapse;
			border: 1px solid #abc0e7;
		}
		.ServicePortfolio TABLE TD
		{
			height: 22px;
		}
		.ServicePortfolio A
		{
			color: white;
			text-decoration: none;
			font-weight: normal;
			border: #7288ac 1px solid;
			background-color: #7288ac;
			padding-left: 3px;
			padding-right: 3px;
			height: 100%;
			vertical-align: middle;
			background-repeat: no-repeat;
			background-position: center left;
		}
		.ServicePortfolio A IMG
		{
			vertical-align: middle;
		}
		.ServicePortfolio A:hover
		{
			background-color: #64799c;
			border: #00377a 1px solid;
		}
		#uiAddServiceCatalog:hover
		{
			border: #00377a 1px solid;
		}
	</style>
</head>
<body bottommargin="0" bgcolor="#efefeb" leftmargin="0" topmargin="0" rightmargin="0"
	ms_positioning="FlowLayout">

		<form id="Form1" method="post" runat="server">
		<rad:RadScriptManager runat="server" ID="uiRadScriptManager" />
		<table cellspacing="0" cellpadding="0">
			<tr>
				<td align="left" colspan="2" style="background-color: #7288ac; height: 20px;">
					<uc1:TopMenu ID="TopMenu1" runat="server" MenuData="ServicePortfolio_Stage.xml" />
				</td>
			</tr>
			<tr>
				<td colspan="2" style="height: 20px; padding: 10px;">
								<img src="../../Images/service_catalog_title.png" align="absMiddle" alt="" />
								&nbsp;

								&nbsp;
								<asp:Label ID="uiPageTitle" runat="server" CssClass="PageTitle" />
				</td>
			</tr>
			<tr style="padding-left: 10px;">
				<td style="height:40px; padding-left: 10px;">
					<div style="float:left; width:40%;">
						<uc1:ServicePortfolioFilterControl ID="uiServicePortfolioFilterControl" runat="server" />
					</div>
					<div style="float: right; width:50%; padding-right: 5px;">
						<div style="float: right;">
							<rad:RadComboBox runat="server" ID="uiStatusTypes" AllowCustomText="false" AutoPostBack="true"
								OnSelectedIndexChanged="uiStatusTypes_OnSelectedIndexChanged">
							</rad:RadComboBox>
						</div>
						<div style="padding: 5px 5px 0 0; float: right;">
							<asp:Label ID="uiStatusTypesLabel" runat="server" CssClass="ImportantLabel" />
						</div>
						<div style="float: none; clear: both">
						</div>
					</div>
					<div style="float: none; clear: both">
					</div>
				</td>
				<td style="height:40px; padding-left: 10px;"></td>
			</tr>
			<tr style="padding: 3px 5px 0px 10px;">
				<td class="ServicePortfolio" style="height: 20px; width:100%; padding: 3px 5px 0px 10px; background-color: #7288ac;">
					<asp:LinkButton ID="uiAddServiceCatalog" runat="server" Text="AddServiceCatalog" />
				</td>
				<td rowspan="2" style="width: 100%; padding-bottom: 10px;">
					<iframe id="uiPanelFrame" name="uiPanelFrame" marginwidth="0" marginheight="0" runat="server"
						frameborder="no" width="460px" style="border: solid 1px #7288ac;" scrolling="no" height="100%" src="../../Tools/ServicePortfolioDetailsPanel/ServicePortfolioDetailsPanel.aspx" />
				</td>
			</tr>
			<tr>
				<td valign="top" style="padding: 5px 0px 10px 10px; padding-left: 10px; border: solid 1px #7288ac;">
					<asp:Panel ID="uiNoSearchDefinedPanel" runat="server" HorizontalAlign="Center" Visible="False">
						<p>&nbsp;</p>
						<p>&nbsp;</p>
						<p>
							<asp:Label ID="uiNoResult" runat="server" CssClass="LabelGrayed" />
						</p>
					</asp:Panel>
					<div style="height: 100%; z-index: 999">
						<uc1:ServicePortfolioTree ID="uiServicePortfolioTree" runat="server" />
					</div>
						<rad:RadAjaxLoadingPanel ID="uiLoadingPanel" runat="server" Transparency="30">
							<asp:Image ID="Image1" ImageUrl="~/Images/processing.gif" BorderWidth="0px" AlternateText="Loading"
								runat="server" Style="margin-top: 75px;" />
						</rad:RadAjaxLoadingPanel>
				</td>
				<td width="460px"></td>
			</tr>
		</table>
		</form>
</body>
</html>

And finally the treeviewcontrol:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ServicePortfolioTree.ascx.cs"
    Inherits="Isonet.TxpEnterprise.ServicePortfolio.Controls.ServicePortfolioTree.ServicePortfolioTree" %>
<%@ Register TagPrefix="uc1" Namespace="Isonet.WebControlLibrary.TXP.TxpTreeView"
    Assembly="Isonet.WebControlLibrary.TXP" %>
<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<html>
<head id="head1">
    <title>ServicePortfolioTree</title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" />
    <meta content="C#" name="CODE_LANGUAGE" />
    <meta content="JavaScript" name="vs_defaultClientScript" />
    <meta content="" name="vs_targetSchema" />
	<meta http-equiv="Page-Enter" content="revealTrans(Duration=0,Transition=6)" />
    <link href="../../../Styles/Global.css" type="text/css" rel="stylesheet" />
    <link href="../../../Styles/Menu.css" type="text/css" rel="stylesheet" />
    <link href="../../../Styles/TreeView.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        .fixMenu
        {
            position: absolute !important;
        }
    </style>

    <script type="text/javascript" language="javascript" src="../../../Scripts/jQuery/hoverIntent.js"></script>

</head>
<body>
    <rad:RadCodeBlock ID="RadCodeBlock1" runat="server">

    </rad:RadCodeBlock>
    <asp:ScriptManagerProxy ID="scriptManager" runat="server">
        <Services>
            <asp:ServiceReference Path="~/ServicePortfolio/Controls/ServicePortfolioTree/ContextMenuService.asmx" />
            <asp:ServiceReference Path="~/ServicePortfolio/Controls/ServicePortfolioTree/TreeService.asmx" />
        </Services>
    </asp:ScriptManagerProxy>
    <uc1:TxpTreeView ID="uiServicePortfolioTree" runat="server" CausesValidation="False"
        OnClientNodeDropped="onClientNodeDropped" OnClientNodeDropping="onClientNodeDropping"
        OnClientNodeDragging="onClientNodeDragging" CollapseAnimation-Type="None" ExpandAnimation-Type="None"
        OnClientNodeClicked="onClientNodeClicked" OnClientNodeExpanding="toggleHandler"
        OnClientNodeCollapsing="toggleHandler" OnClientNodeDataBound="onClientNodeDataBound" style="width:100%; overflow:scroll; height:100%">
        <WebServiceSettings Path="~/ServicePortfolio/Controls/ServicePortfolioTree/TreeService.asmx"
            Method="GetNodes" />
        <ContextMenus />
        <DataBindings>
            <rad:RadTreeNodeBinding TextField="Name" ValueField="DataId" ToolTipField="Description" />
        </DataBindings>
    </uc1:TxpTreeView>
    <rad:RadTreeViewContextMenu ID="uiTreeContextMenu" runat="server" ClickToOpen="False" OnClientItemOpening="contextMenuItemOpening" EnableScreenBoundaryDetection="true"
        CssClass="fixMenu" ExpandAnimation-Type="None" Skin="Outlook" CollapseAnimation-Type="None" DefaultGroupSettings-ExpandDirection="Up">
    </rad:RadTreeViewContextMenu>
</body>
</html>

I hope it's not to much :)

Arkinder 93 Posting Pro in Training · Answer 4 · 2011-07-27T20:21:18+00:00

You would have to provide all of the CSS and then I would have to put it all together. So without a link this all I can really offer.

Does the container have a set width?
Check the margin and padding to see if it may be pushing things around.
Is this only happening in IE? If so, which versions?
Have you tried other overflow values?

Regards
Arkinder

Elements pushed out of the viewport.

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers