remove whitespace between multiple radio box - twig

I add multi radio box in twig page like this:
<div class="cc-selector">
<input id="avatar-1" type="radio" name="avatar" value="1" />
<label class="drinkcard-cc avatar-1" for="avatar-1"></label>
<input id="avatar-2" type="radio" name="avatar" value="2" />
<label class="drinkcard-cc avatar-2" for="avatar-2"></label>
<input id="avatar-3" type="radio" name="avatar" value="3" />
<label class="drinkcard-cc avatar-3" for="avatar-3"></label>
<input id="avatar-4" type="radio" name="avatar" value="4" />
<label class="drinkcard-cc avatar-4" for="avatar-4"></label>
<input id="avatar-5" type="radio" name="avatar" value="5" />
<label class="drinkcard-cc avatar-5" for="avatar-5"></label>
<input id="avatar-6" type="radio" name="avatar" value="6" />
<label class="drinkcard-cc avatar-6" for="avatar-6"></label>
</div>
in Output in see whitespace:
how do can i remove whitespace in twig template?!

You can use spaceless filter. It will do exactly what you want : removing whitespace between HTML elements only (keeping the ones inside).
Using this in Twig :
{% apply spaceless %}
<div class="cc-selector">
<input id="avatar-1" type="radio" name="avatar" value="1" />
<label class="drinkcard-cc avatar-1" for="avatar-1"></label>
<input id="avatar-2" type="radio" name="avatar" value="2" />
<label class="drinkcard-cc avatar-2" for="avatar-2"></label>
<input id="avatar-3" type="radio" name="avatar" value="3" />
<label class="drinkcard-cc avatar-3" for="avatar-3"></label>
<input id="avatar-4" type="radio" name="avatar" value="4" />
<label class="drinkcard-cc avatar-4" for="avatar-4"></label>
<input id="avatar-5" type="radio" name="avatar" value="5" />
<label class="drinkcard-cc avatar-5" for="avatar-5"></label>
<input id="avatar-6" type="radio" name="avatar" value="6" />
<label class="drinkcard-cc avatar-6" for="avatar-6"></label>
</div>
{% endapply %}
Will give this HTML :
<div class="cc-selector"><input id="avatar-1" type="radio" name="avatar" value="1" /><label class="drinkcard-cc avatar-1" for="avatar-1"></label><input id="avatar-2" type="radio" name="avatar" value="2" /><label class="drinkcard-cc avatar-2" for="avatar-2"></label><input id="avatar-3" type="radio" name="avatar" value="3" /><label class="drinkcard-cc avatar-3" for="avatar-3"></label><input id="avatar-4" type="radio" name="avatar" value="4" /><label class="drinkcard-cc avatar-4" for="avatar-4"></label><input id="avatar-5" type="radio" name="avatar" value="5" /><label class="drinkcard-cc avatar-5" for="avatar-5"></label><input id="avatar-6" type="radio" name="avatar" value="6" /><label class="drinkcard-cc avatar-6" for="avatar-6"></label></div>

Since the contents of the template is HTML I'd advise you to use SeeoX's approach.
But I've decided to mention the other option to assign the contents of a template to a variable and apply filters which could be useful sometimes:
{% set contents %}
{% include ('cc-selector.twig') %}
{% endset %}
contents spaceless:
{{ contents | spaceless }}
replace only new lines:
{{ contents | replace({"\n": ""}) | raw }}
working example

It may be because of the linebreak between the input & the label. Removing that space may/may not help, but try that.
<div class="cc-selector">
<input id="avatar-1" type="radio" name="avatar" value="1" /><label class="drinkcard-cc avatar-1" for="avatar-1"></label><input id="avatar-2" type="radio" name="avatar" value="2" /><label class="drinkcard-cc avatar-2" for="avatar-2"></label><input id="avatar-3" type="radio" name="avatar" value="3" /><label class="drinkcard-cc avatar-3" for="avatar-3"></label><input id="avatar-4" type="radio" name="avatar" value="4" /><label class="drinkcard-cc avatar-4" for="avatar-4"></label><input id="avatar-5" type="radio" name="avatar" value="5" /><label class="drinkcard-cc avatar-5" for="avatar-5"></label><input id="avatar-6" type="radio" name="avatar" value="6" /><label class="drinkcard-cc avatar-6" for="avatar-6"></label>
</div>

Related

how can i change string format of Price in database to integer format in mongodb?

