asp panel position inside a html panel - asp.net

Im trying to put a asp.panel inside an HTML table. but the table height of 100% doesn't fill up the space of the asp.panel. Does anybody have a solution for this?
This is a sample of my master page:
<table id="TableContent" bgcolor="#565757" border="0" height="100%" cellspacing="5" cellpadding="0">
<div id="content">
<asp:contentplaceholder id="MainContent" runat="server">
<tr>
<td><!-- Page-specific content will go here... --></td>
</tr>
</asp:contentplaceholder>
</div>
</table>
and this is the code for the panel.
<td align="center">
<form id="kunstenaars" runat="server">
<asp:Panel ID="Panel1" runat="server" BackColor="#565757" BorderColor="White" EnableTheming="False" EnableViewState="False" ScrollBars="None" style="position: relative; left: auto; width: auto; height: auto; z-index: 2;">
<asp:Literal ID="litKunstkoop" runat="server"></asp:Literal>
<asp:HiddenField ID="hdSoort" runat="server" />
<asp:SqlDataSource ID="Afmetingen_Datasource" runat="server" ConnectionString="<%$ ConnectionStrings:cnnSmelikStokkingWeb %>" SelectCommand="SELECT [Afmeting] FROM [Afmetingen] ORDER BY [Afmeting]" ProviderName="System.Data.SqlClient"></asp:SqlDataSource>
<asp:Label ID="lblAfmeting" runat="server" BackColor="#565757" Font-Bold="True" Font-Names="Verdana" Font-Size="Small" ForeColor="White" style="z-index: 1; left: 277px; top: 77px; position: absolute; width: 157px" Text="Kies afmeting" Visible="False"></asp:Label>
<asp:HiddenField ID="hdFotoCount" runat="server" Visible="False" />
<asp:HiddenField ID="hdTaal" runat="server" />
<asp:TextBox ID="van" runat="server" BackColor="#565757" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" ForeColor="White" ReadOnly="True" style="z-index: 1; top: 79px; text-align: center; position: absolute; align-content: center;width: 31px; left: 630px" BorderColor="#999999">1</asp:TextBox>
<asp:TextBox ID="streep" runat="server" BackColor="#565757" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" ForeColor="White" ReadOnly="True" style="z-index: 1; top: 79px; text-align: center; position: absolute; align-content: center;width: 12px; left: 664px" BorderColor="#999999">-</asp:TextBox>
<asp:TextBox ID="tm" runat="server" BackColor="#565757" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small" ForeColor="White" ReadOnly="True" style="z-index: 1; top: 79px; text-align: center; position: absolute; align-content: center;width: 31px; left: 679px;" BorderColor="#999999">20</asp:TextBox>
<asp:ImageButton ID="btBW" runat="server" ImageUrl="Images/Goback.png" style="z-index: 1; left: 611px; top: 80px; position: absolute; height: 16px; width: 16px" />
<asp:ImageButton ID="btFW" runat="server" ImageUrl="Images/Goforward.png" style="z-index: 1; left: 723px; top: 79px; position: absolute; height: 16x; width: 19px" />
</asp:Panel>
</asp:Panel>
</form></td>
I hope that somebody has a solution for this.

Your content, from the aspx page, will replace the asp:contentplaceholder. Don't add other content inside the placeholder on the master page. Just put the placeholder text where you want your content to go.
<table>
<tr><td>
<asp:contentplaceholder />
</td></tr>
</table>

you can move the ContentPlaceHolder inside the table cell also div can't be nest direct inside a table
<div id="content">
<table id="TableContent" bgcolor="#565757" border="0" height="100%" cellspacing="5" cellpadding="0">
<tr>
<td>
<!-- Page-specific content will go here... -->
<asp:contentplaceholder id="MainContent" runat="server">
</asp:contentplaceholder>
</td>
</tr>
</table>
</div>

Related

How do I get asp:Label to take up space before having text assigned

