Develop Reference

Element size inside div

So i have a div with a textbox inside and for some reason i can't make the textbox wider than 50% of the div width. I tried to set the width manually in pixels but it will never grow more than that. In the design interface it grown normally but when i run the project it doesn't. Tried in all browsers, always the same result.
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<asp:TextBox ID="TBDes" runat="server" Height="25px" Width="100%"></asp:TextBox>
</div>

The width attribute on an input element is only used for images.
You have to apply the width as a style.
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<asp:TextBox ID="TBDes" runat="server" Height="25px" style="width: 100%"></asp:TextBox>
</div>
<div style="width:100%;text-align:left;display:table" runat="server" id="DIVAdd">
<input type="textBox" ID="TBDes" runat="server" Height="25px" style="width: 100%" />
</div>
On the W3 Input Attribute Chart you can see what attributes apply to which type of input.

Ok so basically i was using a MS Template and in the css page Site.css was this
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}

How put the button beside the textbox directly?

As you know, in ASP.NET, there is a simple space between the button and textbox. I want to remove this space and put them besides each other directly without any space. How to do that?
My CSS file:
.input, .button {
margin:-10px 0px 0px 0px;
}
My ASP.NET code:
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" CssClass="button" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" CssClass="input" runat="server"></asp:TextBox>
</div>
</form>
And when I rendered it in IE 8 Browser, nothing happened. I don't know why. Any help?

That has less to do with ASP.NET and more to do with the default CSS values a browser applies to the elements on the page.
That being said, adding a CSS rule of...
input, button {
margin:0;
}
should work...
EDIT:
If you don't want to use margins, make sure you do not add a line return in your markup:
<asp:Button ID="Button1" CssClass="button" runat="server" Text="Button" /><asp:TextBox ID="TextBox1" CssClass="input" runat="server"></asp:TextBox>
That line return gets rendered as a space by most browsers.
Otherwise, something like this works: http://jsfiddle.net/a4TPt/

Your layout details would be helpful. But I think margin: -5 0 0 0 on the control on right side should work for what you are looking for. You need to adjust -5 to correct value as per your needs.

Asp.Net popup error message

Is there a way I can display an error message in a popup box? I'm using Asp.Net (C#), and on our webpage, if an order goes throug incorrectly we display an error message. Now, we would like to be able to do so using some sort of pop-up method (maybe Ajax?) - it should be able to take a string value to display the error message.

For a simple approach, you can have a script block that contains alert("your error message"). If you want the popup to be styled as the rest of your website then you could render your error message into a div element and use a jQuery dialog to display it as a modal dialog within your page.

I have used Ajax to accomplish this myself.
Using the ModalPopupExtender and setting the PopupControlID to an Asp Panel, I usually put this into a User Control so it can be easily used through a website.
However below is a snippet of the asp.net code
<div class="modalPopupAlign">
<asp:LinkButton ID="lnkConfirm" Style="display: none;" CausesValidation="false" runat="server" PostBackUrl="#">Confirm</asp:LinkButton>
<ajax:ModalPopupExtender ID="lnkConfirm_ModalPopupExtender" runat="server" TargetControlID="lnkConfirm" PopupControlID="pnlConfirmation" BackgroundCssClass="modalBackground" DropShadow="true" RepositionMode="None">
</ajax:ModalPopupExtender>
<div id="pnlConfirmation" class="modalPopup" style="display: none;">
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="modalPopupContainerAlign">
<div>
<asp:Image ID="imgIcon" CssClass="modalPopupImage" runat="server" />
<asp:Label ID="lblMessage" CssClass="modalPopupMessage" runat="server"></asp:Label>
<div class="modalPopupTextbox"><asp:TextBox ID="txtValue" Width="200px" MaxLength="100" Visible="false" runat="server"></asp:TextBox></div>
<asp:Button ID="btnAction" runat="server" CausesValidation="false" CssClass="defaultButton" Text="OK" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
It does take some time to get it working properly as I have had a few errors with the script manager, which I currently have setup in a master page.
Just might give you a direction to head for, and the CSS can help shape and colour the message box.
Although this is a complex way in some respect but has many uses.

You can do this with simple javascript like this...
alert("my error message");
Here is more info on using javascript

date and time control format