This is my input form. Here, the Price label save as string in Database. How can change it into integer format. I'm using mongodb 3.2 version
<section>
<div class="container mt-4">
<div class="row">
<div class="col-md-6">
<h2 class="text-center">Add Product</h2>
<form action="/admin/add-product" method="POST" enctype="multipart/form-data">
<label for="">Name</label>
<input type="text" name="Name" class="form-control">
<label for="">Category</label>
<input type="text" name="Category" class="form-control">
<label for="">Price</label>
<input type="number" name="Price" class="form-control">
<label for="">Description</label>
<input type="text" name="Description" class="form-control">
<label for="">Image</label>
<input type="file" name="Image" class="form-control">
<button type="submit" class="btn btn-success mt-4">Submit</button>
</form>
</div>
</div>
</div>
</section>
Add to cart
addProduct:(product,callback)=>{
db.get().collection("product").insertOne(product).then((data)=>{
console.log(data)
callback(data.ops[0]._id)
})
}
Before adding the product to database change Price to integer
let Price=parseInt(req.body.Price)
req.body.Price=Price
then add product to mongodb

Can't bind to 'formGroup' since it isn't a known property of 'form'. (" <div class="upload-right"> <div class="signup">

I am using Angular 7. I don't know where the error occurs in this form. It always shows form is not a known property of this method. Where did I make a mistake in the below code? I am getting this error.
Can't bind to 'formGroup' since it isn't a known property of 'form'
<form [formGroup]="newClientForm">
<fieldset>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter name" class="form-control" name="name" formControlName="name" #name required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter email" class="form-control" name="email" formControlName="email" #email required="required" pattern="([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="password" class="st0" placeholder="Password" class="form-control" name="password" formControlName="password" #password required="required" pattern=".{6,}"
title="Minimum 6 characters required" autocomplete="off" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter mobile" class="form-control" name="mobile" formControlName="mobile" #mobile required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<!-- <input type="submit" value="Register" /> -->
<button type="submit" class="st1" value="register" (click)="register()">Register</button>
</div>
<br>
<div class="row" style="text-align:center">
<div class="forgot">
Login?
</div>
</div>
<br>
</fieldset>
</form>
Try this stackblitz link reactive form. I have created a similar form using your html code and have run it.
Things i did were very basics:
Imported ReactiveFormsModule from #angular/forms
and have created a formgroup in ts file and added all controls you used in your html.
It runs well.
Let me know if your issue is different from the solution provided.

Extra Underline in Material Component(Angular2)

I am new in Material Component and facing a problem since yesterday. I am using a input text filed for design a signup form but every field take extra underline, I cannot find out the issue please.
<form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm">
<label class="registr">Registration Form</label>
<table class="example-full-width" cellspacing="0"><tr>
<td><mat-form-field class="example-full-width">
<input matInput id="fname" name="fname" placeholder="First name">
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<input matInput id="lname" name="lname" placeholder="Last Name">
</mat-form-field></td>
</tr></table>
<table class="example-full-width" cellspacing="0"><tr>
<td><mat-form-field class="example-full-width">
<input type="email" matInput placeholder="Enter your email" id="email" name="email" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<mat-select placeholder="Select Role">
<mat-option *ngFor="let role of roles" [value]="role" value="option" required>{{role}}</mat-option>
</mat-select>
</mat-form-field></td>
</tr></table>
<mat-form-field>
<input type="password" matInput placeholder="Enter your password" id="password" name="password" [type]="hide ? 'password' : 'text'">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<button type="button" class="btn btn-info d-none d-lg-block m-l-15" type="submit">Sign Up</button>
</form>

Express fails to find resources in case of parameterized route. What am I missing?

In my express app I have a separate file for middlewares. I used express.static to make the resources available to the app. Code from middlewares.js...
app.use(express.static('public'));
app.use(express.static('node_modules/vue/dist'));
app.use(express.static('node_modules/bootstrap/dist/css'));
app.use(express.static('node_modules/bootstrap/dist/js'));
app.use(express.static('node_modules/multiple.js'));
app.use(express.static('node_modules/chart.js/dist'));
It works fine for all the routes. However, when I try to define a parameterized route, and render a template this way, it fails to load up the resources. Express fails to find CSS/JS/Image files from those statics. What am I missing here? Here is my code for the route..
app.get('/invoices/:id', app.authenticated, (req, res) => {
Invoices.find({_id: req.params.id}, (err, invoice) => {
if (err) {
res.json({error: err});
}
res.render('invoicesCreate');
});
});
Updated: The View file
{{#section 'classes'}}has-navigation page-dashboard{{/section}}
{{#section 'body-classes'}}-fluid{{/section}}
<div class="row" id="invoicer">
<div class="col-xs-12 col-md-6">
Fill your details and get live preview in the right side
<form class="" action="/invoices" method="post" enctype="multipart/form-data">
<div class="">
<div class="invoiceform-logo-container">
<input type="file" name="profilelogo" id="fileinput" accept="image/*" v-on:change="updateImage()">
<img v-bind:src="logo" alt="" />
</div>
<div class="invoiceform-number"></div>
<div class="invoiceform-currency"></div>
</div>
<div class="divider"></div>
<div class="">
Your Name / Company Name
<textarea name="company_name" rows="8" cols="40" v-model="from"></textarea>
Client Name / Company Name
<textarea name="client_name" rows="8" cols="40" v-model="to"></textarea>
\{{date_title}}
<input type="date" name="start_date" v-model="date">
\{{due_date_title}}
<input type="date" name="end_date" v-model="due_date" v-bind:min="date">
\{{balance_title}} \{{balance}}
<div class="input-group">
<span class="input-group-addon">$</span>
<input name="end_date" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="invoiceform-itemlist" v-on:focusout="checkToRemove()">
<div class="">
\{{item_header}}
\{{quantity_header}}
\{{unit_cost_header}}
\{{amount_header}}
</div>
<div class="" v-for="item in items">
<input type="text" name="items[1][item_name]" v-model="item.head">
<input type="number" name="items[1][item_quantity]" v-model="item.quantity" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_rate]" v-model="item.rate" min="0" v-on:blur="updateAmount($index)">
<input type="number" name="items[1][item_amount]" v-model="item.amount">
</div>
<button type="button" name="button">Add Item</button>
</div>
<div class="divider"></div>
<div class="">
\{{subtotal_title}} \{{subtotal}}
\{{tax_title}}
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button" v-model="tax">
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> %
</span>
<span class="input-group-addon">
<input type="radio" name="" aria-label="Checkbox for following text input"> F
</span>
</div>
<div id="discount" v-if="fields.discount">
Discount <input type="number" name="" v-model="discounts">
</div>
<div id="shipping" v-if="fields.shipping">
Shipping <input type="number" name="shipping" v-model="shipping">
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="discount" v-model="fields.discount"> \{{discounts_title}}
</label>
<label class="btn btn-primary">
<input type="checkbox" name="shipping" v-model="fields.shipping"> \{{shipping_title}}
</label>
</div>
</div>
<div class="divider"></div>
<div class="">
Total <input type="number" name="name" v-model="total" min="0">
\{{amount_paid_title}} <input type="number" name="total" v-model="amount_paid" min="0" v-bind:max="total">
</div>
<div class="divider"></div>
<div class="">
\{{notes_title}}
<input type="text" name="name" v-model="notes">
\{{payment_terms_title}}
<input type="text" name="name" v-model="terms">
<button type="submit" name="button">Save Now</button>
<button type="button" name="button">Download PDF</button>
</div>
</form>
</div>
<div class="col-xs-12 col-md-6 hidden-sm-down"></div>
</div>
{{#section 'script'}}
window.invoice = {{{json defaultInvoice}}}
console.log({{{json defaultInvoice}}})
{{/section}}

Empty message with Formt in MODx

Here is my code of send-page:
<p>[[!FormIt?
&hooks=`email,FormItLog,spam,emailUser,redirect`
&emailTo=`heash94#gmail.com`
&emailSubject=`[[+subject]]`
&emailFromName=`[[+name]]`
&emailTpl=`ContactTpl`
&redirectTo=`62` ]]</p>
<div>[[+fi.error.error_message]]</div>
<form action="[[~[[*id]]]]" method="post"><input type="hidden" name="nospam:blank" value="" />
<div>
<label for="name">Name: </label> <input id="name" type="text" name="name:required" value="[[+fi.name]]" /> <span>[[+fi.error.name]]</span>
</div>
<div>
<label for="name">Email: </label> <input id="email" type="text" name="email:email:required" value="[[+fi.email]]" /> <span>[[+fi.error.email]]</span></div>
<div>
<label for="subject">Theme: </label> <input id="subject" type="text" name="subject:required:stripTags" value="[[+fi.subject]]" /> <span>[[+fi.error.subject]]</span></div>
<div>
<label for="message">Text: </label><span>[[+fi.error.message]]</span> <br /> <textarea id="message" name="message:required:stripTags" rows="7" cols="55">[[+fi.message]]</textarea></div>
<div>
<input type="submit" name="Submit" value="Отправить" /></div>
</form>
I tried many examples, but they send to my email empty messages.
Here is my reciver-page code:
This message [[+name]] ([[+email]]) was sand with callback form:
[[+message]]
But in response I have only "This message () was sent with callback form: ".
Modx Revolution.
Sounds like modx is not seeing the name="email:email:required" as 'email' - put your CSS/JS validation in another attribute & also use the &validate attribute for the formit call.

Resources