I'm using MPDF for printing reports.
I want to display table head only once and table body as per for loop.
When i'm printing result in table using echo then it will display proper but when i'm using MPDF then table is not in proper format.
Statement echo $tr2.$data2; display proper structure
Statement $mpdf->WriteHTML($tr2.$data2); display collapse table
Below is my code :
for ($i = 0; $i < $totl_rows; $i++) {
if($i == 0){
$tr2 = '<table style="border-collapse: collapse; width: 100%; table-layout: fixed; " border="1" cellpadding="5"><tr>'
. '<td style="width: 10%; font-weight: bold;">Consolidation Month</td>'
.'<td style="width: 10%; font-weight: bold;">Transfer Entry No.</td>'
. '<td style=" width: 10%;font-weight: bold;">Transfer Entry Dt.</td>'
. '<td style=" width: 10%; font-weight: bold;">Amount</td>'
. '<td style=" width: 10%;font-weight: bold;">Grant No.</td>'
. '<td style=" width: 10%;font-weight: bold;">Fun Head No.</td>'
. '<td style=" width: 10%;font-weight: bold;">Object Code</td>'
. '<td style=" width: 10%;font-weight: bold;">Category Code</td>'
. '<td style=" width: 10%;font-weight: bold;">UTL Trans Type</td>'
. '<td style=" width: 10%;font-weight: bold;">UTL Dt.</td>'
. '<td style=" width: 10%;font-weight: bold;">Utilised Amount</td></tr>';
}
else {
$tr2= "<table style='border-collapse: collapse; width: 100%; table-layout: fixed;' border='1'><tr></tr>";
}
$data2 = '<tr>'
. '<td style=" width: 10%;">' . $consolidationmonth[$i] . '</td>'
. '<td style=" width: 10%;">' . $tenumber[$i] . '</td>'
. '<td style=" width: 10%;">' . $tedate1[$i] . '</td>'
. '<td style=" width: 10%;">' . $amount[$i] . '</td>'
. '<td style=" width: 10%;">' . $grantno[$i] . '</td>'
. '<td style=" width: 10%;">' . $funcheadno[$i] . '</td>'
. '<td style=" width: 10%;">' . $objectcode[$i] . '</td>'
. '<td style=" width: 10%;">' . $categorycode[$i] .'</td>'
. '<td style=" width: 10%;">' . $utl_trans_type[$i] . '</td>'
.'<td style=" width: 10%;">' . $utl_datee[$i] . '</td>'
. '<td style=" width: 10%;">'. $utilised_amount[$i] . '</td></tr></table>';
echo $tr2.$data2;
$mpdf->WriteHTML($tr2.$data2);
}
include("mpdf60/mpdf.php");
$mpdf=new mPDF('c');
$tr2 = '';
$data2 = '';
for ($i = 0; $i < $totl_rows; $i++) {
if($i == 0){
// *** INICIALIZA TABLA Y ENCABEZADOS (TABLE/HEAD) ***
$tr2 = '<table style="border-collapse: collapse; width: 100%; table-layout: fixed; " border="1" cellpadding="5"><tr>'
. '<td style="width: 10%; font-weight: bold;">Consolidation Month</td>'
.'<td style="width: 10%; font-weight: bold;">Transfer Entry No.</td>'
. '<td style=" width: 10%;font-weight: bold;">Transfer Entry Dt.</td>'
. '<td style=" width: 10%; font-weight: bold;">Amount</td>'
. '<td style=" width: 10%;font-weight: bold;">Grant No.</td>'
. '<td style=" width: 10%;font-weight: bold;">Fun Head No.</td>'
. '<td style=" width: 10%;font-weight: bold;">Object Code</td>'
. '<td style=" width: 10%;font-weight: bold;">Category Code</td>'
. '<td style=" width: 10%;font-weight: bold;">UTL Trans Type</td>'
. '<td style=" width: 10%;font-weight: bold;">UTL Dt.</td>'
. '<td style=" width: 10%;font-weight: bold;">Utilised Amount</td></tr>';
}
else {
// *** ROWS ** FILAS ****
$data2 .= '<tr>'
. '<td style=" width: 10%;">' . $consolidationmonth[$i] . '</td>'
. '<td style=" width: 10%;">' . $tenumber[$i] . '</td>'
. '<td style=" width: 10%;">' . $tedate1[$i] . '</td>'
. '<td style=" width: 10%;">' . $amount[$i] . '</td>'
. '<td style=" width: 10%;">' . $grantno[$i] . '</td>'
. '<td style=" width: 10%;">' . $funcheadno[$i] . '</td>'
. '<td style=" width: 10%;">' . $objectcode[$i] . '</td>'
. '<td style=" width: 10%;">' . $categorycode[$i] .'</td>'
. '<td style=" width: 10%;">' . $utl_trans_type[$i] . '</td>'
.'<td style=" width: 10%;">' . $utl_datee[$i] . '</td>'
. '<td style=" width: 10%;">'. $utilised_amount[$i] . '</td></tr>';
}
}
// ** CIERRA TABLA ***
$data2 .= '</table>';
$mpdf->WriteHTML($tr2.$data2);
$mpdf->Output();
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;
},
So I have this HTML template to transform to pdf using the RNHTMLToPDF package:
export default function getPdfTemplate(requestData, items, switchValues) {
return `
<div style="display: flex; flex-direction: column; width: 100%;">
<div id="pdf-header" style="display: flex; flex-direction: row; width: 100%;">
<div style="display: flex; flex-direction: column; width: 50%;">
<div style="font-size: 10px"> <b>Nome do cliente: </b> ${requestData.nomeCliente} </div>
<div style="font-size: 10px"> <b>Código do cliente: </b> ${
requestData.codigoCliente
} </div>
<div style="font-size: 10px"> <b>Número do pedido: </b> ${requestData.numPedido} </div>
<div style="font-size: 10px"> <b>Gerado em: </b> ${new Date().toLocaleDateString()} via Sistema de vendas </div>
</div>
<div style="display: flex; flex-direction: column; width: 50%;">
<div style="font-size: 10px"> <b>Data da negociação: </b> ${moment(
requestData.dataPedido,
"YYYYMMDD"
).format("DD/MM/YYYY")} - ${requestData.horaPedido} </div>
<div style="font-size: 10px"> <b>Quantidade de itens: ${
requestData.quantidadeItem
} </b> </div>
<div style="font-size: 10px"> <b>Valor total do pedido: </b> R$ ${
requestData.valorTotalPedido
} </div>
<div style="font-size: 10px"> <b>Valor do desconto negociado: </b> R$ ${
requestData.discount
} </div>
</div>
</div>
<hr style="margin: 14px 0 8px 0;">
<div id="pdf-table">
<h2 style="font-size: 10px; margin: 8px 0;">Lista de itens do pedido</h2>
<table style="background-color: #F3F3F4; width: 100%; border-collapse: collapse" >
<thead style="background-color: #656F7B;" >
<tr style="color: #FFF; font-size: 8px;" >
<th style="padding: 5px; font-size: 8px;">MERCADORIA</th>
<th style="padding: 5px; font-size: 8px;">QTDE</th>
<th style="padding: 5px; font-size: 8px;">COD BARRAS</th>
<th style="padding: 5px; font-size: 8px;">UNIT.LI+IMP</th>
<th style="padding: 5px; font-size: 8px;">TOL.LIQ+IMP</th>
<th style="padding: 5px; font-size: 8px;">COND PGTO</th>
<th style="padding: 5px; font-size: 8px;">VLR.FRETE</th>
<th style="padding: 5px; font-size: 8px;">FIL EXPED</th>
<th style="padding: 5px; font-size: 8px;">FIL FAT</th>
<th style="padding: 5px; font-size: 8px;">% DE ICMS</th>
</tr>
</thead>
<tbody>
${
items && items.length > 0 ? (
items.map(
(item, index) =>
`<tr style="line-height: 45px; background:${
index % 2 != 0 ? "#FFFFFF" : "initial"
}">
<td colspan="10" style="padding: 0px 10px; text-align:start; font-size: 8px;">${item.CODMER} - ${item.DESMER}</td>
<!--td colspan="9" style="font-size: 8px;"></td-->
</tr>
<tr style="margin: 4px 10px; line-height: 45px; background:${
index % 2 != 0 ? "#FFFFFF" : "initial"
}">
<td colspan="1" style="text-align:center; font-size: 6px;"> - </td>
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.quantidadeMercadoria
}</td> <!-- qtd -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.CODBRRMER
}</td> <!-- cód barras item -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${(
item.VLRLIQMER +
item.VLRFRTMER +
item.stb.valorSTBTotal +
item.valorIPITotal
).toFixed(2)}
</td> <!-- Valor Unitário Líquido + Imposto + Frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${(
(item.VLRLIQMER + item.VLRFRTMER) *
item.quantidadeMercadoria +
item.stb.valorSTBTotal +
item.valorIPITotal
).toFixed(2)}
</td> <!-- Total líquido + Imposto + Frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
item.condicaoPagamento.codigoCondicaoPagamento
}</td> <!-- condição de pagamento -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.freightValue ? item.frete : ''
}</td> <!-- valor frete -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.exp ? item.CODFILEPD : ''
}</td> <!-- filial expedição -->
<td colspan="1" style="text-align:center; font-size: 6px;">${
switchValues.fat ? item.CODFILFAT : ''
}</td> <!-- filial faturamento -->
<td colspan="1" style="text-align:center; font-size: 6px;">
${
switchValues.icms
? item.mercadoria.percentualICMS
.percentualICMSMercadoria
: ''
}</td> <!-- percentual ICMS -->
</tr>`
)
) : null
}
</tbody>
</table>
</div>
<div id="pdf-footer">
<br>
<hr>
<h2 style="font-size: 10px;">Observações</h2>
<div style="border: 1px solid #9BA3A8; border-radius: 8px; margin: 8px 0; padding: 12px; font-size: 6px;">
** ATENÇÃO! As informações deste arquivo destinam-se a mera conferência da descrição, quantidade e valor (nesta data) dos itens pedidos, sendo certo que, até o faturamento da mercadoria, o pedido poderá sofrer alterações, seja pela falta de produto em estoque, por variações de alíquotas de ICMS, IPI, débitos do cliente perante o Fisco Estadual, entre outros motivos, razão pela qual este documento não vincula as partes.
</div>
<div style="border: 1px solid #9BA3A8; border-radius: 8px; margin: 8px 0; padding: 12px; font-size: 6px;">
** Informamos ainda, que o presente pedido encontra-se em aberto até a data do faturamento, pelo que V. Sa. poderá promover o cancelamento ou a inclusão de novos itens, o que poderá provocar a modificação dos percentuais de desconto, influenciando no preço final dos pedidos.
</div>
</div>
</div>
`
}
Printing this awkward comma character. I can't find it anywhere in the respective HTML
Any reason for this mystery?
Found the problem
Just had to add a join at the end of the map function item.map(el...).join('')
I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.
<template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add"><a class="add-link"><span #click="insert_Row()" class="plus-icon">+</span></a></td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2',"<input type='text'>", "<input type='text'>", "<input type='text'>"],
counter: 2
},
methods: {
insert_Row() {
this.counter++;
this.tableRows.push("D " +this.counter);
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border:1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover, &:focus {
border:1px solid #182241;
background-color: #182241;
}
}
</style>
I am trying to have two rows available on the table, but the user may need more rows to enter more data part of a form that will be submitted. I am having a hard time making this work. Can someone help with this? I am trying to add a row when the user clicks on the little plus icon at the end of the last TR > TD.* <template>
<table id="myTable">
<tbody>
<tr v-for="(content1, content2, content3, content4, index) in tableRows">
<td scope="row" data-label="">{{content1}}</td>
<td data-label="Filename">{{content2}}</td>
<td data-label="Image Title">{{content3}}</td>
<td data-label="Caption">{{content4}}></td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click="insert_Row()" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data: {
tableRows: ['D2', " < input type = 'text' > ", " < input type = 'text' > ", " < input type = 'text' > "], counter: 2 }, methods: { insert_Row() { this.counter++; this.tableRows.push("
D " +this.counter); } } }
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style> ``` Okay now, after a good response, I have edited the code. It now looks like this. ``` <template>
<table id="myTable">
<tbody>
<tr>
<td scope="row" data-label="">D1</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr>
<td scope="row" data-label="">D2</td>
<td data-label="Filename">
<input type="text">
</td>
<td data-label="Image Title">
<input type="text">
</td>
<td data-label="Caption">
<input type="text">
</td>
<td class="addrow" data-label="Add"></td>
</tr>
<tr v-for="(item, index) in tableRows" :key="item.id">
<td scope="row" data-label="">D{{item.id}}</td>
<td data-label="Filename">
<input type="text" v-model="item.Filename">
</td>
<td data-label="Image Title">
<input type="text" v-model="item.ImageTitle">
</td>
<td data-label="Caption">
<input type="text" v-model="item.Caption">
</td>
<td class="addrow" data-label="Add">
<a class="add-link">
<span #click.stop="insert_Row" class="plus-icon">+</span>
</a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableRows: [{
"id": 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
}]
}
},
methods: {
insert_Row() {
this.tableRows.push({
"id": this.tableRows.length + 3,
"Filename": "",
"ImageTitle": "",
"Caption": ""
})
}
}
}
</script>
<style lang="scss">
td,
th {
padding: .4rem;
&.addrow {
border: 0 none;
width: 2.3rem;
padding: 1.7rem 0 0 0;
vertical-align: middle;
text-align: center;
}
}
td .plus-icon {
border: 1px solid cornflowerblue;
background-color: cornflowerblue;
color: #fff;
text-align: center;
padding: 0 .7rem;
box-sizing: border-box;
border-radius: 50%;
transition: all ease-in-out .4s;
&:hover,
&:focus {
border: 1px solid #182241;
background-color: #182241;
}
}
</style>
I want to only have the icon plus on the last row cell. I wish to hide or remove the others, but also, I edited the code to start with 3 rows instead of one.
Your data should be reactive.
You should bind your data to the html inputs.
You need to rethink your code a lot. Here is an example of how you could get started: Vue SFC Playground
For an unknown reason, the active SSL on my website gets unactive on 1 specify page whenever I add Internal CSS there to add star icons to the 'Review form'. When I remove that styling part, the SSL is back up again.
I really have no clue how adding a simple star icon to my form disables the SSL? Anybody has any clues, or tricks?
See visual examples, and the script of my websites review form below:
Visual example of the form, with and without stars / active SSL
<table>
<tr>
<td>
<form action="process-review" method="post">
Overall score:
<br><span class="starRating1">
<input id="rating5A" type="radio" name="rating1" value="5" required>
<label for="rating5A">5</label>
<input id="rating4A" type="radio" name="rating1" value="4">
<label for="rating4A">4</label>
<input id="rating3A" type="radio" name="rating1" value="3">
<label for="rating3A">3</label>
<input id="rating2A" type="radio" name="rating1" value="2">
<label for="rating2A">2</label>
<input id="rating1A" type="radio" name="rating1" value="1">
<label for="rating1A">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment1" rows="5" cols="48" maxlength="10000"></textarea>
<br>
<br> Graphics:
<br><span class="starRating2">
<input id="rating5B" type="radio" name="rating2" value="5" required>
<label for="rating5B">5</label>
<input id="rating4B" type="radio" name="rating2" value="4">
<label for="rating4B">4</label>
<input id="rating3B" type="radio" name="rating2" value="3">
<label for="rating3B">3</label>
<input id="rating2B" type="radio" name="rating2" value="2">
<label for="rating2B">2</label>
<input id="rating1B" type="radio" name="rating2" value="1">
<label for="rating1B">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment2" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> Sound:
<br><span class="starRating3">
<input id="rating5C" type="radio" name="rating3" value="5" required>
<label for="rating5C">5</label>
<input id="rating4C" type="radio" name="rating3" value="4">
<label for="rating4C">4</label>
<input id="rating3C" type="radio" name="rating3" value="3">
<label for="rating3C">3</label>
<input id="rating2C" type="radio" name="rating3" value="2">
<label for="rating2C">2</label>
<input id="rating1C" type="radio" name="rating3" value="1">
<label for="rating1C">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment3" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> Gameplay:
<br><span class="starRating4">
<input id="rating5D" type="radio" name="rating4" value="5" required>
<label for="rating5D">5</label>
<input id="rating4D" type="radio" name="rating4" value="4">
<label for="rating4D">4</label>
<input id="rating3D" type="radio" name="rating4" value="3">
<label for="rating3D">3</label>
<input id="rating2D" type="radio" name="rating4" value="2">
<label for="rating2D">2</label>
<input id="rating1D" type="radio" name="rating4" value="1">
<label for="rating1D">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment4" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> Story:
<br><span class="starRating5">
<input id="rating5E" type="radio" name="rating5" value="5" required>
<label for="rating5E">5</label>
<input id="rating4E" type="radio" name="rating5" value="4">
<label for="rating4E">4</label>
<input id="rating3E" type="radio" name="rating5" value="3">
<label for="rating3E">3</label>
<input id="rating2E" type="radio" name="rating5" value="2">
<label for="rating2E">2</label>
<input id="rating1E" type="radio" name="rating5" value="1">
<label for="rating1E">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment5" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> User Interface:
<br><span class="starRating6">
<input id="rating5F" type="radio" name="rating6" value="5" required>
<label for="rating5F">5</label>
<input id="rating4F" type="radio" name="rating6" value="4">
<label for="rating4F">4</label>
<input id="rating3F" type="radio" name="rating6" value="3">
<label for="rating3F">3</label>
<input id="rating2F" type="radio" name="rating6" value="2">
<label for="rating2F">2</label>
<input id="rating1F" type="radio" name="rating6" value="1">
<label for="rating1F">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment6" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br>
<br> Name* (will be published with your review):
<br>
<input style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="text" name="name1" size="50" maxlength="50" required/>
<br>
<br> E-mail (hidden with your review):
<br>
<input style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="text" name="email1" size="50" maxlength="50" />
<br>
<br> Anti-bot verification*:
<div class="check">
<label>4 x 3 =</label>
<input min="0" max="999999" style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="number" name="not_robot1" required="required">
</div>
<br>
<input style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="submit" name="submit" value="Send" />
</form>
</td>
</tr>
</table>
<head>
<style>
.starRating1:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating1:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating1:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating1:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating1:not(old) > label:hover:before,
.starRating1:not(old) > label:hover ~ label:before,
.starRating1:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating2:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating2:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating2:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating2:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating2:not(old) > label:hover:before,
.starRating2:not(old) > label:hover ~ label:before,
.starRating2:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating3:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating3:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating3:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating3:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating3:not(old) > label:hover:before,
.starRating3:not(old) > label:hover ~ label:before,
.starRating3:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating4:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating4:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating4:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating4:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating4:not(old) > label:hover:before,
.starRating4:not(old) > label:hover ~ label:before,
.starRating4:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating5:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating5:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating5:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating5:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating5:not(old) > label:hover:before,
.starRating5:not(old) > label:hover ~ label:before,
.starRating5:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating6:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating6:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating6:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating6:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating6:not(old) > label:hover:before,
.starRating6:not(old) > label:hover ~ label:before,
.starRating6:not(:hover) >:checked ~ label:before {
opacity: 1;
}
</style>
</head>
The problem is this:
background: url('http://empireofthewicked.com/images/star-off.png');
'http' part should be 'https' for a safe connection. Every image served must come from an 'https' connection. So if you load it externally from 'http' it will be labeled as unsafe. You can solve it by loading it from your own server or use the 'https' version if available.
Here I am using the angular material form for login form using Angular5. when the applications starts, the login form placeholder couldn't be over-written. But once one I logged in and logged out, then only the input fields would be over written. Screenshot
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide">{{!hide ? 'visibility' : 'visibility_off' }}</mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>
CSS File
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}
You can use mat-placeholder and handle visibility easily by CSS
styles:
.placeholder.hide-ph {
display: none;
}
component.ts:
<input
...
[value]="value"
floatPlaceholder="never"
(focus)="hidePlaceholder = true" // <== you need this
/>
<mat-icon class="caret" matSuffix>arrow_drop_down</mat-icon>
<mat-placeholder
class="placeholder"
[class.hide-ph]="!!value || hidePlaceholder" // <== and this to hide placeholder by css
>
{{ placeholder }}
</mat-placeholder>
Its working fine for me.
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide"></mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>