change text of label with image - image

It's possible change text of label with image? For example, #unaestrella have text "UnaEstrella" and i want clear text (or simply add image with padding or similar) and show an image from http://www.domain.com/images/unaestrella.png. It's this possible?
<ul class="radio_list">
<li>
<label for="unaestrella">
<input id="unaestrella" type="radio" value="unaestrella" name="topics"/>
UnaEstrella
</label>
</li>
<li>
<label for="dosestrellas">
<input id="dosestrellas" type="radio" value="dosestrellas" name="topics"/>
DosEstrellas
</label>
</li>
</ul>

Yes, it's possible but use a class for the label, because #unaestrella is the id that you have already used for the input and an ID must be unique, one ID must be assigned to only one element.
CSS:
.unaestrella{
background : url('https://m.dominos.co.uk/m/iphone/assets/img/common/icon-single-small.png') no-repeat right;
padding: 0 25px 0 0;
cursor:pointer;
}
HTML;
<label class="unaestrella" for="unaestrella">
<input id="unaestrella" type="radio" value="unaestrella" name="topics" />
</label>
EXAMPLE.

Add an <img/> element into your <label/> like this :
In html (http://jsfiddle.net/kyjey/)
<ul class="radio_list">
<li>
<input id="unaestrella" type="radio" value="unaestrella" name="topics"/>
<label for="unaestrella">
<img src="http://www.buscatuspa.com/wp-content/themes/Avada/images/unaestrella.png"/>
</label>
</li>
</ul>
Edit to fit author requirement using jQuery (http://jsfiddle.net/kyjey/2/)
$(function() {
$('#unaestrella').next('label').empty().append('<img src="http://www.buscatuspa.com/wp-content/themes/Avada/images/unaestrella.png"/>');
})

I can solve this with css:
ul.radio_list li label[for=unaestrella] {position:relative !important;float:left !important;line-height:25px !important;background-image:url(images/unaestrella.png);background-position:top left;background-repeat:no-repeat !important; width:100% !important;color:transparent !important;}
But it's possible with jQuery for delete text?

Related

How do I get primeNg to position a label above the input text field?

I'm using Angular 13 and PrimeNG 13.4.1. I would like to have a label be directly above a text field, so I built
<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
<div class="p-field">
<span class="p-float-label">
<input type="text" formControlName="name" pInputText>
<label for="formLogoId">My Name</label>
</span>
</div>
</div>
However, when the field is rendered, the label appears superimposed over the text input ...
What's the proper way to position the label above the text field? I have this in my angular.json file, for waht it's worth ...
"styles": [
"node_modules/primeng/resources/themes/nova/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css"
],
Based on the attached HTML, you are applying Float Label.
If you want the label to be positioned at the top of input field, you can refer to InputText Demo (the Invalid section part).
HTML
<div class="p-field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText />
</div>
CSS
.p-field > * {
display: block;
}
The CSS part is crucial, which all the elements under the element with the p-field class will be applied with style: display: block.
Without it, the <label> element will be at the left and the <input> element at the right (position).
Sample StackBlitz Demo
Output
You may consider for PrimeFlex, which is a CSS library for Prime UI.
Install primeflex library.
npm install primeflex
Import CSS in angular.json or root stylesheet.
"node_modules/primeflex/primeflex.css"
Apply PrimeFlex styling.
<div class="field">
<label for="formLogoId">My Name</label>
<input type="text" formControlName="name" pInputText class="w-full" />
</div>
Refer: FormLayout
Sample StackBlitz Demo (PrimeFlex)

Identifying previous items using xpath in Selenium IDE

I want to check the checkbox based on the value in the text input labeled 'Field' I have tried the following:
<tr>
<td>check</td>
<td>/label[text()="Field"]/../input[#value="6 1012 49817"]/preceding-sibling::label[text()="Private"]/../input</td>
<td></td>
</tr>
Here is the HTML:
<div class="wdg colShwHdeCls" id="divFormFieldPrivate-0" style="width: 82px;">
<input id="FormFieldPrivate-0" name="FormFieldPrivate-0" title="" style="" class="wdg colShwHdeCls" type="checkbox">
<label for="FormFieldPrivate-0">Private</label>
</div>
<div class="csLineBreak"> </div>
<div class="acI fldWd100 wdg colShwHdeOpn" id="divFormFieldId-0"><label for="FormFieldId-0">Field<a class="aut" title="Show selection list"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/view?FieldId=" title="View this Field" class="acOptVw acLb acI"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/edit?FieldId=" class="acEd acLb acI" title="Edit this Field"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/add?FieldId=" class="acAd lightbox acI" title="Add a new Field"></a>
</label>
<br>
<span style="display:none;" id="FormFieldId-0-Old">6 1012 49817</span>
<input id="FormFieldId-0" name="FormFieldId-0" value="11955" type="hidden">
<input autocomplete="off" id="FormFieldId-0-Dsp" title="type three or more characters to see selection list" class="wdg csAutCpl csAutCplFld ui-autocomplete-input" value="6 1012 49817" type="text">
<span class="ui-helper-hidden-accessible" aria-live="polite" role="status"></span>
</div>
Suggestions are welcome thanks ;-)
This is one possible way. First part of the XPath supposed to find the div element containing label with certain text ("Field" in this case) and input with certain value attribute :
//div[label[normalize-space(text())="Field"] and input[#value="6 1012 49817"]]
From the above div, find preceding sibling div containing label with text equals "Private", then get the input child element of that div :
/preceding-sibling::div[label[text()="Private"]]/input
So the entire XPath will look about like this :
//div[label[normalize-space(text())="Field"] and input[#value="6 1012 49817"]]/preceding-sibling::div[label[text()="Private"]]/input
xpathtester.com demo

how to click one item in list of items with capybara

My html Code i have a button
<input class="search hidden" id="search_button" type="submit" value="Search" style="display: block;"></input>
when i clicked in Button many items is generated like this :
<div id="search_results" class="" style="display: block; left: 522.083px; top: 459.617px; width: 398px;">
<img alt="Load-circle" class="load-circle" src=".../123">
<div id="app_341446764" class="search-result"><img src=".../DictationIcon.png">abc</div>
<div id="app_561941526" class="search-result"><img src=".../Icon.png">def</div>
</div>
i have many div with class search-result i don't know how to click one of them(class="search-result") anyone suggest me a solution.
Ideally you would add a unique id as #juan-manuel-rodulfo-salcedo suggested. However, if you can't do that then you could find all the divs with class=search-result. Below is an example of how to click the second div on the page:
page.all('.search-result')[1].click
For more examples of how to select multiple elements, see this SO answer.

How to set a specific height for a PanelBar?

Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?
Assuming that you have your panelbar defined as a ul, something like:
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
...
</li>
</ul>
You should define a CSS style as:
#panelbar {
height: 300px;
overflow-y: scroll;
}
See an example here: http://trykendoui.telerik.com/#OnaBai/ifus
The solution above scrolls the entire control. Here's how to scroll the panel's items.
Click here for the Dojo example

Jquery, each time click button a textfield appears

with jquery i want to make multiple text fields appear..
when click this text
<form>
<input style="margin-top:20px;margin-right :50px; width:255px;height:23px;float:left;" type="text" name="CrawlerField"id="CrawlerField"/>
<input style="margin-top: 15px; margin-right :50px; width:255px;height:23px;float:left;" type="text" name="CrawlerField1" id="CrawlerField1"/>
<input style="margin-top: 15px; margin-right :50px; width:255px;height:23px;float:left;" type="text" name="CrawlerField1" id="CrawlerField2"/>
<font id="jqueryAdd">Add button</font>
</form>
this is the text when clicked a new text field appears....
<font id="jqueryAdd">Add button</font>
script
at start all textfields are hidden
$("#CrawlerField1").hide();
$("#CrawlerField2").hide();
when click the word Add button defined with jqueryAdd
check if the previous textfield is hidden next textfield appears
$("#jqueryAdd").click(function ( event ) {
if($("#CrawlerField").is(":visible"))
$("#CrawlerField1").show();
return false;
});
$("#jqueryAdd").click(function ( event ) {
if($("#CrawlerField1").is(":visible"))
$("#CrawlerField2").show();
return false;
});
this code results in the appearance of all buttons at start !!
add class to your all <input> tags like
<input class ="in" style="margin-top:20px;margin-right :50px; width:255px;height:23px;float:left;" type="text" name="CrawlerField"id="CrawlerField"/>
<input class ="in" style="margin-top: 15px; margin-right :50px; width:255px;height:23px;float:left;" type="text" name="CrawlerField1" id="CrawlerField1"/>
<input class ="in" style="margin-top: 15px; margin-right :50px; width:255px;height:23px;float:left;" type="text" name="CrawlerField1" id="CrawlerField2"/>
and in jquery add this line to hide all input initially.
$(".in").hide();

Resources