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.
Related
I inserted a required field validator in my inserttemplate of my listview. The validator is suppose to check if a value was selected in the listbox when a user clicks insert. It does what is suppose to do however, I have a search button outside the listview that displays the listview columns and when that is clicked the required field validator is triggered. I only want it to trigger when the insert button is clicked within the listview. Is this possible?
Search Button located in ContentTemplate
<div style="padding-top: 5em; text-align: center; margin-left: auto; margin-right: auto; left: 0; right: 0; width:100%">
<b style="padding-right: .5em">FormSection </b>
<asp:TextBox ID="SectionSearchBox" runat="server"></asp:TextBox>
<b style="padding-left: 1em; padding-right: .5em">SubSection</b>
<asp:TextBox ID="SubSectionSearchBox" runat="server"></asp:TextBox>
<b style="padding-left: 1em; padding-right: .5em">Section Item</b>
<asp:TextBox ID="SectionItemSearchBox" runat="server"></asp:TextBox>
<asp:Button ID="SearchButton" Height="30px" runat="server" Text="Search" OnClick="SearchButton_Click" />
</div>
Required Field Validator located in content template in the listview's insert template
<span style="color:red">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Required Field!" ControlToValidate="formsection"></asp:RequiredFieldValidator>
</span>
<div style="height: auto; width: 250px; overflow: auto; border: solid; border-color: ActiveBorder" >
<asp:ListBox ID="formsection" runat="server" DataSourceID="FormSectionDataSource" DataTextField="FormSection" DataValueField="FormSectionID" AppendDataBoundItems="True" SelectedValue='<%# Bind("FormSectionID") %>' Height="150px">
<asp:ListItem Selected="True" Value=""><- please select -></asp:ListItem>
</asp:ListBox>
</div>
I figured it out, in the code behind I used.
SearchButton.CausesValidation = false;
When the button is clicked it does not trigger the validation.
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>
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>
I'm trying to learn CSS3 and get away from using table tags. Working with Visual studio 2010, .net 4.0 and vb.nt in an asp.net project. I have a listview that i'm trying to get the rows to alternate color. What i have works but only partially. What is rendered to screen is several rows that have wrapping text. The shading is only effecting a small line across the screen.. it does not cover the entire row. Here is the code:
div.row
{
clear: both;
padding-top: 5px;
}
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
div.row span.label
{
float: left; /*width: 100px;*/
text-align: right;
padding-right: 5px;
font-weight: bold;
}
div.row span.cell
{
float: left; /*width: 335px;*/
text-align: left;
}
Here is the markup:
<ItemTemplate>
<div class="row" >
<span class="cell" style="width: 200px;">
<asp:HyperLink ID="lblCalendarDataID" runat="server" NavigateUrl='<%# "CalendarAddEdit.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text='<%# databinder.eval(container.dataitem,"Title")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartDate1","{0:d}")%>' />
-
<asp:Label ID="lblEndDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndDate1","{0:d}")%>' />
</span>
<span class="cell" style="width: 150px;">
<asp:Label ID="lblStartTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartTime1", "{0:t}")%>' />
-
<asp:Label ID="lblEndTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndTime1", "{0:t}")%>' />
</span>
<span class="cell" style="width: 350px;">
<asp:Label ID="lblDescription" runat="server" Text='<%# databinder.eval(container.dataitem,"Description")%>' />
</span>
<span class="cell" style="width: 50px;">
<asp:HyperLink ID="hlDeleteID" runat="server" NavigateUrl='<%# "CalendarDelete.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
Text="Delete" />
</span>
</div>
</ItemTemplate>
anyone know what i'm doing wrong. I tried to use the alternatingItemTemplate but could not get it to shade. In that senerio.. i did a
<div class="row" style="background-color: #C0C0C0;">
any help would be great.
To have your background shading do what you want, try modifying this style:
div.row:nth-child(1n+3)
{
background-color: #C0C0C0;
}
to be this:
div.row:nth-child(1n+3) span
{
background-color: #C0C0C0;
}
to actually apply the background color to the spans that contain the content.
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.