I want to put a text and a checkbox side by side in a cell. The expected result likes
However the actual result is the checkbox is above the text. That means the checkbox takes one line, then the text takes the second line.
My code
<kendo-grid-checkbox-column>
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued">
{{dataItem.ProductName}}
</ng-template>
</kendo-grid-checkbox-column>
You could use a label:
<kendo-grid-checkbox-column>
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" id="prod-name" class="k-checkbox" [checked]="dataItem.Discontinued">
<label class="k-checkbox-label" for="prod-name">{{dataItem.ProductName}}</label>
</ng-template>
</kendo-grid-checkbox-column>
To enable the kendo styles for the checkbox you should add class="k-ckeckbox" to the input.
My bad.
Actually when I created angular component, there was a css file. For some reason I copied and pasted a style into it; I didn't pay attention at it. The style is to set input element width as 95%. I delete it then it works.
Related
I have few checkboxes on my page, with few of them checked by default.
Through my code, I need to handle unchecking of all text boxes on the page and then proceed.
The problem is the checkboxes (both checked and un-checked) have exactly the same HTML / DOM structure with same attributes / values except for the "::after" appearing when the checkbox is checked.
How do I write a locator to find out if the element is checked or unchecked, and then proceed to uncheck it.
<!-- When checkbox is unchecked -->
<label class="someclasslabel" on-click="[[event]]">
<span>Male</span>
<input type="checkbox" data-bind="checked: $properties.value">
<span class="checkbox"></span>
</label>
<!-- When checkbox is checked -->
<label class="someclasslabel" on-click="[[event]]">
<span>Male</span>
<input type="checkbox" data-bind="checked: $properties.value">
<span class="checkbox">
::after
</span>
</label>
I want a locator, so that I can get attribute if its checked or unchecked, and then uncheck it if already checked.
You could try executing some Javascript on your checkbox element to get the value.
after_value = driver.execute_script
("return window.getComputedStyle(document.querySelector('.someclasslabel'),':after')
.getPropertyValue('content');")
This is a bit of a hack, but worth a try.
After getting all the checkbox elements (with the same selector) no matter if they are checked or not, you can then iterate through them with a loop, and check if they are checked with the selected method. (C# reference here https://seleniumhq.github.io/selenium/docs/api/dotnet/ for RemoteWebElement.Selected Property).
If .selected == true -ใclick; if not selected, do nothing;
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 have two inputs of type radio. For each input there's a correspoding label with a single button inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault(), just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
What's happening here that I'm missing?
How can I implement this without trickery (such as styling the label as if it were a button)?
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>
A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.
You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.
I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
The validator does nevertheless produce the following error with your markup:
Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.
This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.
Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<span style="color: red;">One</span>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<span style="color: blue;">Two</span>
</label>
</div>
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.
I want to create a menu button for my responsive design.
I want to display the menu when the user has clicked on the button, and hide it when he has clicked back.
My Html code is the following:
<!-- Invisible checkbox -->
<input type="checkbox" class="menu_hidden_checkbox" id="show_menu" role="button" />
<!-- Menu button -->
<label for="show_menu" class="btn btn-navbar"><i class="icon-align-justify"></i></label>
The associated CSS code I use is:
.menu_hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;} */
.menu_hidden_checkbox:checked +.left-menu{display:block;}
The above code isn't working at all. When the checkbox is checked, nothing happens.
Did I make something wrong?
JSFiddle: http://jsfiddle.net/P8DJZ/ (Expand the row to see full screen/smartphone mode)
Here is the solution:
Put your switch button everywhere you want to:
<label for="show_hide">Click here to hide/show the div</label>
Put this code just before the div you want to show/hide:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
For example, if you want to hide this div, just do something like that:
<input type="checkbox" class="hidden_checkbox" id="show_hide" />
<div class="hidden_div">
Your hidden content will be there.
</div>
Then in your CSS file, add the following code:
.hidden_checkbox{border:0;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}
.hidden_div{display:none;}
.hidden_checkbox:checked + .hidden_div{display:block;}
The first line will hide the checkbox so the user will only be able to use your switch button and not directly the checkbox. The second line will hide your div.
The third and last line is a condition that will change your div display to block when and only when the hidden_checkbox is checked.
Basically, when the user will click on the switch button, the hidden checkbox will be checked and the hidden_div will appear. If he clicks once more on the button, the hidden_div should disapear.
I hope this could help someone.