Css footer on media print - css

I am trying to print my web page as a report. I have done css for screen and different for print mode to be able when i pres CTRL+P to print it.
My problem is when I have 2 pages the footer doesn't move to go on page 2 bottom.
How I can do this?
css:
#footer{
position:absolute;
bottom:0%;
width:100%;
height:60px; /* Height of the footer */
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#total{
bottom:85%;
float:right;
text-align:right;
position:absolute;
margin-left:62%;
margin-bottom:2%;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
}
#custsign{
margin-left:60%;
margin-top:-10%;
padding-top:3%;
}
#compsign{
padding-top:0.3%;
margin-left:80%;
margin-top:-2.4%;
}
/*#grid{
padding-bottom:30%;
}*/
aspx:
<div id="footer">
<div id="total">
<asp:Label ID="SubLabel" runat="server" Text="Sub Total: " ></asp:Label>
<asp:Label ID="SubText" runat="server" Text="" ></asp:Label>
<br />
<asp:Label ID="DiscLabel" runat="server" Text="Discount: " ></asp:Label>
<asp:Label ID="DiscText" runat="server" Text="" ></asp:Label>
<br />
<asp:Label ID="VatLabel" runat="server" Text="V.A.T.: " ></asp:Label>
<asp:Label ID="VatText" runat="server" Text="" ></asp:Label>
<br />
<asp:Label ID="TravelLabel" runat="server" Text="Travel Exp.: " ></asp:Label>
<asp:Label ID="TravelText" runat="server" Text="" ></asp:Label>
<br />
<asp:Label ID="CurrencyLabel" runat="server" Text="" ></asp:Label>
<asp:Label ID="TotalLabel" runat="server" Text="Amount Due: " Font-Bold="true"></asp:Label>
<asp:Label ID="TotalText" runat="server" Text="" ></asp:Label>
<br />
</div>
<asp:Label ID="ItemsLabel" runat="server" Text="Total No.Items: " ></asp:Label>
<asp:Label ID="ItemsText" runat="server" Text="" ></asp:Label>
<br />
<asp:Label ID="PrevBalanceLabel" runat="server" Text="Prev Balance: " ></asp:Label>
<asp:Label ID="PrevBalanceText" runat="server" Text="" ></asp:Label>
<br />
<asp:Label ID="NewBalanceLabel" runat="server" Text="New Balance: " ></asp:Label>
<asp:Label ID="NewBalanceText" runat="server" Text="" ></asp:Label>
<div id="custsign">
<asp:Label ID="CustomerSignLabel" runat="server" Text="Customer" Font-Bold="true"></asp:Label>
</div>
<div id="compsign">
<asp:Label ID="CompanieSignLabel" runat="server" Text="Companie Ltd" Font-Bold="true"></asp:Label>
</div>
</div>
example files:
UPDATE with position:fixed

How about to use the code of this example?
Make an Editable/Printable HTML Invoice

You can change position: absolute to position: fixed on your #footer selector.
<style>
#media screen {
#footer {
position: absolute;
/*Other styles...*/
}
}
#media print {
#footer {
position: fixed;
bottom: 0;
/*Other styles...*/
}
}
</style>
This change will make your #footer repeat itself on every page.

Related

Positioning of controls within DIV