I have 2 buttons that need to be on the right hand side of a form and have a label on the right. The problem I am running into is that once the action has been performed, the label will read "successfully ...." or "error couldn't..." and it screws up my layout. when the form first appears it screws up my button layouts because the label is empty, then when the action has been performed, my label gets populated with text and then pushes my buttons into the right place. Is there a way to to keep my buttons in place?
Here is my layout:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dropDownList" style="position: relative;" runat="server">
<label>
Select New File:
</label>
<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" DataTextField="Display"
DataValueField="FileID" OnPreRender="ddl_PreRender" Width="524px" OnSelectedIndexChanged="ddlCaseFiles_SelectedIndexChanged" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ddlCaseFiles"
ToolTip="Casefile Required" InitialValue="-1" Text="*" Display="Dynamic" />
<ajaxToolkit:ListSearchExtender ID="ddlExtCaseFiles" runat="server" PromptCssClass="ListSearchExtenderPrompt"
TargetControlID="ddlCaseFiles" BehaviorID="ddlExtCaseFiles" Enabled="True" />
<br />
/////////////////////////area of interest
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="position: relative;
float: left; margin-left: 450px;" OnClientClick="parent.$.fancybox.close();" />
<asp:Button ID="btnMoveCaseFile" runat="server" Text="" Style="position: relative;
float: right; margin-right: 63px; margin-left: -45px; top: 0px; left: 0px; width: 98px;"
OnClick="btnMoveCaseFile_Click" />
<asp:Label runat="server" ID="lblStatus"></asp:Label>
<br />
///////////////////////////////////////////////
</div>
</ContentTemplate>
I'm trying to get the buttons to light up under the dropdownlist and have the Label show on the same line as the buttons but on the left. (this code has the label on a new line because I gave up)
You can set your controls in table cells , and fix the width of cells.
Nota : you can fix width with css class.
<table>
<tr>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="position: relative; float: left; margin-left: 450px;" OnClientClick="parent.$.fancybox.close();" />
</td>
<td>
<asp:Button ID="btnMoveCaseFile" runat="server" Text="" Style="position: relative; float: right; margin-right: 63px; margin-left: -45px; top: 0px; left: 0px; width: 98px;"
OnClick="btnMoveCaseFile_Click" />
</td>
<td>
<asp:Label runat="server" ID="lblStatus"></asp:Label>
</td>
</tr>
</table>

Run time issue in ASP.Net

I am new to web development in ASP.NET and I have just designed a small website. Though in design time I have my controls placed correctly, at run time the controls appear overlapped. I have seen the source view and the values for left and top were fine. Have a look into these screen shots:
At design time:
At run time in Chrome and IE:
In Mozilla:
My code in source view for the text boxes:
<asp:TextBox ID="TextBox1" runat="server"
style="z-index: 1; left: 102px; top: 339px; position: absolute"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"
style="z-index: 1; left: 247px; top: 327px; position: absolute"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"
style="z-index: 1; left: 248px; top: 360px; position: absolute"></asp:TextBox>
There might be a simple solution, but since I am new to this, please let me know what has to be done.
I would reorganize your markup a bit. You could try:
<div style="position: absolute; left: 102px; top: 327px;">
<div id="left_column" style="float:left">
<asp:TextBox ID="TextBox1" runat="server" />
</div>
<div id="right_column" style="float: left; margin-left: 15px;">
<asp:TextBox ID="TextBox2" runat="server" />
<asp:TextBox ID="TextBox3" runat="server" />
</div>
</div>
If you want more spacing between the elements add some margin og padding.

How to align objects vertically in ASP.NET?

