Why does dropdown menu always mess my css layout? - c#

Every time I include a dropdown menu, my css layout mess up. Can someone explain to me why and how to fix it?
Here is my code:
<asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></asp:Label>
<asp:TextBox ID="projnametxt" runat="server"></asp:TextBox><br />
<asp:Label ID="paymentlbl" runat="server" CssClass="editlabels" Text="Payment Type:"></asp:Label>
<asp:DropDownList ID="paymentype" runat="server">
<asp:ListItem Text="Cash" Value="cash"></asp:ListItem>
<asp:ListItem Text="Intallments" Value="installments"></asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="projsumlbl" CssClass="editlabels" runat="server" Text="Project Sum:"></asp:Label>
<asp:TextBox ID="projsumtxt" runat="server"></asp:TextBox><br />
CSS:
.editlabels {
float:left;
width:150px;
margin-right:0.2em;
padding-top:0.4em;
padding-left:20px;
text-align:left;
font-weight:bold;
}
Anything that goes after the dropdown menu goes to the right for some reason.

Only if you remove your margin and padding things would automatically fall in place.

You need to put position: relative on the main container then on any sub ones use position: absolute

Related

Asp image button click event not firing for all row when it is inside a update panel which is inside a grid view

I am facing a strange problem. Inside a grid view I have some image button which is again inside update panel to load some calendar content with partial post back without any page refresh.
This partial postback is working for first few rows but after few rows, lets say around 15 rows the button click event not hitting and only breakpoint going in page load event and the the entire page refresh.
there are huge data in each row but I am for example showing the update panel structure. please help me to fix the issue . I have tried various way to fix it but still facing same issue.
<asp:GridView ID="GVSales" runat="server" AllowPaging="false" AutoGenerateColumns="false" DataKeyNames="UserId" BackColor="#FFFFCC" EmptyDataText="No salesman selected to show" OnRowDataBound="GVSales_OnRowDataBound" OnDataBound="GVSales_AfterDataBound">
<PagerSettings Visible="false" />
<AlternatingRowStyle BackColor="#99CCFF" />
<Columns>
<asp:BoundField DataField="GroupName" Visible="false" />
<asp:TemplateField>
<ItemTemplate>
<table width="100%" border="1px" cellpadding="0" cellspacing="0" style="color: Black; font-family: Arial; text-align: center">
<tr>
<td colspan="18" style="text-align: left">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div>
<div id="divNavigateCal" runat="server" style="float: right; display: none">
<asp:HiddenField ID="hdnDaydiff" runat="server" Value="1" />
<div class="blink" id="BlinkLoad" style="width: 100px; padding-top: 10px; vertical-align: top; display: none">Please Wait...</div>
<asp:ImageButton ID="imgBtnPrevious" AutoPostback="false" runat="server" class="Previous" CommandArgument='<%# Eval("UserId")%>' Customid='<%# Eval("UserId") %>' OnClientClick='<%# "GetCustomerID(" + Eval("UserId") + ");" %>' ImageUrl="~/admin/images/cal_previous.gif" OnClick="imgBtnPrevious_Click" />
<asp:ImageButton ID="imgBtnNext" runat="server" class="Next" CommandArgument='<%# Eval("UserId")%>' Customid='<%# Eval("UserId") %>' OnClientClick='<%# "GetCustomerID(" + Eval("UserId") + ");" %>' ImageUrl="~/admin/images/cal_next.gif" OnClick="imgBtnNext_Click"/>
</div>
<input type="button" class="ShowCalendar" value="Show/Hide Calendar" runat="server" data-id='<%# Eval("UserId")%>' /> <asp:Label ID="lbl_alert1" runat="server" Text="Started this week with low meetings" ForeColor="Red" Font-Bold="true" Width="300" Visible='<%# (Convert.ToBoolean(Eval("Alert1"))) %>'></asp:Label>
<asp:Label ID="Label1" runat="server" Text="Did not create 7 meetings on monday." ForeColor="Red" Font-Bold="true" Width="300" Visible='<%# (Convert.ToBoolean(Eval("Alert2"))) %>'></asp:Label>
<table id="calendar">
<tr>
<td>
</td>
</tr>
</table>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imgBtnPrevious" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="imgBtnNext" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Here I am updating the table calendar content with partial postback for button click event of imgBtnPrevious imgBtnNext which has some calendar like structure.
This code is working fine for 1st 14 - 15 rows but this issue coming after that.
Note:
there are other huge data in each row but here i have shown only the update panel structure for example.
UPDATE
I have investigated the issue further and disabled all update panels to check if update panel is causing issue but I found it not due update panel. The buttons click event is not firing after 14 -15 rows. even tried with row command and still same. what may be the root of this issue? any solution? please help. Whenever i click the button it just reload the page but click event is not hitting the debugger.
I found the issue. OnRowdataBound of grid view there was some code which was appending extra row in that table which was causing this strange issue.

