td center aligned without space, borders and padding - html-table

Problem
i've to do a little html email just for test. The problem is that right now i cannot reset all the space between this 5 tds.
I need them in the center of the table.
Tries
I already tried, as suggested in many posts:
border spacing
border collapse
reset all in css ( html, body, p etc )
display: inline-table
display: inline-block
This is only the interested row of a bigger table, the other rows works perfectly.
i don't know what i could try to fix this.
Expectation
five square near to each other in the center of the
Code
<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
<tr>
<td>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
<tr>
<tr>
<td>
<table width="600px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
<tr>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
CSS RESET
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 none !important;
display: block;
height: auto;
line-height: 100%;
outline: none !important;
text-decoration: none;
}
a img {
border: 0 none;
}
table, td {
border-collapse: collapse;
border: 0 none;
}
td, a, span {
mso-line-height-rule: exactly;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
#bodyTable{
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}

In the Html, your table width is 600px. Try 300px for centering them.
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 none !important;
display: block;
height: auto;
line-height: 100%;
outline: none !important;
text-decoration: none;
}
a img {
border: 0 none;
}
table,
td {
border-collapse: collapse;
border: 0 none;
}
td,
a,
span {
mso-line-height-rule: exactly;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
#bodyTable {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
<tr>
<td>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
<tr>
<tr>
<td>
<table width="300px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
<tr>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>

Related

using v-for in vue js component

I need to dynamically add rows to my table, when I add some data in vue component. I am using v-for it must automatically add rows after adding data, but it doesn't show me anything, just a table header.
<table style="width: 95%;" cellspacing="0" id="main2">
<tbody>
<tr>
<th style="width: 55%; background-color: #343434; color: #FFFFFF; text-align: left; font-weight: normal; "><span class="target-field" data-path="name_word_output">Назва</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="quantity_word_output">Кількість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="rate_word_output">Вартість</span></th>
<th style="width: 15%; background-color: #343434; color: #FFFFFF; text-align: center; font-weight: normal;"><span class="target-field" data-path="amount_word_output">Разом</span></th>
</tr>
<tr v-for="item in rowData">
<td style="border: 1px solid #ddd;"><span class="target-field" data-path="issue.name">{{item.tovarname}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="issue.quantity"></span> <span class="target-field" data-path="issue.unit">{{item.fakturahowmany}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.price_per_one">{{item.fakturaprice}}</span></td>
<td style="border: 1px solid #ddd; text-align: center;"><span class="target-field" data-path="currency_type_output">₴</span> <span class="target-field" data-path="issue.amount">{{item.fakturahowmany*item.fakturaprice}}</span></td>
</tr>
</tbody>
</table>
and another part
methods: {
addItem(){
this.$root.totalprice+=this.$root.fakturahowmany*this.$root.fakturaprice;
var my_object = {
tovarname:this.$root.tovarname,
fakturahowmany:this.$root.fakturahowmany,
fakturaprice:this.$root.fakturaprice,
};
this.$root.rowData.push(my_object)
//
this.$root.tovarname = 1;
this.$root.fakturahowmany = 1;
this.$root.fakturaprice = 1;
}
}
}
How can I fix it? Thanks!
You have to start a unique key for the items through v-bind: key = "item.id" in your v-for
<tr v-for="item in rowData" v-bind:key="item.id" >
link: https://v2.vuejs.org/v2/guide/list.html#Maintaining-State

get email body with html format in odoo

I want to get email body from in html format,
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
'description': msg.get('body'),
}
I want to get email body to description but when I use 'description': msg.get('body'), it takes all on text format,
I want to get email body on HTML format
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Christmas Email template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--<![endif]-->
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
#media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_img {
width: 100% !important;
height: auto !important;
}
.em_h20 {
height: 20px !important;
}
.em_padd {
padding: 20px 10px !important;
}
.em_text1 {
font-size: 16px !important;
line-height: 24px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
</style>
</head>
<body class="em_body" style="margin:0px; padding:0px;" bgcolor="#efefef">
<table class="em_full_wrap" valign="top" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#efefef" align="center">
<tbody><tr>
<td valign="top" align="center"><table class="em_main_table" style="width:700px;" width="700" cellspacing="0" cellpadding="0" border="0" align="center">
<!--Header section-->
<tbody><tr>
<td style="padding:15px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:12px; line-height:15px; color:#0d1121;" valign="top" align="center">Test Email Sample | View Online</td>
</tr>
</tbody></table></td>
</tr>
<!--//Header section-->
<!--Banner section-->
<tr>
<td valign="top" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img class="em_img" alt="merry Christmas" style="display:block; font-family:Arial, sans-serif; font-size:30px; line-height:34px; color:#000000; max-width:700px;" src="images/05be8b57-6b90-4ebd-ba17-4014c79f2e4b.jpg" width="700" border="0" height="345"></td>
</tr>
</tbody></table></td>
</tr>
<!--//Banner section-->
<!--Content Text Section-->
<tr>
<td style="padding:35px 70px 30px;" class="em_padd" valign="top" bgcolor="#0d1121" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:16px; line-height:30px; color:#ffffff;" valign="top" align="center">This is a sample email which shall be accommodated in a single paragraph</td>
</tr>
<tr>
<td style="font-size:0px; line-height:0px; height:15px;" height="15"> </td>
<!--—this is space of 15px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center">This is paragraph 2 of font size 18px and #fbeb59 font color with a line spacing of 15px</td>
</tr>
<tr>
<td class="em_h20" style="font-size:0px; line-height:0px; height:25px;" height="25"> </td>
<!--—this is space of 25px to separate two paragraphs ---->
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:18px; line-height:22px; color:#fbeb59; text-transform:uppercase; letter-spacing:2px; padding-bottom:12px;" valign="top" align="center"> This is paragraph 3 of font size 18px and #fbeb59 font color with a line spacing of 25px and Uppercase</td>
</tr>
</tbody></table></td>
</tr>
<!--//Content Text Section-->
<!--Footer Section-->
<tr>
<td style="padding:38px 30px;" class="em_padd" valign="top" bgcolor="#f6f7f8" align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td style="padding-bottom:16px;" valign="top" align="center"><table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody><tr>
<td valign="top" align="center"><img src="images/fb.png" alt="fb" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/tw.png" alt="tw" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:27px;" width="27" border="0" height="26"></td>
<td style="width:6px;" width="6"> </td>
<td valign="top" align="center"><img src="images/yt.png" alt="yt" style="display:block; font-family:Arial, sans-serif; font-size:14px; line-height:14px; color:#ffffff; max-width:26px;" width="26" border="0" height="26"></td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td style="font-family:'Open Sans', Arial, sans-serif; font-size:11px; line-height:18px; color:#999999;" valign="top" align="center">PRIVACY STATEMENT | TERMS OF SERVICE | RETURNS<br>
© 2017 Companyname. All Rights Reserved.<br>
If you do not wish to receive any further emails from us, please unsubscribe</td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td class="em_hide" style="line-height:1px;min-width:700px;background-color:#ffffff;"><img alt="" src="images/spacer.gif" style="max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;" width="700" border="0" height="1"></td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<div class="em_hide" style="white-space: nowrap; display: none; font-size:0px; line-height:0px;"> </div>
</body></html>
here is the basic function when creating new ticket (incoming message)
#api.model
def message_new(self, msg, custom_values=None):
""" Overrides mail_thread message_new that is called by the mailgateway
through message_process.
This override updates the document according to the email.
"""
# remove default author when going through the mail gateway. Indeed we
# do not want to explicitly set user_id to False; however we do not
# want the gateway user to be responsible if no other responsible is
# found.
create_context = dict(self.env.context or {})
create_context['default_user_id'] = False
defaults = {
'name': msg.get('subject') or _("No Subject"),
'email_from': msg.get('from'),
'email_cc': msg.get('cc'),
'partner_id': msg.get('author_id', False),
}
if custom_values:
defaults.update(custom_values)
res_id = super(ProjectIssue, self.with_context(create_context)).message_new(msg, custom_values=defaults)
issue = self.browse(res_id)
email_list = issue.email_split(msg)
partner_ids = filter(None, issue._find_partner_from_emails(email_list))
issue.message_subscribe(partner_ids)
return res_id
when I add
'description' : msg.get('body'),
I can get the body of the email, but its on text format,
then I check on 'description' and I found this
description = fields.text('Private Note')
that's why I only get text format, not HTML format,
so I change the description format to this
description = fields.Html('Private Note')
then the format of description is back to normal and readable.

How can I display image in velocity template

How can I display this image in velocity template?
Is there any configuration required to display image?
I have java configuration for velocity.
Please help me.
Thanks in advance.
Thank you very much for your kind reply glw, issue already fixed. I forgot that email template takes only live images path which are deployed, not local project paths like src="${pageContext.request.contextPath}/resources/images/.jpg" Issue is fixed by src="www..com/images/.jpg".
I'm using base 64 image to populate data, the code for template is
<!DOCTYPE html>
<html>
<body style="margin:0;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="max-width: 640px; border: 1px solid #dfdfdf; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.5px; color: #404040;">
<tr>
<td valign="top" style="padding: 30px 20px 20px;">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#fff" style="border-collapse:collapse;border:1px solid #808080;">
<tr>
<td align="left" valign="top" style="padding: 10px; border: 1px solid #808080; color: #808080;">Address</td>
<td align="right" valign="top" style="padding: 10px; border: 1px solid #808080; color: #404040; font-weight: bold;">${address}</td>
</tr>
<tr>
<td align="left" valign="top" style="padding: 10px; border: 1px solid #808080; color: #404040; font-weight: bold;">Aadharphoto</td>
<td align="right" valign="top" style="padding: 10px; border: 1px solid #808080; color: #404040; font-weight: bold;">
<img src = 'data:image/png;base64,${photo}' alt="Aadharphoto" style="width:300px"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
code to populate template
Map<String, String> templatedata = eData(response);
/*Map<String, String> templatedata = new HashMap<>();
templatedata.put("address", response.getAddress());
templatedata.put("photo", response.getBase64Photo()); //iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==
[![enter image description here][1]][1]*/
public String createContent(EmailTemplate template, Map<String, String> data) {
return VelocityEngineUtils.mergeTemplateIntoString(velocityEngine, template.getFileName(), objectMap);
}
output image : https://i.stack.imgur.com/wvloX.png

jsfiddle: same code different result on same browser

This shows the working jfiddle (Click the color-picker)
http://jsfiddle.net/xztoqtd7/
This shows the non-working jfiddle (Click the color-picker)
http://jsfiddle.net/p7dm051z/
They should both change the color of the second row cells, but only one of them does that. Code:
HTML
<table>
<tr>
<td>
<input type="color" id="colorpicker1" />
</td>
<td>
<input type="color" id="colorpicker2" />
</td>
</tr>
<tr>
<td id="one">ipsum</td>
<td id="two">lorem</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
text-align: center;
}
input {
border: 0;
padding: 0;
margin: 0;
}
JS
$("#colorpicker1").on("change", function() {
$("#one").css("color", $("#colorpicker1").val());
});
$("#colorpicker2").on("change", function() {
$("#two").css("color", $("#colorpicker2").val());
});
Why is the result different?

CSS/HTML - How to set inner padding inside input?

When I try to set a padding it's not center anymore. It moves to the other side.
How can I set padding of the textbox input so that it's still aligned center?
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>
You can try adding
.textbox {
box-sizing: border-box;
}
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
box-sizing: border-box;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>