I have used Ajax calender extender to display date in Date_Box and then numeric up down extenders to chose time...
Here is my code:
<td bgcolor="#969ECD">
<asp:TextBox ID="Date_Box" runat="server" Width="85px"></asp:TextBox>
<br />
<div style="height: 4px"></div>
<asp:TextBox ID="txtHour" runat="server" ></asp:TextBox>
<ajaxToolkit:NumericUpDownExtender ID="txtHour_NumericUpDownExtender"
runat="server" Enabled="True" Maximum="12" Minimum="1"
TargetControlID="txtHour" Width="70" >
</ajaxToolkit:NumericUpDownExtender>
<asp:TextBox ID="txtMinute" runat="server"></asp:TextBox>
<ajaxToolkit:NumericUpDownExtender ID="txtMinute_NumericUpDownExtender"
runat="server" Enabled="True" Maximum="59" Minimum="1"
TargetControlID="txtMinute" Width="70" >
</ajaxToolkit:NumericUpDownExtender>
<asp:TextBox ID="txtDayPart" runat="server"></asp:TextBox>
<ajaxToolkit:NumericUpDownExtender ID="txtDayPart_NumericUpDownExtender"
runat="server" Enabled="True" RefValues="AM;PM" TargetControlID="txtDayPart" Width="70">
</ajaxToolkit:NumericUpDownExtender>
<asp:Button ID="Update" runat="server" Text="Update"
onclick="Update_Click1" />
<br />
</td>
</tr>
</table>
</div>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="Date_Box" PopupPosition="TopRight" >
</ajaxToolkit:CalendarExtender>
Now functionality wise the only problem is when i write something in the textbox other than the normal format and click the update button it lets me accept the values instead it should not let it write anything else other than the date format.. eg no alphabets in the textbox..
This i can still figure out, using some exception message...
but now the main problen is the look of the control. The numeric extender buttons are too big and the line format is not good, also there is lots of space between the three time textboxes... is there a way to make this look neat>>>
How can i solve the problem... any suggestions???!
here is the image link http://www.freeimagehosting.net/image.php?05945773e0.jpg
alt text

The easiest thing to do is to assign your numeric extenders a CssClass property, and use css to fix the layout issues.

You can use asp:RegularExpressionValidator to validate textbox contents:
http://msdn.microsoft.com/en-us/library/eahwtc9e.aspx
The documentation for NumericUpDown specifies you can use custom images for the updown buttons:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/NumericUpDown/NumericUpDown.aspx

You may want to try the FilteredTextbox from the ajax control kit found here.
It will prevent typing into the box if they do not meet certain criteria.
Hope this helps
Tom

UpdatePanel Slowness in IE

I'm working on an ASP.Net application and working to add some Ajax to it to speed up certain areas. The first area that I am concentrating is the attendance area for the teachers to report attendance (and some other data) about the kids. This needs to be fast.
I've created a dual-control set up where the user clicks on the icon and via Javascript and Jquery I pop up the second control. Then I use a __doPostBack() to refresh the pop up control to load all of the relevant data.
Here's a little video snippet to show how it works: http://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f (:21 and ignore the audio background).
It's slower than I would like at 2-3 seconds in Firefox and Chrome for each "popping up", but it's entirely unworkable in IE, taking easily 7-8 seconds for each time it pops up and loads. And that disregards any time that is needed to save the data after it's been changed.
Here's the javascript that handles the pop-up:
function showAttendMenu(callingControl, guid) {
var myPnl = $get('" + this.MyPnl.ClientID + #"')
if(myPnl) {
var displayIDFld = $get('" + this.AttendanceFld.ClientID + #"');
var myStyle = myPnl.style;
if(myStyle.display == 'block' && (guid== '' || guid == displayIDFld.value)) {
myStyle.display = 'none';
} else {
// Get a reference to the PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Unblock the form when a partial postback ends.
prm.add_endRequest(function() {
$('#" + this.MyPnl.ClientID + #"').unblock({ fadeOut: 0});
});
var domEl = Sys.UI.DomElement;
//Move it into position
var loc = domEl.getLocation(callingControl);
var width = domEl.getBounds(callingControl).width;
domEl.setLocation(myPnl, loc.x + width, loc.y - 200);
//Show it and block it until we finish loading the data
myStyle.display = 'block';
$('#" + this.MyPnl.ClientID + #"').block({ message: null, overlayCSS: { backgroundColor:'#fff', opacity: '0.7'} });
//Load the data
if(guid != '') { displayIDFld.value = guid; }
__doPostBack('" + UpdatePanel1.ClientID + #"','');
}
}}
First, I don't understand why the __doPostBack() introduces such a delay in IE. If I take that and the prm.add_endRequest out, it's VERY speedy as no postback is happening.
Second, I need a way to pop up this control and refresh the data so that it is still interactive. I'm not married to an UpdatePanel, but I haven't been able to figure out how to do it with a Web Service/static page method. As you can see this control is loaded many times on the same page so page size and download speed is an issue.
I'd appreciate any ideas?
Edit: It's the same in IE 6 or 7. I'm thinking it has to do with IE's handling of the UpdatePanel, because the same code is much faster in FF and Chrome.

