I want a gradient shadow along the side of the content row. The gradient must expand in relation to the content.
What I'm doing right now is having 9 td's with a right border next to my content. This works in Thunderbird, but not Outlook:
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #cbcbcb;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c9c9c9;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c6c6c6;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #c2c2c2;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #bdbdbd;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #b6b6b6;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #afafaf;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #a7a7a7;"></td>
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #9e9e9e;"></td>
I get a nice gradient shadow in Thunderbird, but in Outlook I get the left-border as a white line. I have also tried to to make the td's like: this:
<td style="width: 1; bgcolor: #cbcbcb"></td>
This works in outlook, but Thunderbird does not seems to render a td at all that has no content.
Last I tried to make a left and right border like this:
<td style="border: collapse; border-spacing: 0; border-right: 1px solid #cbcbcb; left-border: #c9c9c9;"></td>
This worked in Thunderbird but not in Outlook.
Can you please help me?
I solved it by using a transparent 1x1px gif like this:
<td rowspan="6" width="1" bgcolor="#9e9e9e"><img src="http://www.blabla.com/new_mail_template/spacer.gif"></td>
Thunderbird does not show empty cells so I had to put something into them
Related
I am building an app in Vue that is tracking the sum of donations paid to my ExtraLife Team and tallies them up based on a user-submitted #tag in the message provided with the donation. Currently, I've been working on a Goal Editor view using what I've named the adminView component to display the full goals table and allow a user to edit the rows. The problem that I'm having is that for some reason when I attempt to update(goal) I'm getting a 400 (Bad Request) response. Obviously, I must have something malformed or missing in the data, I'm just not seeing what.
Here is my current #/components/AdminView.vue (Auth url and Key Removed)
<template>
<div id="adminView">
<h1>Goal Editor</h1>
<table style="border-collapse: collapse; width: 80%">
<thead>
<tr style="border: 1px solid #ddd">
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 3%;
"
>
ID
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 5%;
"
>
Tag
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 35%;
"
>
Description
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 10%;
"
>
Target Amount
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 10%;
"
>
Current Donations
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 4%;
"
>
Active
</th>
<th
style="
padding: 8px;
text-align: left;
border: 1px solid #ddd;
width: 6%;
"
></th>
</tr>
</thead>
<tbody>
<tr
v-for="(goal, index) in goals"
:key="goal.goal_id"
:style="[index % 2 == 0 ? 'background-color: #f2f2f2' : '']"
>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
{{ goal.goal_id }}
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.tag"
v-if="goal.editing"
type="text"
style="border: none; outline: none; width: 100%"
/>
<span v-else>#{{ goal.tag }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_description"
v-if="goal.editing"
type="text"
style="border: none; outline: none; width: 100%"
/>
<span v-else>{{ goal.goal_description }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_target"
v-if="goal.editing"
type="number"
style="border: none; outline: none; width: 100%"
/>
<span v-else>${{ goal.goal_target }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.goal_tally"
v-if="goal.editing"
type="number"
style="border: none; outline: none; width: 100%"
/>
<span v-else>${{ goal.goal_tally }}</span>
</td>
<td style="padding: 8px; text-align: left; border: 1px solid #ddd">
<input
v-model="goal.active"
v-if="goal.editing"
type="checkbox"
style="outline: none"
/>
<span v-else>{{ goal.active }}</span>
</td>
<td style="padding: 8px; text-align: center; border: 1px solid #ddd">
<button
v-if="goal.editing"
#click="saveGoal(goal)"
style="
outline: none;
border: none;
background-color: #4caf50;
color: white;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
"
>
Save
</button>
<button
v-else
#click="editGoal(goal)"
style="
outline: none;
border: none;
background-color: #f2f2f2;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
"
>
Edit
</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { createClient } from "#supabase/supabase-js"; // Import the Supabase client
export default {
name: "adminView",
data() {
return {
supabase: null,
session: null,
error: null,
goals: [],
};
},
async created() {
// Create the Supabase client object
this.supabase = createClient(
"MY DB URL IS HERE",
"MY DB SECRET KEY IS HERE"
);
// Fetch the current user's session
const { data, error } = await this.supabase.auth.getSession();
this.session = data;
this.error = error;
// Fetch the goals from the database
await this.fetchGoals();
},
methods: {
async fetchGoals() {
console.log("Fetching goals...");
const { data, error } = await this.supabase.from("goals").select("*");
console.log(data, error);
this.goals = data;
console.log("Goals fetched!");
console.log(this.goals);
},
editGoal(goal) {
goal.editing = true;
},
async saveGoal(goal) {
console.log(goal);
goal.editing = false;
await this.supabase.from("goals").update(goal);
},
},
};
</script>
<style>
#adminView {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
Thanks to a comment from #kissu I remembered to check the network tab and compared it to a manual request and discovered that I had an extra value in this.goal that was making it's way into the request. I fixed by deleting the extra value and then setting it back to false.
async saveGoal(goal) {
delete goal.editing;
console.log(goal);
await this.supabase
.from("goals")
.update(goal)
.eq("goal_id", goal.goal_id);
goal.editing = false;
},
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
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?
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>
I'm building a site that includes a table in the middle of the homepage, and I can't seem to get a line (looks like an <hr> line) to disappear from the top of it. Here's a link to the page http://marccary.com/test and here's the code I'm using for the table:
<table cellspacing="0" cellpadding="0" border="none">
<colgroup border="none">
<col span="1" width="400" >
<col span="1" width="400" >
</colgroup>
<tr>
<td height="225" width="600"><p align="center">
<iframe width="400" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F84936057%3Fsecret_token%3Ds-4zQJw&show_artwork=true&secret_url=true"></iframe><br><span style="font-size:20px;">Marc Cary on Soundcloud>></span></p></td>
<td height="225" width="600"><p align="center">
<iframe width="400" height="225" src="http://www.youtube.com/embed/j9GhIaaEC6c" frameborder="0" allowfullscreen></iframe>
<span style="font-size:20px;">Marc Cary's YouTube channel>></savaipan></p></td></tr></table>
I've gone into my CSS and tried to make sure there are no borders on tables. I've put the following code into my CSS stylesheet:
table {
border-collapse: separate;
border-spacing: 0;
border: none !important;
border-top: none;
border-bottom: none;
}
caption,
th {
border-bottom: none;
border: none;
border-top: none;
}
td {
font-weight: normal;
text-align: left;
border-top: none;
border: none;
border-bottom: none;
}
tr {
border: none;
border-bottom: none;
border-top: none;
}
Still no luck. Does anyone have a suggestion?
You have a CSS setting:
.entry-content td, .comment-content td {
border-top: 1px solid #EDEDED;
}
Thats the border you see.
This CSS
border-top: none;
border: none;
border-bottom: none;
can be shortened to just
border: none;
Add the following to your CSS:
hr {
height: 0px !important;
}
It seems you're using a CMS software to develop your site and the template you're using is actually putting an <hr> at
<div id="page" ...>
<header id="masthead" ...>
<hgroup ...>
<nav id="site-navigation" ...>
<hr>
</header>
<div id="main" ...>
<footer ...>
</div>