invisible controls in asp.net takes up space in asp.net

I have an ASP.NET web application. I have one TextBox (txtProductName) and one DropDownList(ddlChanges) visible at the time of page load. Also there is a TextBox(txtDeliveryStatus) and a Label (lblDeliveryStatus) invisible at page load.
<asp:TextBox ID="txtProductName" runat="server" CssClass="selectstyle" MaxLength="8" Width="60" />
<asp:Label ID="lblDeliveryStatus" runat="server" Style="visibility: hidden;">Delivery Status : </asp:Label>
<asp:TextBox ID="txtDeliveryStatus" runat="server" CssClass="selectstyle" Style="visibility: hidden;"/>
<asp:DropDownList runat="server" ID="ddlChanges" CssClass="selectstyle" onchange="javascript:ddlChangesChanged();">
<asp:ListItem Text="-- Select -- " Value="-1"></asp:ListItem>
<asp:ListItem Text="Status Change" Value="1"></asp:ListItem>
<asp:ListItem Text="Product Name Change" Value="2"></asp:ListItem>
<asp:ListItem Text="Category Change" Value="3"></asp:ListItem>
</asp:DropDownList>
I will make the Label and TextBoxfor delivery status visible when user selects Status Change from the DropDownList. But the problem is that the Label and TextBox for delivery status are invisible and still they take up some space on the page between visible controls.
How to remove that space of invisible controls?
the reason the white space is still showing after you control.Visible = false is because the "br" newLine tags are remaining. Wrap them with your button tag and hide both to truly remove the white space.
You should use the display attribute:
<asp:Label ID="lblDeliveryStatus" runat="server" Style="display: none;">Delivery Status : </asp:Label>
<asp:TextBox ID="txtDeliveryStatus" runat="server" CssClass="selectstyle" Style="display: none;"/>
For completeness you can check this link.
You can use visible attribute of control.
To hide:
Control.Visibile=false;
Whenever you want to display
Control.Visible=true;

Page jumps to the top of the page even when using an Update Panel

I'm running into a bit of an issue. I have some asp.net controls wrapped in an update panel, but when I click the submit button it jumps to the top of the page. I've read a bunch of posts on here, and they either require use of some javascript or say set the MaintainPagePostion to "true" in the page directive. I tried setting it to true, that did not work. I really don't want to use a javascript script to accomplish this either. I was under the impression that this is one of the benefits to using an update panel. However, the part that I find most confusing, is it used to not do this. I don't remember changing anything on the website that would have caused this. Any help with this problem is appreciated. Thanks.
Here is the code I'm using.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
You can do it in 4 ways :
From Code-behind - Page.MaintainScrollPositionOnPostBack = true;
From Page Directive - MaintainScrollPositionOnPostback="true"
From Web.config - <pages maintainScrollPositionOnPostBack="true" />
Using Javascript. You can use the code from following link. It worked for me -
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx
I think, it's not jump to the top of the page. It's refreshing the page. What's your update panel's UpdateMode? Is it Conditional? If it's conditional, check trigger. ControlID should be button ID and EventName='Click'. Then check the area of Update Panel .
Sample Code Here :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Have you specified the triggers in the update panel? If you specify the triggers in the triggers section then the update panel will update without jumping on top.Also you need to give updatemode = "conditional". It can be done like this:
<asp:UpdatePanel ID="ex" runat="server" UpdateMode="Conditional">
<ContentTemplate>
//your controls here
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="yourbuttonid" />
</Triggers>
</asp:UpdatePanel>
Well thank you to everyone that gave me suggestions. As it turns out the Page Routing is what caused this issue. So all I had to do to get it working was add and ignore line for that page in my RegisterRoutes code block:
void RegisterRoutes(RouteCollection routes)
{
routes.Ignore("Mobile");
routes.Ignore("Booking.aspx*");//<---- This Fixed it.
routes.MapPageRoute("Gallery", "Gallery/{Name}", "~/Gallery.aspx");
routes.Ignore("*");//<---- This is better for me. It acts as a catch all.
}
This helped me solve the issue: http://forums.asp.net/t/1743640.aspx
EDIT
I added the "routes.Ignore("");" code to it to act as a catch all, so I really don't need to ignore "Booking.aspx" specifically. Keep in mind though the order is important here. The Ignore("") needs to be the last one or else none of the other routing will work.
Thanks again Everyone.
Please try PageRequestManager handlers
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
try {
sender._controlIDToFocus = null;
}
catch (e) {
}
}
</script>
I was stuck for a few hours with a similar problem. I was convinced the problem was the UpdatePanel but it ended up being the defaultfocus & defaultbutton attributes in the form tag that was causing the page to jump up to focus the first textbox at the top of the page.
<form id="form1" runat="server" defaultbutton="buttonId" defaultfocus="textboxId">
This is something else to look at when facing this kind of issue.

