Hi im trying to design my checkbox in odoo i want it to have a label to the right side of the checkbox just like this
Any Idea how can I Achieve this?
I've tried adding <span>Percentage</span> After my field but its always breaking the line
Suppose you have two checkbox fields chk1 and chk2, To make them appear like in the picture you will need to:
Add two labels one with Discount Mode string and another with an empty string.
Add a div after each label which will contain the field and its label.
<group>
<label for="chk1" string="Discount Mode"/>
<div class="o_row">
<field name="chk1"/>
<label for="chk1"/>
</div>
<label for='chk2' string=""/>
<div class="o_row">
<field name="chk2"/>
<label for="chk2"/>
</div>
</group>
You can refer to weight field in Product -> Inventory (tab) -> logistics (group).
Related
I made html template for my app. Basically it's a radio/checkboxes with text inputs which contain answers to questions. It worked just fine until I've decided to add ngModel to them. The thing is that when I add 2 or more answers and click on a label to set the correct one(/s) only the last one selects, moreover the answertext disappears whenever I click on label.
html text:
<div *ngIf="question.typeQuestions==1">
<div *ngFor="let item of question.selectedAnswer; let i = index" class="checkbox-variable">
<input type="checkbox" id="customCheckbox{{i}}" name="customCheckbox" class="checkbox-square" [(ngModel)]="item.isCorrect" >
<label class="checkbox-label" for="customCheckbox{{i}}"><input class="checkbox-text" type="text" [(ngModel)]="item.text"></label>
</div>
</div>
ChrisY solved the problem.
having multiple input with the same name is definitive wrong here. Try name="customCheckbox{{i}}". When using ngModel you need a name that identifies the form control. It has to be unique
If you have any input on what's going on here I sure would appreciate it. When I add more than one variant, my quantity input breaks.
I have a Shopify product with only ONE variant here:
https://three-main.myshopify.com/products/copy-of-liquid-hand-soap
I have essentially the same product duplicated, but with TWO variants here:
https://three-main.myshopify.com/products/liquid-hand-soap
Note:
If you're looking closely you'll see the input populate correctly for a split second, then revert to the broken input field that says "add to cart" instead of "1". Is there something I should be doing to populate individual inputs when there's more than one variant?
This is the code we're using to populate the quantity box:
<div class="di-quantity-wrap">
<label
class="product-quantity-label"
for="quantity">
Quantity:
</label>
<input
class="input-field product-quantity-input"
type="text"
name="quantity"
value="1">
</div>
Thank you in advance!
I'd like to preface this question by noting that I am relatively new to web development and Angular2.
I have an Angular2 component whose function is to create a tree view on a webpage using the angular-tree-component library (https://angular2-tree.readme.io). For each node in the tree, I have defined a popover HTML template (from ng2-bootstrap) with radio buttons in it.
Since the tree can be of any size, the radio buttons are created dynamically in the popover using a template declared in the tree component HTML.
My issue is that the radio button groups are linked together, as if they were all a single group. I have tried several different ways of naming the button groups dynamically (ideally they would all be separate groups), but nothing seems to work.
Example code:
<div class="testTree">
<Tree #tree id="tree1" [nodes]="nodes">
<template #treeNodeTemplate let-node="node" let-index="index">
<span>{{ node.data.name }}</span>
<template #popTemplate>
<div class="popDiv">
Name: {{node.data.name}}<br>
id: {{node.data.id}}<br>
</div>
<div [innerHtml]="html"></div></template>
<template #incTemplate>
<div class="popDiv">
<input type="radio" attr.name="node.data.id"
value="ab" (change)="foo(node, $event.target.value)"> Button1<br>
<input type="radio" attr.name="node.data.id"
value="bc" (change)="foo(node, $event.target.value)"> Button2<br>
<input type="radio" attr.name="node.data.id"
value="cd" (change)="foo(node, $event.target.value)"> Button3<br>
<input type="radio" attr.name="node.data.id"
value="de" (change)="foo(node, $event.target.value)"> Button4<br><br>
<button (click)="bar(node)">ok</button>
</div>
<div [innerHtml]="html"></div></template>
<button class="nodeButton" *ngIf="node.isActive || node.isFocused"
[popover]="popTemplate" placement="right" triggers="" popoverTitle="title1" #pop="bs-popover" (click)="pop.toggle()">Details</button>
<button class="nodeButton" *ngIf="node.isActive || node.isFocused"
[popover]="incTemplate" placement="right" triggers="" popoverTitle="title2" #pop2="bs-popover" (click)="pop2.toggle()">Options</button>
</template>
</Tree>
</div>
I have tried to name the button groups in the #incTemplate in the following ways:
name = "node.data.id"
name = "{{node.data.id}}"
[attr.name] = "node.data.id"
attr.name = "{{node.data.id}}"
attr.name = "node.data.id"
To see what was happening, I gave the radio buttons an id and selected it in the angular2 class to log the name value. The name was either blank or the literal string "node.data.id".
I would use ngModel, but since there could be a large number of radio button groups I can't have them using the same variables.
Each tree node has two variables ('id' and 'name') which are unique to each node and could be used to name the radio buttons. However, I can't seem to get the name field of the button to resolve any of the expressions and take the value of the data field provided by the tree node.
How can I get the radio button groups named dynamically so that they are separate from each other?
It turns out I had included (ngModel) and id fields in the radio buttons' definitions. Removing these fields allowed the radio buttons to function as intended despite the dynamically created groups sharing the same name.
Try this approach
<div *ngFor="let location of locations">
<input
[attr.id]="location"
type="radio"
name="location"
ngModel
[value]="location">
<label [attr.for]="location">{{location}}</label>
</div>
Note this is just a example demonstrating how it works you have to
adjust your code according to your requirements
I am looking for some guidance on how to write an Xpath query to verify that a specific checkbox is checked (the divs nested in the panel-body div are checkboxes). What I tried to do is make sure that a checkbox div with the corresponding label containing the text "Evaluations" contains the class "checked". Here is my HTML:
<div class="panel-body">
<div class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked">
<input id="access_conferences" class="checkradios access" name="access_conferences" value="true" checked="" type="checkbox">
</div>
<label for="access_conferences">Conferences</label>
<br>
<div class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked">
<input id="access_evaluations_viewing" class="checkradios access" name="access_evaluations_viewing" value="true" checked="" type="checkbox">
</div>
<label for="access_evaluations_viewing">Evaluations - Viewing</label>
<br>
</div>
And here is my Xpath: //label[#for="access_evaluations_viewing"]/preceding::div[#class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked"]
The problem is my test case is passing even when that box is unchecked, which tells me my xpath is grabbing other elements. Some of the other checkboxes in the panel-body div are also going to be checked, so what I think may be happening is my Xpath is checking for the next preceding div with a class of "checked", regardless of the text that div's label contains.
Edit: as was suggested, I have tried referencing the div preceding the label. The problem with doing this is that not every box in the panel-body is going to necessarily be checked. I only need to confirm that those associated with "Evaluations" are checked. Referencing the div above the label fails when one or more of the boxes other than "Evaluations" is unchecked. This is my revised Xpath:
//label[#for="access_evaluations_viewing"]/preceding-sibling::div[contains(#class, "unchecked")]
I switched to doing the negative comparison because contains(#class, "checked") will pass for both checked and unchecked boxes.
If you need to match label that contains "Evaluations" text you may try
//label[#for="access_evaluations_viewing"][contains(text(), "Evaluations")]/preceding::div[#class="checkradios-checkbox checkradios access icon-checkradios-checkmark checked"]
These 4 elements are siblings, so when you at the Label, you must go to the Div above to get the checkbox element.
Try this XPath:
//div[#class='panel-body']/label[contains(.,'Evaluations')]/preceding-sibling::div[1]
i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.