layout design suggestion for modal popup - responsive-design

I am looking for layout design suggestion for one of my screens.
I have a modal popup window which displays the customers information in tabbed layout which means one tab per customer. each tab has 3 accordions out of which 2 accordions have tables(grid).
Now the requirement is to compare the customer data side by side instead of using tabs. we can have maximum of 4 customers.

I assume this is what you are going for:
Layout diagram
I suggest you use the <table> tag for that. Each table column (<td>) will represent one customer.
I provided you with my example below.
body {
background-color: #ccc;
}
#modal {
width: 80%;
min-width: 100px;
height: 80%;
min-height: 100px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 15px;
text-align: center;
}
#customer_table {
position: absolute;
bottom: 10px;
width: 100%;
height: 75%;
vertical-align: top;
border-spacing: 0;
}
tr:first-child td {
height: 20px;
background-color: #5a5a5a;
color: white;
}
td {
border-left: solid #5a5a5a 1px;
border-right: solid #5a5a5a 1px;
border-bottom: solid #5a5a5a 1px;
}
<html>
<body>
<div id="modal">
<h2>Customer table</h2>
<table id="customer_table">
<tr>
<td>Customer 1</td>
<td>Customer 2</td>
<td>Customer 3</td>
<td>Customer 4</td>
</tr>
<tr>
<td>Customer data</td>
<td>Customer data</td>
<td>Customer data</td>
<td>Customer data</td>
</tr>
</table>
</div>
</body>
</html>

Related

Colspan not working as expected, only spans one column

My colspan is being set correctly but isnt working, acting as if it is not there, see below:
Ive no real idea as to why this is happening or how to fix, could my CSS for the table be stopping it from operating correctly?
Code where colspan is set:
<div class="fixedTable fullwidth" id="demo">
<header class="fixedTable-header">
<table class="table table-bordered">
<thead>
<tr>
#for (int j = 0; j < Model.SupervisorAndProjects.Count(); j++)
{
string background = Model.AssignedArray[j]%2 == 0 ? "background-color:#7BD2ED" : "background-color:#74C3DB";
string text = "color:#ffffff";
<th style="text-align: center; #background; #text" colspan="#Model.SupervisorAndProjects[j].NumberOfProjects">#Model.SupervisorAndProjects[j].SupervisorProjects (#Model.SupervisorAndProjects[j].MaxLoad/#Model.SupervisorAndProjects[j].NumberOfProjects)</th>
}
</tr>
</thead>
</table>
</header>
Here is my CSS for the table:
.fixedTable .table {
background-color: white;
width: auto;
}
.fixedTable .table tr td,
.fixedTable .table tr th {
min-width: 100px;
min-height: 20px;
height: 20px;
padding: 5px;
}
.fixedTable-header {
width: 87.5%;
height: 30px;
margin-left: 12.5%;
overflow: hidden;
border-bottom: 1px solid #CCC;
}
.fixedTable-sidebar {
width: 12.5%;
height: 95%;
float: left;
overflow: hidden;
border-right: 1px solid #CCC;
}
.fixedTable-body {
overflow: auto;
width: 87.5%;
height: 95%;
float: left;
}
From the looks of it, you have split out the tables, you need to make sure it's all part of the same table for the colspan to be effective.

ItextSharp adding unwanted borders to HTML generated PDF

