I have a HTML table that has 4 rows
the height of rows are 10% 35% 45% 10%
when I put content in row that have 45% of table height size if the amount of content height be large it decrease other rows height to show the content and all things go wrong what should I do?
Is it possible to increase only the height of that row?
Its not important if the page size increases.
<html>
<head runat="server">
<title> Kut Sharing</title>
</head>
<body >
<div>
<form id="form1" runat="server">
<table width="100%" style="height:100%" border="0">
<tr style="height:10%;background-image:url(Photos/header.png)"" >
<td>
<table width="100%" style=" height:100%" border="0">
<tr>
<td style="width:12%; background-image:url(Photos/header2.gif)"> </td>
<td>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder></td>
</tr>
</table>
</td>
</tr>
<tr style="height:35%; background-image:url(Photos/bluebox.png)"">
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr style="height:45%;">
<td>
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
<br />
<br />
</td>
</tr>
<tr style="height:10%; background-image:url(Photos/footerBg.png)"">
<td> </td>
</tr>
</table>
</form>
</div>
</body>
</html>
Don't use percentage for your heights in this case.
Related
I have a web page I'm trying to set up that will show some Ajax Tables nested inside a CollapsiblePanelExtender. The table is nesting correctly, but the styles are behaving strangely. I recently started using Chrome's Inspector tool, and I think it's pointing me in the right direction, but I'm having trouble understanding why what the Inspector is showing is different from what is in my .aspx file. I've tried this in Firefox as well, and the behavior is similar, so this doesn't seem to be a Chrome-only bug.
I set overflow:hidden; in the style for the Ajax Panel that the tables are directly nested in, but when shown in a browser, a horizontal scrollbar appears, and the Inspector shows that the style has changed to overflow-y:hidden;. What could cause my style to change between the design in my .aspx file and the way it appears in the browser?
It seems the Ajax Panel I specify in my .aspx file is converted into a <div> by the browser. I can accept that. The odd part is, it appears that an additional <div> appears in the Inspector that I don't specify anywhere in my .aspx file. Where could this additional <div> be coming from?
Minimal reproduction of my .aspx file:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site_old.Master" CodeBehind="TEST.aspx.vb" Inherits="MyProject.TEST" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.MyCollapsePanelHeader
{
height:20px;
font-weight: bold;
padding:5px;
cursor: pointer;
vertical-align:middle;
font-size:small;
overflow:hidden;
}
.MyCollapsePanel
{
width:100%;
height:100%;
border: 1px solid #BBBBBB;
border-top: none;
overflow:hidden;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Screenshot of Inspector Output:
I seem to have resolved this issue. I believe it was due to the fact that the CollapsiblePanelExtender and the Panel it was targeting were separated into different cells. After moving the target Panel up into the same cell as the CollapsiblePanelExtender, the scrollbars disappeared.
The <div> element is being duplicated and the overflow-y element is still present. I still don't understand why these appear the way they do. But it seems to be unrelated to why the scrollbar was showing. Since that was the issue I was originally trying to fix, I guess this counts as a solution.
Working .aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I have a TextBox and a Button. I put them inside the first row of a table. What I want is to have the Button fixed at 60px and the TextBox to take rest of the space. The second row of this table has a TreeView that should expand to full table width. Here's what I have tried:
<div class="leftCol">
<table style="width: 100%;">
<tr>
<td>
<asp:TextBox runat="server" Width="100%" CssClass="FilterTextBox" />
</td>
<td>
<asp:Button runat="server" Width="60" Text="Filter" ID="btnFilter" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:TreeView runat="server" Height="100%" Width="100%" CssClass="leftTreeView" />
</td>
</tr>
</table>
</div>
Here's the simplistic CSS:
.FilterTextBox
{
display: block;
width: 100%;
height: 100%;
}
The TreeView appears okay, but the TextBox doesn't seem to expand to full width of the div (minus Button's width).
set the TD width that contains the button to 60 and the other cell will take up the rest of the space.
<div class="leftCol">
<table style="width: 100%;">
<tr>
<td>
<asp:TextBox runat="server" Width="100%" CssClass="FilterTextBox" />
</td>
<td width="60">
<asp:Button runat="server" Width="60" Text="Filter" ID="btnFilter" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:TreeView runat="server" Height="100%" Width="100%" CssClass="leftTreeView" />
</td>
</tr>
</table>
This should be dead easy. How do you center a radiobuttonlist? It didn't used to be hard.
The below HTML does not work. What am I missing?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%">
<tr>
<td style="text-align: center">
<asp:RadioButtonList ID="radUserType" runat="server"
RepeatDirection="Horizontal">
</asp:RadioButtonList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
RepeatLayout="Flow"
Renders the RadioButtonList in a span rather than a table.
Try using td attributes :
<td align="center">
<asp:RadioButtonList ID="radUserType" runat="server"
RepeatDirection="Horizontal">
</asp:RadioButtonList>
</td>
I'm hardly trying to make a DIV container fitting and resizing according to the parent TD and not according to the content of the DIV.
Here's what I want to achieve:
The parent Table should always fit into screen, therefore the width is set to 100%
The left column is fixed size to display the menu
The right column (content) should resize according to browser width
In the content TD, I use the DIV tag for scrolling the content table (overflow auto)
I've expected the DIV to scroll the content (horizontally) and resize its width upon the parent TD. But the DIV extends and the IE scrollbars are used instead of DIV scrollbars.
Here is what I've tried so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1" width="100%">
<colgroup>
<col width="200px" />
<col width="*" />
</colgroup>
<tr>
<td>
<div style="width:100px;">
Left header
</div>
</td>
<td>
right header
</td>
</tr>
<tr>
<td>
Menu
</td>
<td>
<!-- this DIV should scroll! -->
<div style="overflow:auto; width:100%;">
<table border="1" width="100%">
<tr>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
It might be possible to do so with a layout using DIV tags only. But due to the given master page layout and the asp:GridView, I cannot change that.
Also it should still work with old IE6.
Can somebody help me please?
Update
Could solve the problem myself. If someone is interested, here's the solution:
added the CSS style table-layout:fixed; to the root table.
Shouldn't the width="100%" be on the TD entry instead of the child div and grand-child table?
Like?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table border="1" width="100%">
<colgroup>
<col width="200px" />
<col width="*" />
</colgroup>
<tr>
<td>
<div style="width:100px;">
Left header
</div>
</td>
<td>
right header
</td>
</tr>
<tr>
<td>
Menu
</td>
<td style="width:100%;>
<!-- this DIV should scroll! -->
<div style="overflow:auto; width:100%;">
<table border="1" width="100%">
<tr>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
<td>
SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I am making this web page and I want the table on the right to have 100% height, yet when I view it in the browser, it isn't maximized vertically. You can view it here:
http://wpiix10.x10.mx/ifoot8.htm
See the pink background table on the right side? It should be 100% of the web page's height yet it's small.
Here's the code I'm using:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" bgcolor="#C0C0C0" style="position: absolute; left: 0; bottom: 0">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="position: absolute; bottom: 0" bgcolor="#00FF00" height="23" bordercolor="#FFFFFF">
<!-- MSTableType="nolayout" -->
<tr>
<td> </td>
</tr>
</table>
<div align="right">
<table border="1" width="200" align="right" cellspacing="0" cellpadding="0" bgcolor="#FF00FF" height="100%">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </td>
</tr>
</table>
</body>
</html>
The table has height="100%" ... so what's the problem?
You need to change
<div align="right">
to
<div align="right" style="height: 100%;">