I have a set of controls that will show/hide when the user clicks a button. The controls consist of a grid, 2 labels, a dropdown, a text box and another button. I would like to position them as follows:
I have the grid positioned correctly but the dropdown and textbox controls are to the left but below the grid. The button is not centered.
How can I position the DIV with the controls to be positioned beside the grid and the button to display in the center but at the bottom of the main PANEL?
This is my makeup:
<asp:Button ID="btnShowMappingPanel" runat="server" Text="Update Value(s) in Multiple Mappings" Width="325px" />
<asp:Panel ID="pnlMultipleMappingControls" runat="server" Height="300px" Width="1000px" style="display:none;" BackColor="White" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px">
<div id="divMultiMapGrid" style="margin: 25px; width:45%">
<asp:GridView ID="msmgvMultiMappingSelection" runat="server" AllowPaging="True" PageSize="4" AllowSorting="True" AutoGenerateColumns="False" Caption="Select Multiple Mappings to Update"
CaptionAlign="Top" CssClass="grid" Visible="true">
<Columns>
<asp:TemplateField HeaderText="Select">
<EditItemTemplate>
<asp:CheckBox ID="msmgvCkBoxEditSelect" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="msmgvCkBoxSelect" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Mapping ID">
<ItemTemplate>
<asp:Label ID="msmgvLblMappingID" runat="server" Text='<%# Bind("EnrollmentMappingID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Schoology Course ID">
<ItemTemplate>
<asp:Label ID="msmgvLblSchoologyCourseID" runat="server" Text='<%# Bind("SchoologyCourseID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CE City Activity ID">
<ItemTemplate>
<asp:Label ID="msmgvLblCECityActivityID" runat="server" Text='<%# Bind("CECityActivityID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">
<div id="divMultiMapActiveCtrl" style="padding:10px">
<asp:Label ID="lblActive" runat="server" Text="Is Active: " CssClass="label"></asp:Label>
<asp:DropDownList ID="ddlActiveOptions" runat="server">
<asp:ListItem> </asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">
<asp:Label ID="lblMaxEnrollment" runat="server" Text="Maximum Enrollment: " CssClass="label"></asp:Label>
<asp:TextBox ID="txtBoxMapEnroll" runat="server" Width="25%"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="txtBoxMapEnroll" runat="server"
ErrorMessage="Enter only integers." ValidationGroup="multiMapEditMappingValidation" ValidationExpression="^\d+$"
Display="Dynamic" CssClass="message-error">
</asp:RegularExpressionValidator>
</div>
</div>
<div id="divMultiMapUpdateBtn">
<asp:Button ID="btnUpdateSelectedMappings" runat="server" Text="Update Selected Mappings" Width="200px" CausesValidation="true"
ValidationGroup="multiMapEditMappingValidation" OnClick="btnUpdateSelectedMappings_Click" />
</div>
</asp:Panel>
AS REQUESTED this is the jsfiddle
<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">text box control</div>
</div>
<div id="divMultiMapUpdateBtn">Button</div>
First of all Don't use inline CSS. It will be very tough to manage later.
Now for your question:
#divMultiMapGrid {
margin: 25px;
width: 45%;
float: left;
}
#divMultiMapControls {
float: right;
width: 45%;
padding: 5px;
}
#divMultiMapActiveCtrl {
padding: 10px;
}
#divMultiMapMaxEnrollCtrl {
padding: 10px;
}
#divMultiMapUpdateBtn {
clear: both;
margin: auto;
width: 104px; // adjust width based on button
}
If you are still interested only in inline style, then
<panel>
<div id="divMultiMapGrid" style="margin: 25px; width:45%;float: left;">Grid is here</div>
<div id="divMultiMapControls" style="float:right; width:45%; padding:5px">Controls are here
<div id="divMultiMapActiveCtrl" style="padding:10px">Dropdown control</div>
<div id="divMultiMapMaxEnrollCtrl" style="padding:10px">text box control</div>
</div>
<div id="divMultiMapUpdateBtn" style=" clear: both; margin: auto; width: 104px;">Button</div>
</panel>

EDIT-UPDATE BUTTONS IN Repeater control