I have been messing around with asp.net for awhile now and always have issues aligning objects with various heights on the same row. For example, in this case, I have a search label, a text field, then a image button. What is the "proper way" to get these three items to align properly?
My existing code:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Panel VerticalAlign="Center" runat="server">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label>
<asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large"
Height="30px" style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox>
<asp:ImageButton ID="ImageButton2" runat="server" Height="45px"
ImageUrl="~/Images/SearchButton.PNG" style="margin-left: 18px; margin-top: 0px"
Width="95px" />
</asp:Panel>
</asp:Content>
The easiest is using CSS or tables. I put a div around with a height and vertical align to the top. CSS Reference
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Panel ID="Panel1" VerticalAlign="Center" runat="server">
<div style="height: 40px; vertical-align: top">
<div style="padding-top: 10px; float:left;">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label>
</div>
<div style="padding-top: 5px; float:left;">
<asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" Height="30px"
Style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox>
</div>
<div style="padding-top: 5px; float:left;">
<asp:ImageButton ID="ImageButton2" runat="server" Height="45px" ImageUrl="~/Images/SearchButton.PNG"
Style="margin-left: 18px; margin-top: 0px" Width="95px" />
</div>
</div>
</asp:Panel>
</asp:Content>
i had the same problem and i think that using a table or a div only to align the Textbox it's excessive.
I solved simply:
<asp:TextBox ID="TextBox2" runat="server" Width="60px"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/imatges/imgNou.png"
CssClass="style3" ImageAlign="AbsBottom" />
And adding the margin-top in Design view, the IDE added:
.style3
{
margin-top: 6px;
}

Multiple ASP modal popups on one page

We have a working modal popup on an asp.net page, and need to add another one. A linkbutton opens the first one.
But if we try adding code for another linkbutton to open a second popup, which will use another mp extender control, neither one of them work. If we then remove the second popup and extender code, it works again.
I posted this question before but got an answer about using them in a gridview, which is not what is going on. This issue is not that complicated, just the fact that we can't get two separate popups working on a page. Are there any bugs or anything that would be preventing this from working?
The code below is for the working popup. It seems logical that if we add code that works to a page and give the controls new names, it should work as well, right? Anyway, a little help?
<!--modal popup extender-->
<ajax:ModalPopupExtender ID="mpe1" runat="server"
DropShadow="false"
TargetControlID="btn1"
PopupControlID="mp1"
BehaviorID="ModalPopBehavior"
CancelControlID="btnCancel">
</ajax:ModalPopupExtender>
<!--modal panel-->
<asp:Panel ID="mp1" runat="server" EnableViewState="true" Visible="False" Width="290px" height="140px"
BorderWidth="4px" BorderStyle="Ridge" BorderColor="Control" style="display:none;" >
<asp:Table ID="Table1" runat="server" BorderStyle="None" Width="290px" Height="140px" BackColor="#ffffee">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="TableCell1" runat="server">
<asp:Label ID="lbl1" runat="server" CssClass="PanelLabel"
Style="left: 60px; position: absolute; top: 4px" Text="label1"
ForeColor="#0000C0" />
<asp:Label ID="lbl2" runat="server" CssClass="StdLabel"
Style="left: 6px; position: absolute; top: 30px" Text="label2" />
<asp:TextBox ID="txt1" runat="server" CssClass="StdTextbox"
Style="left: 6px; position: absolute; top: 44px" Width="120px" />
<asp:Label ID="lbl3" runat="server" CssClass="StdLabel"
Style="left: 160px; position: absolute; top: 30px"
Text="label3" />
<asp:TextBox ID="txt2" runat="server" CssClass="StdTextbox"
Style="left: 160px; position: absolute; top: 44px" Width="120px" />
<asp:Button ID="btnOK" runat="server"
Style="font-family: Tahoma; font-size: 11px; color: Navy; left: 60px;
position: absolute; top: 86px" Text="OK" Width="90px" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="50px"
style="font-family: Tahoma; font-size: 11px; color: Navy; top: 86px; left: 170px;
position:absolute;"/>
</asp:TableCell>
</asp:TableRow>
</asp:Table></asp:Panel>
In the page there is also the hidden button for the popup. it looks like this:
<!--hidden button for modal popup -->
<asp:Button ID="btn1" visible="true" runat="server" Style="display: none" Enabled="false" />
ok so the problem was that the behaviorID property for each extender had to be unique. Once I set the behaviorID to the same name as the ID in each extender, they all work. Of course all other controls on all popup objects themselves must also be unique.