asp panel default button property is not working in ie for live application

I have a page having multiple buttons and search functionality.I have placed one button and textbox in a panel.After writing seach text if I hit Enter,it works well for all the browsers on local, but for live application this is not working in IE.
The html is:
<asp:Panel ID="pnlSearch" runat="server" CssClass="search" DefaultButton="btnSearch">
<h2>
Explore QualityStocks without logging in</h2>
<asp:TextBox ID="txtSearch" CssClass="txt" runat="server" ToolTip="Stock Ticker" ></asp:TextBox>
<asp:Button TabIndex="0" ID="btnSearch" runat="server" ClientIDMode="Static" CssClass="btn" OnClick="btnSearch_Click" />
</asp:Panel>
What am I missing to do?
Thanks in advance,
Priya

AjaxCalendar Extender not showing Saturdays in Chrome, Firefox or Safari

Having a bit of trouble with the CalendarExtender here on a project. Basically, it's not showing Saturdays in Chrome, Firefox or Safari, but shows them perfectly in IE. Obviously, this is a bit of a problem.
I've tried stuffing around with the CSS to no avail, and so I come here for help! The Saturday's are there, but they're not showing, like this picture (due to my newness, I'm not allowed to post images directly!):
http://i.neoseeker.com/mgv/385085/85/87/calendarerror_display.png
Hopefully you can make it out in the picture, but I actually do have Saturday selected, as confirmed by the popup, but it's useless as it is.
Here is the code, hopefully this can give some insight in to what I'm doing wrong D:
<div id="left">
<h1>FIND EVENT</h1>
<br />
<asp:TextBox ID="txtFind" runat="server" AutoPostBack="True" CssClass="txt" OnTextChanged="txtFind_TextChanged" Width="175px" ForeColor="#999999">Click to Find Date</asp:TextBox>
<asp:CalendarExtender ID="calFindDate" runat="server" TargetControlID="txtFind" Format="dd/MM/yyyy"></asp:CalendarExtender>
<br />
<asp:ListBox ID="lstbxFind" runat="server" AutoPostBack="True" Height="390px" Width="182px" OnSelectedIndexChanged="lstbxFind_SelectedIndexChanged"></asp:ListBox>
<br />
<asp:LinkButton ID="lnkbtnNew" runat="server" CssClass="lnk" OnClick="lnkbtnNew_Click">New</asp:LinkButton>
<asp:LinkButton ID="lnkbtnDelete" runat="server" CssClass="lnk" OnClientClick="return confirm('Are you sure you want to delete this fixture event?')" onclick="lnkbtnDelete_Click">Delete</asp:LinkButton>
<div id="email" runat="server" class="confirm">Event Saved</div>
<asp:LinkButton ID="lnkbtnSave" runat="server" CssClass="lnk" OnClick="lnkbtnSave_Click" ValidationGroup="Group1">Save</asp:LinkButton>
<br />
<br />
<!-- <br />
<asp:Label ID="Label1" runat="server" ForeColor="#F6F6F6" Text="Label"></asp:Label>-->
</div>
Hopefully this makes sense to someone and can at least point me in the right direction. I'm quite new to C# and whatnot, so I am certainly learning on the job here! Thanks.

Categories

Resources