Elements pushed out of the viewport.

Question

JCarlson 0 Newbie Poster

13 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

web-design

3 Contributors
6 Replies
349 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Arkinder

leakbali 0 Light Poster

13 Years Ago

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

div{overflow : auto;}

leakbali 0 Light Poster

13 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="http://schemas.microsoft.com/intellisense/ie5">
	<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="http://schemas.microsoft.com/intellisense/ie5" 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="http://schemas.microsoft.com/intellisense/ie5" 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