Modalpopup issue with Frame

I have a problem with my modalpopup style when I use frame in my page. I don't get trouble with modalpopup style if I don't use frames in page. Following HTML code and CSS work in normal aspx without a problem. In a page with frame, panel gets top of the page and background colour (grey colour) covers just half of page. And link button goes to right of page. Why does this happen?
CSS style:
/* dialog frame */
.modal-dialog
{
position:absolute;
}
/* dialog contents container */
.modal-dialog .container
{
font-family:tahoma,helvetica,arial,sans-serif;
font-size:11px;
width:340px;
border:solid 1px #99aabd;
background-color:#F2F9FF;
}
/* dialog header */
.modal-dialog .header
{
background:url(img/sprite.gif) repeat-x 0px -1100px;
height:25px;
padding-top:5px;
}
/* dialog header message */
.modal-dialog .header .msg
{
vertical-align:middle;
padding-left:6px;
color:#fff;
font-size:12px;
font-weight:bold;
}
/* dialog body */
.modal-dialog .body
{
height:40px;
background-color:#F2F9FF;
}
/* dialog body message */
.modal-dialog .body h2
{
padding-top:10px;
background-color: #F2F9FF;
font-size:14px;
text-align:center;
font-weight:normal;
}
/* dialog footer */
.modal-dialog .footer
{
height:30px;
background-color: #F2F9FF;
}
/* dialog footer buttons */
.modal-dialog .footer .right
{
background-color: #F2F9FF;
float:none;
text-align:center;
padding-bottom:6px;
}
/* dialog footer checkbox */
.modal-dialog .footer .left
{
background-color: #F2F9FF;
float:left;
text-align:left;
padding-bottom:6px;
padding-left:6px;
}
/* dialog close */
.modal-dialog .close
{
right:4px;
background: url(img/icons.gif) no-repeat -732px 0px;
width:16px;
cursor:hand;
position:absolute;
top:5px;
height:16px;
}
/* dialog close hover */
.modal-dialog .close:hover { background: url(img/icons.gif) no-repeat -749px 0px; }
/* modal overlay */
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
}
Page's code. It works properly when I don't use frame:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<TABLE id="Table1" style="Z-INDEX: 101; POSITION: absolute; WIDTH: 685px; HEIGHT: 192px; TOP: 45px; LEFT: 8px"
cellSpacing="1" cellPadding="1" width="685" border="0">
<TR>
<TD noWrap>
<TABLE id="Table2" cellSpacing="0" cellPadding="2" width="100%" border="0">
<TR>
<TD style="WIDTH: 129px; HEIGHT: 6px" noWrap><asp:label id="Label3" runat="server">Personel Tipi</asp:label></TD>
<TD style="HEIGHT: 6px" noWrap><asp:dropdownlist id="cboID_PERSONAL_TYPE" runat="server" Width="200px" AutoPostBack="True"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap><asp:label id="Label1" runat="server" Width="112px"> Personel Name</asp:label></TD>
<TD noWrap><asp:textbox id="txtDS_NAME" runat="server" Width="200px" BorderColor="LightSteelBlue" BorderWidth="1px" Height="20px" BorderStyle="Solid"></asp:textbox></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap></TD>
<TD noWrap>
<asp:checkbox id="chkActive" runat="server" Text="Active"></asp:checkbox></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap><asp:label id="Label4" runat="server" Width="112px">Temsilci No</asp:label></TD>
<TD noWrap><asp:textbox id="txtTEMSILCI_NO" runat="server" Width="80px" BorderColor="LightSteelBlue" BorderWidth="1px"
Height="20px" BorderStyle="Solid" MaxLength="10"></asp:textbox></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap><asp:label id="Label2" runat="server" Width="112px">Director (TSM)</asp:label></TD>
<TD noWrap><asp:dropdownlist id="cboID_DIRECTOR" runat="server" Width="200px"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap>
<asp:label id="Label5" runat="server" Width="136px">Expert. (TC)</asp:label></TD>
<TD noWrap>
<asp:dropdownlist id="cboID_EXPERT" runat="server" Width="200px"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px; HEIGHT: 14px" noWrap>
<asp:label id="Label31" runat="server" Width="88px">Type</asp:label></TD>
<TD noWrap style="HEIGHT: 14px">
<asp:dropdownlist id="cboID_Type" runat="server"></asp:dropdownlist></TD>
</TR>
<TR>
<TD style="WIDTH: 129px" noWrap>
<asp:label id="Label6" runat="server" Width="88px">Rut</asp:label></TD>
<TD noWrap>
<asp:dropdownlist id="cbo_ID_RT" runat="server"></asp:dropdownlist></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD noWrap align="right" style="HEIGHT: 21px"><asp:button id="btnSave" runat="server" Width="65px" Text="Save" CssClass="MY_BUTTON"></asp:button>
<asp:button id="btnCancel" runat="server" Width="65px" Text="Delete" CssClass="MY_BUTTON"></asp:button> <asp:button id="btnDelete" runat="server" Width="65px" Text="Sil" CssClass="MY_BUTTON"></asp:button></TD>
</TR>
<TR>
<TD noWrap align="right" height="20"><asp:label id="lblStatus" runat="server" Height="16px" ForeColor="Red" Font-Bold="True"></asp:label></TD>
</TR>
<TR>
<TD noWrap>
</TD>
</TR>
</TABLE>
<asp:label id="Label29" style="Z-INDEX: 103; POSITION: absolute; TOP: 8px; LEFT: 8px" runat="server"
Width="168px" Height="8px" ForeColor="#0000C0" Font-Bold="True" Font-Size="12pt">Parametreler > Bayi ></asp:label><asp:label id="Label30" style="Z-INDEX: 102; POSITION: absolute; TOP: 8px; LEFT: 184px" runat="server"
Width="200px" Height="8px" ForeColor="#C00000" Font-Bold="True" Font-Size="12pt">Personel / Temsilci Girişi</asp:label><asp:textbox id="hdnID" style="Z-INDEX: 104; POSITION: absolute; TOP: 8px; LEFT: 472px" runat="server"
Width="33px" BorderColor="LightSteelBlue" BorderWidth="1px" BorderStyle="Solid" Visible="False"></asp:textbox>
<cc1:modalpopupextender ID="mdlDelete" runat="server"
PopupControlID="pnlDelete" BackgroundCssClass="modalBackground" OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel"
TargetControlID="btnDelete">
</cc1:modalpopupextender>
<asp:Panel ID="pnlDelete" runat="server" CssClass="modal-dialog" style="display:none">
<div class="frame">
<div class="container">
<div class="header">
<div class="msg">Warning</div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('mdlDelete').hide(); return false;" />
</div>
<div class="body">
<h2>Are u sure?h2>
</div>
<div class="footer">
<div class="right">
<asp:Button
ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" />
<input id="btnDeleteCancel" type="button" value="No" style="width:40px" />
</div>
</div>
</div>
</div>
</asp:Panel>
</div>
</form>
</body>
Background color: I assume, that only the Frame will be grey. This is OK, since you should not change HTML Code in another Frame.
Position: The Modal Extender calculates the dialog position. So your CSS values are ignored. Use the Property X and Y on the modalpopupextender to set a fixed position.
<cc1:modalpopupextender ID="mdlDelete" runat="server"
PopupControlID="pnlDelete" BackgroundCssClass="modalBackground"
OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel"
TargetControlID="btnDelete" X="10" Y="10" />
OK,i solved my problem.I am migrating my project from 2003 to 2008.I copied my page to 2008,not created new page.So when i create new page in 2008,page runs without problem.

Resources