If speed/performance is a major concern for you, I would strongly suggest against UpdatePanels, as they cause a full page postback that drags the ViewState in the header, among other crap, and forces the page to go through the whole life cycle every time (even though the user doesn't see this).
You should be able to (relatively easily) use PageMethods to accomplish your task.
// In your aspx.cs define the server-side method marked with the
// WebMethod attribute and it must be public static.
[WebMethod]
public static string HelloWorld(string name)
{
return "Hello World - by " + name;
}
// Call the method via javascript
PageMethods.HelloWorld("Jimmy", callbackMethod, failMethod);

Its a known issue with IE only, see KB 2000262. A workaround/fix can be found here. I worked with them on the script and its a shame they cannot put out a real fix.

Noticed in a previous project that IE became terribly slow when we had heaps (150+) textboxes on a page, after checking with fiddler we figured it was the rendering engine that was slow.
(btw, before you all shout, the 150+ textboxes was an explicit customer requirement, we basically recreated customized excel on the web)

Here's the code for the pop up control (there's only one of these on the page that's shared by all of the controls containing the icons):
<script type="text/javascript" src="<%=Response.ApplyAppPathModifier("~/js/jquery-1.2.6.js") %>"></script>
<script type="text/javascript" src="<%=Response.ApplyAppPathModifier("~/js/jquery.blockUI.js") %>"></script>
<asp:Panel CssClass="PopOutBox noPrint" ID="MyPnl" style="display: none; z-index:1000; width:230px; position: absolute;" runat="server">
<cmp:Image MyImageType="SmallCancel" CssClass="fright" runat="server" ID="CloseImg" AlternateText="Close" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="AttendanceFld" runat="server" />
<asp:HiddenField ID="DatePickerFld" runat="server" />
<table width="100%">
<tr>
<td valign="top">
<asp:RadioButtonList EnableViewState="false" ID="AttendRBL" runat="server" RepeatDirection="Vertical">
<asp:ListItem Selected="True" Text="On Time" Value="" />
<asp:ListItem Text="Late" Value="Late" />
<asp:ListItem Text="Absent" Value="Absent" />
<asp:ListItem Text="Cleaning Flunk" Value="Other" title="This is used for things like cubby flunks" />
<asp:ListItem Text="Major Cleaning Flunk" Value="Major" title="This is used for things like White Glove flunks" />
</asp:RadioButtonList>
</td>
<td valign="top" style="text-align: center; vertical-align: middle;">
<asp:CheckBox EnableViewState="false" ID="ExcusedCB" runat="server" />
<br />
<asp:Label ID="Label1" EnableViewState="false" AssociatedControlID="ExcusedCB" Text="Excused"
runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label EnableViewState="false" ID="Label2" Text="Notes" runat="server" AssociatedControlID="DataTB" />
<cmp:HelpPopUp EnableViewState="false" runat="server" Text='Must include "Out Sick" to be counted as ill on reports and progress reports' />
<br />
<asp:TextBox ID="DataTB" EnableViewState="false" runat="server" Columns="30" /><br />
<div style="font-size: 10px; text-align:center;">
<a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID%>','Out Sick');return false;">
(Ill)</a> <a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID%>','In Ethics');return false;">
(Ethics)</a> <a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID %>','Warned');return false;">
(Warned)</a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<cmp:ImageButton ID="DeleteBtn" OnClientClick="showAttendMenu(this,'');" OnClick="DeleteAttendance" ButtonType="SmallDelete"
CssClass="fright" runat="server" />
<cmp:ImageButton ID="SaveBtn" OnClientClick="showAttendMenu(this,'');" OnClick="SaveAttendance" ButtonType="SmallSave" runat="server" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

To find out why it's taking so long I would recommend using Fiddler to spy on your IE traffic: http://www.fiddlertool.com/fiddler/
You'll be looking at the response of each of the messages to see how large they are. If the messages are >5kb or so then the UpdatePanel is being way too piggy.
It sounds like a fairly simple thing you're trying to do so I'm having a hard time believing the update panel is to blame. Testing it shouldn't be too difficult though. The easiest way to test this without an UpdatePanel would be to use a PageMethod. This page has a great tutorial on it:
http://weblogs.asp.net/sohailsayed/archive/2008/02/23/calling-methods-in-a-codebehind-function-pagemethods-from-client-side-using-ajax-net.aspx
Could you also post your UpdatePanel code so we could get more details?
EDIT: Thanks!
What version of IE are you using?

Working with the DOM and HTTP Requests are inherently slow, it's the browser. The best way to speed it up is to reduce the number of times there is an HTTP request (AJAX or otherwise), and reduce the number of DOM actions, search, edit, replace, etc.

I recommend to do perforamnce tracing with link text. It is a free tool for AJAX performance analysis in Internet Explorer