How can I add info icon with details next to input fields? - input

My input fields look like this:
<table class="something">
<tbody>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px">
<label><i class="far fa-calendar-alt"></i> Something:</label> (<em>something</em>) </td>
<td style="vertical-align:top;width:20%">
<label class="something" for="something">something:</label>
<input id="something" name="something" step="any" type="number" value=""> </td>
</tr>
</tbody>
</table>
How can I add an info icon with some text next to my inputs? I've found some solutions, but those are not fully responsive, they didn't work in all devices. A good example of what I want: https://bankmonitor.hu/lakashitel-kalkulator/?link_type=tile-menu-item
Thank you!

Related

TD not aligned correctly

Im having a little trouble trying to align this table, also the padding is not working. Im trying to make the textbox start in the same position as the checkbox but below it, also im trying to add padding to the first tr by doing it to the td but its not working.
<table>
<tr>
<td>
<input type="checkbox" Style="margin-left: 165px; padding-bottom: 50px;">
</td>
<td>
<label Style="padding-bottom: 50px;">Label for Checkbox</label>
</td>
</tr>
<tr>
<td>
<label Width="163px">#Another Label:</label>
</td>
<td>
<input type="textbox" MaxLength="20" Width="163px">
</td>
</tr>
</table>
Here is the fiddle --> https://jsfiddle.net/u5vu5mn6/

how to check if a tag is the last one

I am using Selenium and Java to write a test. I have the DOM below:
<tbody>
<tr>
<th>Copy</th>
<th>Subfield</th>
<th>Subfield Border</th>
<th>Field</th>
<th>Field Border</th>
</tr>
<tr id="333877">
<td>
<input type="checkbox" checked="" class="copySubfieldBorderCheck"/>
</td>
<td>a</td>
<td class="s">No</td>
<td>c</td>
<td>Yes</td>
</tr>
<tr>
<th>as</th>
<th>er</th>
<th>df</th>
<th>xc</th>
<th>xc</th>
</tr>
<tr id="333877">
<td>
<input type="checkbox" checked="" class="copySubfieldBorderCheck"/>
</td>
<td>rt</td>
<td class="noBorderBoldRed">Yes</td>
<td>ff</td>
<td>sdf</td>
</tr>
I want to get the tr that has a td tag whose text is No and alos it LAST td tag's text is Yes
I am looking for something like this:
//tr[./td[text()='No'] and ./td[text()='Yes' and isLast()]]
An easy way would be to concat the 3rd and the last cell and then filter the text on NoYes:
//tr[concat(td[3], td[last()])='NoYes']

Adding breaks in table td

<div id="headerAgentInfoDetailsPhone">
<table>
<tr>
<td>vendor:</td><td><input type="text" /></td>
<td>vendorgroup:</td><td><input type="text" /></td>
<td>account:</td><td><input type="text" /></td>
</tr>
I have code as above. Now I want a break function after the second td. For example as follows:
<div id="headerAgentInfoDetailsPhone">
<table>
<tr>
<td>vendor:</td><td><input type="text" /></td><br />
<td>vendorgroup:</td><td><input type="text" /></td><br />
<td>account:</td><td><input type="text" /></td>
</tr>
I tried to add td:n-thchild(even):after {content: \A; white-space: pre;
text-align: justify;} but its not working. The whole content is getting displayed in a single row.
A <br /> between a </td> and a <td> cannot do anything. What do you want to do by "adding a break" ?
If you want to show each info on a separated line, you have to write a new <tr> :
<table>
<tr>
<td>vendor:</td><td><input type="text" /></td>
</tr>
<tr>
<td>vendorgroup:</td><td><input type="text" /></td>
</tr>
<tr>
<td>account:</td><td><input type="text" /></td>
</tr>
</table>
It will draw a 3 lines table, with 2 cells in each line.
Yes, <tr is table row, and <td is table data. See http://www.w3schools.com/html/html_tables.asp for explanation. In a table you can't break the row with <br>, so if you use </tr> and <tr> to start a new table row instead it will work better.

click on a checkbox selenium java

