Develop Reference

How to get panels/classes side by side in ASP.NET?

This is the problem I am having:
How my page looks on firefox
and How my page looks on chrome
What I want to do is get reserve form and data source forms side by side. I have already set a class using the fieldset method but can't figure out what to use to have it side by side.
Using this for data sources form
.tables
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
and using this for Reserve Form
.mreg
{
width:372px;
border-color:Black;
margin-left:150px;
height:500px;
}
Just want two get the two forms side by side.
Edit -
Asp.net coding for Reserve Form:
<asp:Label ID="lblerrormsg" runat="server" Text="Error Message" Visible="False"></asp:Label>
<fieldset class="mreg">
<legend>Reserve </legend>
<asp:Label ID="Label2" runat="server" Text="Reserve ID" Font-Bold=true></asp:Label>
<br />
<asp:TextBox ID="txtRID" runat="server" Height="18px" Width="213px"></asp:TextBox>
<%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtLID" ErrorMessage="Loan ID Required"></asp:RequiredFieldValidator>--%>
<br />
<br />
<br />
</fieldset>
Coding for data source form:
fieldset class="tables">
<legend>Data Sources </legend>
<asp:Label ID="Label6" runat="server" Text="Reservation Table" Font-Bold=true></asp:Label>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AutoGenerateDeleteButton="True"
DataKeyNames="Reservation_ID" DataSourceID="SqlDataSource1" BorderStyle="Dotted">
</asp:SqlDataSource>
</fieldset>
</asp:Content>
Is there anything wrong with the code?

You should give float:left to float to the left of screen and get side by side. Also it is not a good practice to give width as px as screen sizes vary.
.tables
{
width:48%;
border-color:Black;
float:left;
display:block;
height:500px;
}
.mreg
{
width:48%;
border-color:Black;
float:left;
display:block
height:500px;
}

You have multiple css options that you could use. As one:
float:left;
...will allow the divs to effectively "float" to the left side of their container, which will solve your problem. However, floats are problematic for a number of reasons, and there are often better options. For example, you can consider taking advantage of the "display" css property, such as:
display: inline-block;
This would also display your divs in a horizontal fashion, and tends to behave more consistently and with fewer problems. There are more options for the "display" property, though, which is worth looking into -- a good overview of some of the options can be found here:
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

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;
}

ASP .net Calendar moves components on the page everytime is is visible

I have an ASP page, and I have a calendar which is shown (set to visible) on the page when an image button is clicked.
The problem is everytime the calendar is shown it moves other components on the page down, and when it's invisible components move back up again.
Could anyone give me an idea plz. Here is what i did finally: (Now its fixed)
<body>
<form id="form1" runat="server">
<asp:TextBox ID="CreationTimeTextBox" runat="server" ClientIDMode="Static">Creation Time</asp:TextBox><br />
<script>
AnyTime.picker("CreationTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:TextBox ID="EndTimeTextBox" runat="server" ClientIDMode="Static">End Time</asp:TextBox>
<script>
AnyTime.picker("EndTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:Button ID="btnResetSearchInput" runat="server" Text=" Reset search input" CssClass="resetBtn" Width="140px" OnClick="btnResetSearchInput_Click" />

To not moving the rest of the page down, the calendar must a correct style that allow him to show as pseudo-dialog on the page.
The main attributes on the css that must be correct and set is the position, top and left.
Here is an example:
.dialog {
position: absolute;
top:10px;
left:20px;
width: 140px;
height: 30px;
background-color:blue;
color:white;
}
.NotDialog {
width: 200px;
height: 30px;
background-color:blue;
color:white;
}
<div>Some other text before
<div class="dialog">open as dialog</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
<br><br><br>
<div>Some other text before
<div class="NotDialog">open by moving the text down</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
More to read
CSS OVERLAY TECHNIQUES

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.

Dynamic content w/ jQuery

I am just starting to learn jQuery, and want to load content from a seperate .aspx page dynamically into a div. Using example from here: http://www.asp.net/ajaxLibrary/jquery_webforms_dynamic_load.ashx?HL=var.
However it doesn't seem to be responding and I'm probably missing some piece of this. Here is the code / script in my .aspx page:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// External ASPX Page calling
$("#btn_Submit").click(loadDynamic);
});
function loadDynamic() {
$("#dynamicResults").load("ResultsView.aspx",
{name: $("#cbox_User").val() },
function (content) {
$(this).hide().fadeIn("slow");
return false;
});
}
<Header>
QUERY VIEW
</Header>
<Content>
<div style="float:right; height:154px; width: 947px; margin-left: 0px; background-color: #E0E0E0;">
<br />
<asp:Label ID="Label2" runat="server" Text="Select a User:"
Style="margin-left:28px" ></asp:Label>
<asp:ComboBox ID="cbox_User" runat="server" AutoCompleteMode="SuggestAppend">
</asp:ComboBox>
<asp:Label ID="Label3" runat="server" Text="Select a Month:"
Style="margin-left:28px" ></asp:Label>
<asp:TextBox ID="txt_Date" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="txt_Date"
Format="MMMM yyyy"
OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden"
BehaviorID="calendar1" >
</asp:CalendarExtender>
<asp:Button ID="btn_Submit" runat="server" Text="Submit" Style="margin-left:28px" onclick="Btn_Submit_Click" />
</div>
</Content>
<Header>
RESULTS VIEW
</Header>
<Content>
<div id="dynamicResults">
</div>
<div style="border-style: none; height:340px; width: 770px; position:relative; top: 10px; left: -2px;">
<asp:GridView ID="ResultsView" runat="server" CellPadding="3"
ForeColor="Black" GridLines="None" AllowPaging="False"
Visible="False"
Height="318px" style="margin-left: 32px; margin-top: 2px;" Width="718px"
BackColor="White" BorderColor="#999999" BorderStyle="Solid"
BorderWidth="1px">
</asp:GridView>
</div>
</Content>
And in the second .aspx page, which contains I a div I just want to dynamically load:
<html xmlns="http://www.w3.org/1999/xhtml">
<div style="background-color:#E0E0E0; border-style: ridge none none none; border- width: thin; border-color: #B3B3B3; height:120px; width: 770px; position:relative; top: 10px; left: 8px;">
<asp:Label ID="lbl_Header" runat="server" Text="User Information:"></asp:Label>
</div>
</html>

Have a look at the load method.
Here is an example from the page:
Loading Page Fragments The .load()
method, unlike $.get(), allows us to
specify a portion of the remote
document to be inserted. This is
achieved with a special syntax for the
url parameter. If one or more space
characters are included in the string,
the portion of the string following
the first space is assumed to be a
jQuery selector that determines the
content to be loaded.
We could modify the example above to
use only part of the document that is
fetched:
$('#result').load('ajax/test.html #container');
When this method executes, it
retrieves the content of
ajax/test.html, but then jQuery parses
the returned document to find the
element with an ID of container. This
element, along with its contents, is
inserted into the element with an ID
of result, and the rest of the
retrieved document is discarded.
jQuery uses the browser's .innerHTML
property to parse the retrieved
document and insert it into the
current document. During this process,
browsers often filter elements from
the document such as , ,
or elements. As a result, the
elements retrieved by .load() may not
be exactly the same as if the document
were retrieved directly by the
browser.
Edit: Just noticed that in your function loadDynamic() you're trying to get the value of the control cbox_User like this:
$("#cbox_User").val()
But, because it's a server-side control, you need to get the value like this:
$("#<%=cbox_User.ClientID%.").val()
This is because .NET gives ASP.NET controls different id's than what you specify.
Hope this helps.