I have a repeater control with collapsible panel inside a div.(class header and class detail).when i click Edit button inside the detail division - cancel and update button are showing but when i click the edit button the div is collapsing and can see the update and cancel button only after clicking the row one more time..
Every thing is working fine except below stated one.
Each time i click edit button division is collapsing
How can i make the class detail stable until i do edit/cancel/update.
Thanks
<style>
.header { font-size: larger; font-weight: bold; cursor: hand; cursor:pointer;
background-color:#cccccc; font-family: Verdana; }
.details { display:none; visibility:hidden;
font-family: Verdana; }
</style>
<div style="overflow: scroll; overflow-x: hidden; overflow-y: auto;background- color:gray; height: 500px; width: 895px">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div id='h<%# DataBinder.Eval(Container, "ItemIndex") %>' class="header"
onclick='ToggleDisplay(<%# DataBinder.Eval(Container, "ItemIndex") %>);' style="border-style: none;">
<asp:Panel ID="Panel3" runat="server" Height="30px" BorderStyle="None" BackColor="#79FFFF">
<%# DataBinder.Eval(Container.DataItem, "License")%>
<%# DataBinder.Eval(Container.DataItem, "Name")%>
<%# DataBinder.Eval(Container.DataItem," Date")%>
<div id='d<%# DataBinder.Eval(Container, "ItemIndex") %>' class="details">
<asp:Panel ID="Panel2" runat="server" Height="195px" BackColor="Gray" Font-Bold="False" ForeColor="Maroon">
<br />
<asp:Label ID="Label1" runat="server" Text="LicenseID"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval (Container.DataItem,"LicenseID") %>' Enabled="False" BackColor="Gray" BorderStyle="None"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="License Name"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"LicenseName")%>' Enabled="false" BackColor="Gray" BorderStyle="None"></asp:TextBox>
</asp:Panel>
</div>
</ItemTemplate>
Toggle display
function ToggleDisplay(id) {
var elem = document.getElementById('d' + id);
if (elem) {
if (elem.style.display != 'block') {
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else {
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}

asp.NET CSS Issue on Post Back

We are currently developing an asp.NET 4.0 Web Forms application. In a particular screen we attempted to create a grid view with a fixed header and footer. We got this working how we wanted, but then we realised that when we click a button which issues a partial post back (triggers required field validators for example) the fixed header disappears.
Any ideas why this is happening?
Code as follows:
CSS (relevant parts):
.tableStyle
{
}
.tableStyle th
{
text-align: left !important;
padding: 2px 5px !important;
font-weight: bold;
}
.tableStyle td
{
padding: 1px 5px !important;
text-align: left;
}
.container
{
overflow-y: scroll;
overflow-x: hidden;
height: 500px;
}
.container table tbody
{
overflow-x: hidden;
}
/* Creates a Scrollable Div */
.GridViewContainer
{
overflow: auto;
}
.freezeHeader
{
position: absolute;
background-color: White;
font-weight: bold;
margin-top: -40px;
padding-bottom: 5px;
z-index: 99;
}
.freezeFooter
{
position: absolute;
background-color: White;
top: 530px;
padding-bottom: 20px;
z-index: 95;
}
.paddingTop
{
margin-top: 40px;
}
ASPX Page (Grid View Part):
<fieldset>
<legend>Products Mapping Table (EXT_CFG_PDT_MAP)</legend>
<div id="grdWithScroll" class="container">
<asp:GridView
ID="ProductsMappingTableGridView"
AutoGenerateColumns="false"
runat="server"
OnRowCancelingEdit="ProductsMappingTableGridView_RowCancelingEdit"
OnRowEditing="ProductsMappingTableGridView_RowEditing"
OnRowUpdating="ProductsMappingTableGridView_RowUpdating"
ShowFooter="true"
OnRowCommand="ProductsMappingTableGridView_RowCommand"
CssClass="tableStyle paddingTop"
HeaderStyle-CssClass="freezeHeader"
FooterStyle-CssClass="freezeFooter">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="editButton" Text="Edit" CausesValidation="false" CommandName="Edit" runat="server" Enabled='<%# Session["ProductsMappingsWriteAccess"] %>'/>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="updateButton" Text="Update" CommandName="Update" runat="server" ValidationGroup="Edit"/>
<asp:Button ID="cancelButton" Text="Cancel" CausesValidation="false" CommandName="Cancel" runat="server" />
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="insertButton" Text="Insert" CommandName="Insert" runat="server" ValidationGroup="Insert" Enabled='<%# Session["ProductsMappingsWriteAccess"] %>'/>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Product Mapping ID</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="mptIdLabel" runat="server" Text='<%# Eval("MPT_ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Source Key</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="srcKeyLabel" runat="server" Text='<%# Eval("SRC_KEY") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList AutoPostBack="false" ID="srcKeyListEdit" runat="server" Width="95px" OnLoad="SrcKeyListInitalization" >
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList AutoPostBack="false" ID="srcKeyListInsert" runat="server" Width="95px" OnLoad="SrcKeyListInitalization"
Visible='<%# Session["ProductsMappingsWriteAccess"] %>'>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Product Key - Source</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="pdtKeySrcLabel" runat="server" Text='<%# Eval("PDT_KEY_SRC") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="pdtKeySrcTextBoxEdit" runat="server" Text='<%# Eval("PDT_SRC") %>'
MaxLength="32"></asp:TextBox>
<br />
<asp:RequiredFieldValidator runat="server" ID="pdtKeySrcTextBoxEditRequiredFieldValidator"
ControlToValidate="pdtKeySrcTextBoxEdit" ValidationGroup="Edit" ForeColor="Red"
ErrorMessage="PDT_KEY_SRC is required"></asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="pdtKeySrcTextBoxInsert" runat="server" Text='<%# Eval("KEY_SRC") %>'
MaxLength="32" Visible='<%# Session["ProductsMappingsWriteAccess"] %>'></asp:TextBox>
<br />
<asp:RequiredFieldValidator runat="server" ID="pdtKeySrcTextBoxInsertRequiredFieldValidator"
ControlToValidate="pdtKeySrcTextBoxInsert" ValidationGroup="Insert" ForeColor="Red"
ErrorMessage="PDT_KEY_SRC is required"></asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</fieldset>
Update 1: I would like to point out that this appears not to have been affected on IE 8 but it was affected when I used IE 10.
A hotfix is available for the ASP.NET browser definition files in the Microsoft .NET
please refer http://support.microsoft.com/kb/2600088 for .NET 4.0
Refer http://support.microsoft.com/kb/2608565 for .Net 3.5

Divs not working as expected

I am trying to create the rows of controls. Basically it is for filtering a search. There are six controls in each row, 3 labels and 3 dropdownlists/textboxes. I have a div which creates rows and the first row turns out great but the rest is really weird.
The markup is the following
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterDepartmentLabel" AssociatedControlID="FilterDepartment" runat="server" Text="Department" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterDepartment" runat="server" CssClass="aThirdInput" />
<asp:Label ID="FilterCardStatusLabel" AssociatedControlID="FilterCardStatus" runat="server" Text="Status" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardStatus" runat="server" CssClass="aThirdInput" />
<asp:Label ID="FilterCardBehaviorLabel" AssociatedControlID="FilterCardBehavior" runat="server" Text="Behavior" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardBehavior" runat="server" CssClass="aThirdInput" />
</div>
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterCarPlateLabel" AssociatedControlID="FilterCarPlate" runat="server" Text="Car Plate" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterCarPlate" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterCardNoLabel" AssociatedControlID="FilterCardNo" runat="server" Text="Car No" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterCardNo" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterRuleSetCodeLabel" AssociatedControlID="FilterRuleSetCode" runat="server" Text="Rule Set" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterRuleSetCode" runat="server" CssClass="aThirdInput" />
</div>
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterDriverLastNameLabel" AssociatedControlID="FilterDriverLastName" runat="server" Text="Driver Lastname" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterDriverLastName" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterCardTypeLabel" AssociatedControlID="FilterCardType" runat="server" Text="Type" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardType" runat="server" CssClass="aThirdInput" />
</div>
And here is the css
.fullRow
{
width: 100%;
display:block;
}
.aThirdLabel
{
width: 15%;
float: left;
font-size:small;
height: 22px;
}
.aThirdInput
{
width: 15%;
float: left;
}
Actually, even though this looks good in design view of VS2010, when its loaded in the browser, its a mess.
Thanks
EDIT: The answer is in the comment huMpty duMpty made.
Add <div style="clear:both;"></div> after each row.

asp.net labels and asp.net textboxes are not lining up correctly?

My Registration page currently looks like the following:
The current styling I have for the above is image is:
<style type="text/css">
#contactinfo label
{
float: left;
width: 10em;
margin-right: 0.5em;
text-align: right;
font-size: 14px;
}
#contactinfo p
{
padding: 5px;
}
#contactinfo input[type="text"], input[type="password"]
{
height: 1.5em;
}
#contactinfo select
{
padding: 0.25em;
}
#contactinfo input[type="text"]:focus, input[type="password"]:focus
{
background-color: #FFFFE0;
}
#contactinfo .update
{
margin-left: 12.5em;
}
#contactinfo .error
{
background-color: transparent;
}
#contactinfo .longtextbox
{
width: 20em;
}
#contactinfo .shorttextbox
{
width: 5em;
}
</style>
and the markup is
<div id="contactinfo">
<p>
<asp:Label runat="server"
AssociatedControlID="txtEmail">Email
</asp:Label>
<asp:TextBox ID="txtEmail"
runat="server"
CssClass="longtextbox" />
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtFirstName">First Name
</asp:Label>
<asp:TextBox ID="txtFirstName"
runat="server"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtFirstName"
Text="First Name is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtLastName">Last Name
</asp:Label>
<asp:TextBox ID="txtLastName"
runat="server"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtLastName"
Text="Last Name is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtBusinessName">Business Name
</asp:Label>
<asp:TextBox ID="txtBusinessName"
runat="server"
CssClass="longtextbox"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtBusinessName"
Text="Business Name is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtPhone">Phone
</asp:Label>
<asp:TextBox ID="txtPhone"
runat="server"
ValidationGroup="AccountValidation" />
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtAddress">Address
</asp:Label>
<asp:TextBox ID="txtAddress"
runat="server"
CssClass="longtextbox"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator runat="server"
ControlToValidate="txtAddress"
Text="Address is required."
ValidationGroup="AccountValidation"
CssClass="error"></asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtCity">City
</asp:Label><asp:TextBox ID="txtCity"
runat="server"
ValidationGroup="AccountValidation" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4"
runat="server"
ControlToValidate="txtCity"
Text="City is required."
ValidationGroup="AccountValidation"
CssClass="error">
</asp:RequiredFieldValidator>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="ddlState">State
</asp:Label>
<asp:DropDownList ID="ddlState"
runat="server"
DataSourceID="dsStates"
DataTextField="Name"
DataValueField="Id">
</asp:DropDownList>
</p>
<p>
<asp:Label runat="server"
AssociatedControlID="txtZipcode">Zipcode</asp:Label>
<asp:TextBox ID="txtZipCode" runat="server" CssClass="shorttextbox"
ValidationGroup="AccountValidation" />
</p>
</div>
As you can see from above, I have every label field pair wrapped in a p tag so it breaks to the next line, but I am not sure if I need to do this. I want to get city, state, and zip all on the same line, but as soon as I move all the labels and inputs for city,state,zip into one p tag, it looks like the following and I don't know how to fix it.
EDIT : Try using this as cssclass for
those labels -
#contactinfo noformatlabel
{
//add here if you need to adjust the spacing..but dont float add padding or //something else..
padding:0.2em //maybe this if needed for formatting..
}
I think -
#contactinfo label
{
float: left;
width: 10em;
margin-right: 0.5em;
text-align: right;
font-size: 14px;
}
these css properties are a problem...do a different type css for the labels for city state and zipcode...i mean try it without any formating...it might work then..
You could probably float those three inputs as well as the labels. Or stop floating the labels, since the width isn't going to matter like it does now.

Resources