Hi, I want to b able to click on a check box based on a value. Below is the html of the same:
<tbody>
<tr>
<th>Record Type</th>
<th style="text-align:center">Has Access?</th>
<th style="text-align:center">Can Create?</th>
<th style="text-align:center">Can Read All Records?</th>
</tr>
<tr>
<td>
<input id="ORMW.S2.0.Object Type" class="readOnlyField" type="text" value="Account" maxlength="255" size="25" name="ORMW.S2.0.Object Type" readonly="readonly"/>
</td>
<td align="center">
<input id="ORMW.S2.0.Has Access_VP123456" type="checkbox" onclick="cbValue(this,'ORMW.S2.0.Has\x20Access');" style="margin-left:0px;margin-top:1px;height:10px;width:10px;vertical-align:middle"/>
<input id="ORMW.S2.0.Has Access" type="hidden" value="Y" tabindex="-1" name="ORMW.S2.0.Has Access"/>
</td>
<td align="center">
<td align="center">
I want to click on checkbox based on the value account here.
Next query will search element by #value='Account' then traverse up to the first tr and then search your checkbox:
//input[#type='text' and #value='Account']/ancestor::tr[1]//input[#type='checkbox']
you can also try this:
//input[#type='checkbox' and preceding-sibling::input[#type='text' and #value='Account']]

Clicking on checkbox based on tables column value - IE Webdriver Selenium

Clicking on checkbox based on tables column value using Xpath. Below is the html
<table id="tblHotels">
<TBODY>
<TR>
<TH align="left">
<INPUT checkbox="" id="chkNSelectAll name=chkNSelectAll type="/>
</TH>
<TH align="left" title="Hotel">Hotel</TH>
<TH title=" align=left">
<SPAN id="spnExpandBtn">
<IMG/>
</SPAN>
</TH>
<TH align="left" title="Hotel">Hotel</TH>
<TH align="left" title="Reg Date">Reg Date</TH>
<TH align="left" title="Room Type">Room Type</TH>
<TH align="left" title="Location">Location</TH>
<TH align="left" title="Room Number">Room Number</TH>
</TR>
<TR>
<TD colSpan="11">
<IMG src=" ../NoExpiry/images/uaimBSpacer.gif"/>
</TD>
</TR>
<TR>
<TD>
<INPUT id="chkNSelect" name="chkNSelect" type="checkbox" value="on"/>
</TD>
<TD customHiddenText="">MATHEW Joe</TD>
<TD/>
<TD customHiddenText="">
<SPAN>Affray (
<STRONG/>Kim Lee)
</SPAN>
</TD>
<TD class="regDate customHiddenText=">10/01/2014</TD>
<TD customHiddenText="">1HE</TD>
<TD customHiddenText="">South West </TD>
<TD id="tdChildroom name=" tdChildroom=""/>
<INPUT id="hidYID" name="hidYID" type="hidden" value="409">
<INPUT id="hidYD" name="hidYD" type="hidden">
<INPUT id="hidYDID" name="hidYDID" type="hidden" value="1015389"/>
</INPUT>
</INPUT>
</TR>
<TR>
<TD>
<INPUT id="chkNSelect" name="chkNSelect" type="checkbox" value="on"/>
</TD>
<TD customHiddenText="">MATHEW Penny</TD>
<TD/>
<TD customHiddenText="">
<SPAN>Affray (
<STRONG/>Jim Lee)
</SPAN>
</TD>
<TD class="regDate customHiddenText=">10/01/2014</TD>
<TD customHiddenText="">1HE</TD>
<TD customHiddenText="">South West </TD>
<TD id="tdChildroom name=" tdChildroom=""/>
<INPUT id="hidYID" name="hidYID" type="hidden" value="409">
<INPUT id="hidYD" name="hidYD" type="hidden">
<INPUT id="hidYDID" name="hidYDID" type="hidden" value="1015389"/>
</INPUT>
</INPUT>
</TR>
</TBODY>
</table>
here is what i am trying and this always clicks the first checkbox??
Driver.FindElementByXPath("//td[contains(text(),'MATHEW Penny')]/preceding::td/input[#name='chkNSelect']").Click()
If i try to just find the column with the text it can find it not why it cannot find the preceding check box and jumps to first rows check box??
Driver.FindElementByXPath("//td[contains(text(),'MATHEW Penny')]
my requirement is to select the first checkbox (do something eg:add it to another table) uncheck it then check the 2nd checkbox (do something eg:add it to another table).
Use for MATHEW Penny:
//td[contains(text(),'Penny')]/preceding-sibling::td/input[#name='chkNSelect']
Use for MATHEW Joe:
//td[contains(text(),'Joe')]/preceding-sibling::td/input[#name='chkNSelect']
Its selecting all input elements with name as chkNSelect which comes before td with text as MATHEW Penny.
Use
//td[contains(text(),'MATHEW Penny')]/preceding::td/input[last()][#name='chkNSelect']
to select only first such input
You could try:
first targeting the tr
containing the td with the text node you want (using a predicate)
and then going to an input within a td in that table row
So that translates to:
Driver.FindElementByXPath("//tr[td[contains(text(),'MATHEW Penny')]]/td/input[#name='chkNSelect']")
Breakdown:
//tr[
td[
contains(text(),'MATHEW Penny')
]
]
/td/input[#name='chkNSelect']