I am using Power Tools For Xml to convert a word document to HTML. I am then plugging that HTML into the ITextSharp XMLWorkerHelper to create a PDF. This overall process works fine for what I am trying to accomplish with no issues.
The problem I am having is that ItextSharp is adding black gridlines to the a table that is in the generated HTML. The HTML that Power Tools is generating is below. In the styling all of the border styling is set to none. Does anyone have enough experience with ItextSharp to identify what in this html is causing ItextSharp to put black gridlines around the table when it converts it into a PDF?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="Generator" content="PowerTools for Open XML" />
<style>
span
{
white-space: pre-wrap;
}
p.Pt-Normal
{
margin-bottom: 0;
font-family: Calibri;
font-size: 10pt;
line-height: 108%;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
span.Pt-000000
{
font-size: 10pt;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
}
table.Pt-000005
{
border-collapse: collapse;
border: none;
margin-left: 0;
margin-bottom: .001pt;
}
tr.Pt-000006
{
height: 0.23in;
}
td.Pt-000007
{
vertical-align: top;
width: 140.75pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
span.Pt-DefaultParagraphFont-000008
{
font-family: Calibri;
font-size: 10pt;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
}
td.Pt-000009
{
vertical-align: top;
width: 95.55pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
td.Pt-000010
{
vertical-align: top;
width: 63.35pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
td.Pt-000011
{
vertical-align: top;
width: 168.1pt;
border-top-style: none;
padding-top: 0;
border-right-style: none;
padding-right: 5.4pt;
border-bottom-style: none;
padding-bottom: 0;
border-left-style: none;
padding-left: 5.4pt;
}
</style>
</head>
<body>
<div align="left">
<table dir="ltr" class="Pt-000005">
<tr class="Pt-000006">
<td class="Pt-000007">
<p dir="ltr" class="Pt-Normal">
<span class="Pt-DefaultParagraphFont-000008">N/A</span></p>
</td>
<td class="Pt-000009">
<p dir="ltr" class="Pt-Normal">
<span xml:space="preserve" class="Pt-000000"></span>
</p>
</td>
<td class="Pt-000010">
<p dir="ltr" class="Pt-Normal">
<span xml:space="preserve" class="Pt-000000"></span>
</p>
</td>
<td class="Pt-000011">
<p dir="ltr" class="Pt-Normal">
<span class="Pt-DefaultParagraphFont-000008">CASE NO: abc</span></p>
</td>
</tr>
</table>
</div>

Styling <asp:Button /> with CSS

I have a asp:Button, I used css styles with cssClass property in asp:Button, but those styles are not working.
This is my asp button:
<tr>
<td>
<div class="form_row">
<asp:Button ID="ButtonSend" CssClass="BtnSend" runat="server" Text="Send" OnClick="ButtonSend_Click" />
</div>
</td>
</tr>
This is my CSS:
.BtnSend {
width: 53px;
height: 24px;
display: block;
float: right;
margin: 0 0 0 10px;
background: url(../../Images/contact_bt.gif) no-repeat center;
text-decoration: none;
text-align: center;
line-height: 24px;
color: #fff;
}
If I'm not wrong, I should use something like this:
input[type="submit"]
{
//css coding
}
but I don't know where to put it and how to affect only this button.
Based on your comment, add/change this in your css:
.BtnSend {
border: none;
background: transparent url(../../Images/contact_bt.gif) no-repeat center;
}

Table not inheriting css to email Html Template in Console Application

I have a Html Template in Console Application i have to send mails using this template everything works fine but css is not applied in this template i have written css on the same html page
I know I Can use properties of table Like bgcolor and all property In Table But this is not a Solution.....
my Code for html template is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Mail Alert For Tenders</title>
<style media="screen" type="text/css">
.Table
{
margin: 1px 1px 1px 1px;
width: 600px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
}
.Table table
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
.Table tr:last-child td:last-child
{
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.Table table tr:first-child td:first-child
{
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
}
.Table table tr:first-child td:last-child
{
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
}
.Table tr:last-child td:first-child
{
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.Table tr:nth-child(odd)
{
background: -o-linear-gradient(bottom, #4da28f 5%, #56998a 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4da28f), color-stop(1, #56998a) );
background: -moz-linear-gradient( center top, #4da28f 5%, #56998a 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4da28f", endColorstr="#56998a");
background: -o-linear-gradient(top,#4da28f,#56998a);
background-color: #4da28f; /*border:0 dashed #000000;*/
text-align: justify;
border-width: 0 0 1px 1px;
font-family: Arial;
font-weight: bold;
color: #ffffff;
}
.Table tr:nth-child(even)
{
background: -o-linear-gradient(bottom, white 5%, #e5e5e5 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, white), color-stop(1, #e5e5e5) );
background: -moz-linear-gradient( center top, #ff7f00 5%, white 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="white", endColorstr="#e5e5e5");
background: -o-linear-gradient(top,white,FFFFCC);
background-color: white;
text-align: justify;
border-width: 0 0 1px 1px;
font-family: Arial;
font-weight: bold;
color: black;
}
.Table td
{
vertical-align: middle;
border-width: 0 1px 1px 0;
text-align: left;
padding: 1em 3px 30px 5px;
font-size: 12px;
font-family: Arial;
font-weight: 600;
}
.Table tr:last-child td
{
border-width: 0 1px 0 0;
}
.Table tr td:last-child
{
border-width: 0 0 1px 0;
}
.Table tr:last-child td:last-child
{
border-width: 0 0 0 0;
}
.Table tr:first-child td:first-child
{
border-width: 0 0 1px 0;
}
.Table tr:first-child td:last-child
{
border-width: 0 0 1px 1px;
}
</style>
</head>
<body>
<div class="Table">
<table>
<tr>
<td width="15%">
Tender Title
</td>
<td colspan="3" width="85%">
{TenderTitle}
</td>
</tr>
<tr>
<td width="15%">
Tender ID
</td>
<td width="35%">
{TenderID}
</td>
<td width="15%">
Tender Type
</td>
<td width="35%">
{TenderType}
</td>
</tr>
<tr>
<td width="15%">
Tender Value
</td>
<td width="35%">
{TenderValue}
</td>
<td width="15%">
Tender EMD
</td>
<td width="35%">
{TenderEMD}
</td>
</tr>
<tr>
<td width="15%">
Location
</td>
<td width="35%">
{Location}
</td>
<td width="15%">
Organization Name
</td>
<td width="35%">
{OrgName}
</td>
</tr>
<tr>
<td width="15%">
Last Date
</td>
<td width="35%">
{LastDateForSubmission}
</td>
<td width="15%">
Category
</td>
<td width="35%">
{SubProductCatName}
</td>
</tr>
</table>
</div>
and to send mail I have used this code
using (var sReader = new StreamReader(TemplatePath))
{
var htmlTemplate = sReader.ReadToEnd();
htmlTemplate = htmlTemplate.Replace("{TenderTitle}", tender.TenderTitle);
htmlTemplate = htmlTemplate.Replace("{TenderID}", tender.TenderID.ToString("N1"));
htmlTemplate = htmlTemplate.Replace("{TenderType}", tender.TenderTypeName);
htmlTemplate = htmlTemplate.Replace("{TenderValue}", tender.TenderValue.ToString("Rs. ##,###"));
htmlTemplate = htmlTemplate.Replace("{TenderEMD}", tender.TenderEMD);
htmlTemplate = htmlTemplate.Replace("{Location}", tender.Location);
htmlTemplate = htmlTemplate.Replace("{OrgName}", tender.OrgName);
htmlTemplate = htmlTemplate.Replace("{LastDateForSubmission}", tender.LastDateForSubmission.ToString("yyyy mmmm dd"));
htmlTemplate = htmlTemplate.Replace("{SubProductCatName}", tender.SubProductCatName);
mailContent = htmlTemplate;
}
the mail send by this code are send without any formatting means no css is applied on it
The <style> ... </style> belongs in the <head></head>, not in <body> tag

How do I center text on a web form?

This is what I have and it is not being centered. It's all the way to the left for some reason.
<div>
<asp:Label ID="eagleReplicationManagerLabel" runat="server" CssClass="eagleReplicationManagerLabel">
Eagle Replication Manager
</asp:Label>
</div>
css for it:
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
}
It is actually working but you couldn't see the result because it is rendered as a span which takes the exact width of its content. So the text didn't have enough space to adjust.
Increasing the width in your css style will show you why
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
width:500px;
}
The text-align: center; needs to be on the <div> that contains the label.
the text is centered but is is an inline element so it is only as wide as the text inside.
That is why you can't tell that it is centered.
Give it some width or make it block and you will see the centering.
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
display:block
}
The problem here is that asp:Label is rendered as a span on html and span elements are, by default, styled with display:inline; as a result, your CSS class does nothing.
If you want to center the text in the DIV, set the text-align:center on the DIV or set display:block on .eagleReplicationManagerLabel
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
display:block;
}
.center{
width:200px;
margin:auto;
}
.eagleReplicationManagerLabel
{
position: fixed;
font-size: 30px;
color: #0000FF;
text-align: center;
}
<div>
<div class="center">
<asp:Label Text="Eagle Replication Manager" ID="eagleReplicationManagerLabel1" runat="server" CssClass="eagleReplicationManagerLabel"></asp:Label>
</div>
</div>

Resources