I don't have a lot of experience with Selenium but I am trying to run a code which search for an element in HTML with chromedriver. I keep getting an error as below. The first thing I would like to confirm is that this error cannot be due to the connection with Chromedriver to the web but is because of the way the python script search in the HTML code. Any help would be appreciated.
The error:
('no such element: Unable to locate element: {"method":"xpath","selector":"//*[contains(text(),\'Find exited companies announced\')]/../.."}\n (Session info: headless chrome=91.0.4472.101)', None, None)
The code source:
<div id="logon-brownContent" style="width:100%;display:true;;padding-bottom: 0px;" class="hideforprinting">
<table width="" cellpadding="0" cellspacing="0" class="">
</table>
</div>
</div>
</td></tr></table>
</div>
</td>
<td class="homepage_mainbody-headlines">
<table class="framework_standard">
<tr>
<td colspan="2" valign="top">
<form action="exitbroker.asp?" method="post" name="oz" id="oz" sumbit="javascript:return validate();">
<input type="hidden" name="verb" value="8" />
<input type="hidden" name="dateformat" value="dd/mm/yyyy" />
<input type="hidden" name="contextid" value="1032390856" />
<input type="hidden" name="statecodelength" value="0" />
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table>
<tr>
<td class="framework_page-title">
<span class="framework_page-title">PE Exit Companies: Search</span><br/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1"><img src="/images/spacer.gif" height="13" width="1"></td>
</tr>
</table>
<table class="criteriaborder" cellspacing="0" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
<tbody>
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td align="center" valign="middle" width="100%" height="18" class="criteriaheader2">Exits</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="criteriasectionheader"><br />Exit Types</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top"><td width="200"><input type="checkbox" name="exitdealtype" value="ipo"/>Initial Public Offering</td><td width="200"><input type="checkbox" name="exitdealtype" value="sbo"/>Secondary Buyout</td><td width="200"><input type="checkbox" name="exitdealtype" value="tradesale"/>Trade Sale</td></tr>
</table>
</td>
</tr>
<tr>
<td class="criteriasectionheader"><br />Date Range</td>
</tr>
<tr>
<td>
Find exited companies announced<br><br>
</td>
</tr>
<tr>
<td>
<table cellpadding="2" cellspacing="0" border="0">
<tr>
<td>From </td>
<td><input type="text" name="datefrom" style="width:100" value=""></td>
<td> To </td>
<td><input type="text" name="dateto" style="width:100" value=""></td>
<td> Clear Date</td>
</tr>
<tr>
<td> </td>
<td><span class="hint">(dd/mm/yyyy)</span></td>
<td> </td>
<td><span class="hint">(dd/mm/yyyy)</span></td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
Please Note: The default start date for our searches has been changed to 01/01/2005. You can still access all
<br />
of our historical data by inserting the desired start date above. For help or further information please contact
<br />
your Customer Relationship Consultant.
<br />
</td>
</tr>
<tr>
<td class="criteriasectionheader"><br />Industry</td>
</tr>
<tr>
<td>
Find exited companies in these sectors.
<br />The industries defined here are affiliated with both the core business and divisions of the portfolio/exited companies.
<br />Multiple select using ctrl and click. The default is set to all.<br><br>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="criterialabel">Sectors<img src="/includes/images/mm-info-icon.gif"></span></td>
<td><span class="criterialabel">Sub-Sectors</span></td>
</tr>
<tr>
<td><select multiple="multiple" size="6" name="sectorcode" style="width:250px" onChange="javascript:emptyListBox(document.oz.subsectorcode);fillSelect(document.oz.subsectorcode,null,buildSelectedItems(document.oz.sectorcode));"></select> </td>
<td><select multiple="multiple" size="6" name="subsectorcode" style="width:250px"></select> </td>
</tr>
<tr>
<td><a name="selectAllSubsectorLink" href="javascript:fillSelect(document.oz.subsectorcode,null,buildSelectedItems(document.oz.sectorcode));selectAll(document.oz.sectorcode);fillSelect(document.oz.subsectorcode,null,buildSelectedItems(document.oz.sectorcode));">Select All Sectors</a> </td>
<td>Select All Sub-Sectors </td>
</tr>
<tr>
<td>Clear All<br><br></td>
</tr>
<tr>
<td colspan="4">
<input type="hidden" name="normalsectorsearch" value="" />
<input type="hidden" name="normalsubsectorsearch" value="" />
<input type="checkbox" name="domsectoronly" value="true" onclick="javascript:deselectAll(document.oz.subsectorcode);setItemDisableStatus(document.oz.subsectorcode);setItemDisableStatus(document.oz.selectAllSubsectorLink);">Search by dominant sector only<a href="javascript:displayPEPortfolioDominantSectorCountryGlossary('../includes/glossary');"><img src="/includes/images/mm-info-icon.gif" title="More information" />
</td>
</tr>
</table>
</td>
<!--
<td><select size="6" multiple="multiple" name="sectorcode" style="width:250px" ></select> </td>
</tr>
<tr>
<td>
Select All
Clear All
</td>
</tr>
-->
</tr>
<tr>
<td style="TEXT-ALIGN: right;" class="search_buttons_right">
<input type="button" value="Save Search" class="framework_flatbutton" onclick="javascript:if (validatePage(document.oz)) {document.oz.verb.value=1;document.oz.target='_self';document.oz.submit();};"/>
<!-- a onmouseover="style.cursor = 'hand'" onclick="javascript:if (validatePage(document.oz)) {document.oz.verb.value=28;defaultDatesWithLocale( document.oz.datefrom, document.oz.dateto, 'dd/mm/yyyy' );if (verifyDateSubSectors(document.oz.datefrom.value)) {countWindow();document.oz.target='_self';document.oz.submit();}}"><img src="/images/button_countresults.gif" border="0" /></a -->
<input type="button" value="Count Results" class="framework_flatbutton" onclick="javascript:submitCount();" />
<!-- a onmouseover="style.cursor = 'hand'" onclick="javascript:if (validatePage(document.oz)) {document.oz.verb.value=8;defaultDatesWithLocale( document.oz.datefrom,document.oz.dateto, 'dd/mm/yyyy' );document.oz.target='_self';if (verifyDateSubSectors(document.oz.datefrom.value)) {document.oz.target='_self';document.oz.submit();}};"><img src="/images/button_search.gif" border="0" /></a -->
<input type="button" value="Search" class="framework_flatbutton" onclick="javascript:if (validatePage(document.oz)) {
document.oz.verb.value=8
;document.oz.target='_self'
defaultDatesWithLocale( document.oz.datefrom,document.oz.dateto, 'dd/mm/yyyy' );
; document.oz.target='_self';
document.oz.submit();
}" />
</td>
</tr>
</tbody>
</table>
</tr>
</td>
</tbody>
</table>
<table>
<tr>
<td>
<br>
</td>
</tr>
</table>
<table class="criteriaborder" cellspacing="0" cellpadding="2" width="100%" border="0">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
<tbody>
<tr>
<td valign="top">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td align="center" valign="middle" width="100%" height="18" class="criteriaheader2">Further Search Criteria</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="criteriasectionheader"><br/>Geography</td>
</tr>
<tr>
<td>Find exited companies in these locations.
<br />Multiple select using ctrl and click. The default is set to all. </td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img src="/images/spacer.gif" width="10" height="1" alt="" /></td><td> </td>
</tr>
<tr>
<td><select multiple="multiple" size="6" name="areacode" style="width:200px" onChange="javascript:emptyListBox(document.oz.regioncode);emptyListBox(document.oz.countrycode);fillSelect(document.oz.regioncode,null,buildSelectedItems(document.oz.areacode));emptyListBox(document.oz.statecode);"></select></td>
<td><select multiple="multiple" size="6" name="regioncode" style="width:200px" onChange="javascript:emptyListBox(document.oz.countrycode);fillSelect(document.oz.countrycode,null,buildSelectedItems(document.oz.regioncode));emptyListBox(document.oz.statecode);"></select></td>
<td><select multiple="multiple" size="6" name="countrycode" style="width:200px" onChange="javascript:emptyListBox(document.oz.statecode);fillSelect(document.oz.statecode,null,buildSelectedItems(document.oz.countrycode));"></select></td>
<td> </td><td><select multiple="multiple" size="6" name="statecode" style="width:200px"></select></td>
</tr>
<tr>
<td>Select All</td>
<td>Select All</td>
<td>Select All</td>
<td> </td><td>Select All</td>
</tr>
<tr>
<td>Clear All</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="criteriasectionheader"><br/>PE House</td>
</tr>
<tr>
<td>Find exit companies who are currently held by specific PE Houses.
<br />Maximum of 50 selections allowed.</td >
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a class="search_lookup" href="javascript:openWin('qpehousenotapproved','hyperlink','pehousesysid','select-multiple','pehousesysiddescription','');">Lookup</a>
</td>
</tr>
<tr>
<td>
<select size="4" multiple="multiple" name="pehousesysid" style="width:350px"></select>
<input type="hidden" name="pehousesysiddescription" />
</td>
</tr>
<tr>
<td>
Remove
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="criteriasectionheader"><br/>Advisors</td>
</tr>
<tr>
<td>
Find exited companies who have been advised by these companies.
<br />Maximum of 50 selections allowed.
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a class="search_lookup" href="javascript:openWin('ecadvisor','hyperlink','advisorcompanysysid','select-multiple','advisorcompanysysiddescription','');">Lookup</a>
</td>
</tr>
<tr>
<td>
<select size="4" multiple="multiple" name="advisorcompanysysid" style="width:350px"></select>
<input type="hidden" name="advisorcompanysysiddescription" />
</td>
</tr>
<tr>
<td>
Remove
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><br /><span class="criteriasectionheader">Deal Value</span></td>
</tr>
<tr>
<td>Find exited companies with the following deal value. </td>
</tr>
<tr>
<td>
<table>
<tr>
<td><p><span class="criterialabel">Currency</span></p></td>
<td> </td>
<td><select id="currencycode" name="currencycode"><option value="AUD">AUD</option>
<option value="CHF">CHF</option>
<option value="CNY">CNY</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="HKD">HKD</option>
<option value="INR">INR</option>
<option value="JPY">JPY</option>
<option value="USD" selected="">USD</option></select></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td width="180"><p><span class="criterialabel">Minimum value in millions</span></p></td>
<td> </td>
<td><p><input type="text" name="mindealvalue" size="12" value="" onkeypress="checkMinimumValue();" onkeyup="checkMinimumValue();" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td width="180"><span class="criterialabel">Maximum value in millions</span></td>
<td> </td>
<td><input type="text" name="maxdealvalue" size="12" value=""></td>
</tr>
</table>
</td>
</tr>
<tr><td><br>Include deals with undisclosed value <input type="checkbox" name="undiscloseddealvalues" value="true" Checked></td></tr>
<tr>
<td class="criteriasectionheader"><br/>Exited Companies</td>
</tr>
<tr>
<td>Maximum of 50 selections allowed.</td >
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a class="search_lookup" href="javascript:openWin('eccompany','hyperlink','eccompanysysid','select-multiple','eccompanysysiddescription','');">Lookup</a>
</td>
</tr>
<tr>
<td>
<select size="4" multiple="multiple" name="eccompanysysid" style="width:350px"></select>
<input type="hidden" name="eccompanysysiddescription" />
</td>
</tr>
<tr>
<td>
Remove
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="criteriasectionheader"><br/>Free Text Search</td>
</tr>
<tr>
<td>Please use the Free Text Search by typing in a keyword or phrase to identify the required portfolio.
<br />
<span class="hint">Searches on companies' information, deal description, and condition, type, nature, consideration structure.<br><br></span>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" class="criterialabel">Search</td>
<td><input type="text" name="textsearch" style="width:250px" value="" /></td>
<td><table border="0" cellpadding="0" cellspacing="0">
<tr valign="top"><td width="350"><input checked type="radio" name="andorfreetext" value="and"/>Match all words<br><input type="radio" name="andorfreetext" value="or"/>Match any word<br><input type="radio" name="andorfreetext" value="phrase"/>Match exact phrase</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="TEXT-ALIGN: right;" class="search_buttons_right">
<input type="button" value="Save Search" class="framework_flatbutton" onclick="javascript:if (validatePage(document.oz)) {document.oz.verb.value=1;document.oz.target='_self';document.oz.submit();};"/>
<!-- a onmouseover="style.cursor = 'hand'" onclick="javascript:if (validatePage(document.oz)) {document.oz.verb.value=28;defaultDatesWithLocale( document.oz.datefrom, document.oz.dateto, 'dd/mm/yyyy' );if (verifyDateSubSectors(document.oz.datefrom.value)) {countWindow();document.oz.target='_self';document.oz.submit();}}"><img src="/images/button_countresults.gif" border="0" /></a -->
<input type="button" value="Count Results" class="framework_flatbutton" onclick="javascript:submitCount();" />
<!-- a onmouseover="style.cursor = 'hand'" onclick="javascript:if (validatePage(document.oz)) {document.oz.verb.value=8;defaultDatesWithLocale( document.oz.datefrom,document.oz.dateto, 'dd/mm/yyyy' );document.oz.target='_self';if (verifyDateSubSectors(document.oz.datefrom.value)) {document.oz.target='_self';document.oz.submit();}};"><img src="/images/button_search.gif" border="0" /></a -->
<input type="button" value="Search" class="framework_flatbutton" onclick="javascript:if (validatePage(document.oz)) {
document.oz.verb.value=8
;document.oz.target='_self';
defaultDatesWithLocale( document.oz.datefrom,document.oz.dateto, 'dd/mm/yyyy' );
document.oz.target='_self';
document.oz.submit();
}" />
</td>
</tr>
</tbody>
</table>
</tr>
</td>
</tbody>
</table>
</form>
<script LANGUAGE="JavaScript">
<!--
function validatePage(objitem) {
selectAll(objitem.pehousesysid);
selectAll(objitem.eccompanysysid);
objitem.eccompanysysid.required=false;
objitem.eccompanysysid.description='Portfolio Company Name';
objitem.eccompanysysid.datatype='alphanumeric';
selectAll(objitem.advisorcompanysysid);
objitem.advisorcompanysysid.required=false;
objitem.advisorcompanysysid.description='Advisor Name';
objitem.advisorcompanysysid.datatype='alphanumeric';
// locale info.
objitem.localedateformat='dd/mm/yyyy';
objitem.localecurrencycode='USD';
objitem.localelanguagecode='en_eu';
objitem.localetimezone='235';
objitem.mindealvalue.required=false;
objitem.mindealvalue.description='Currency minimum value in millions';
objitem.mindealvalue.datatype='decimal';
objitem.mindealvalue.min =0;
objitem.mindealvalue.max=1000000000000000000;
objitem.maxdealvalue.required=false;
objitem.maxdealvalue.description='Currency maximum value in millions';
objitem.maxdealvalue.datatype='decimal';
objitem.maxdealvalue.min=0;
objitem.maxdealvalue.max=1000000000000000000;
objitem.datefrom.required=false;
objitem.datefrom.description='Date from';
objitem.datefrom.datatype='date';
objitem.dateto.required=false;
objitem.dateto.description='Date to';
objitem.dateto.datatype='date';
if (objitem.statecode)
{
objitem.statecodelength.value = objitem.statecode.length;
}
// DanielC: 7/11/08: Case 107136: set the hidden field so that it will end up in the token XML and can be used in criteria.xml
if (document.oz.domsectoronly.checked == false)
{
document.oz.normalsectorsearch.value = "true";
document.oz.normalsubsectorsearch.value = "true";
}
return verify(objitem,false);
}
function submitCount()
{
if (validatePage(document.oz)) {
var dOz = document.oz;
//need to change pPopup variable to pPopup=1 to ensure no chrome on popup in event of failure
var vAction = dOz.action;
dOz.action = (dOz.action.search(/pPopup/) == -1) ? dOz.action+= "&pPopup=1" : dOz.action.replace(/pPopup=./,"pPopup=1");
defaultDatesWithLocale( document.oz.datefrom,document.oz.dateto, 'dd/mm/yyyy' );
dOz.verb.value=28;
countWindow();
document.oz.submit();
dOz.action = vAction;
}
}
//-->
</script>
</td>
</tr>
</table>
</td>
<td class="homepage_mainbody-leaguetbl"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%"><img src="/images/spacer.gif" width="1" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
</div><footer class="acuris-footer" xmlns:msxsl="urn:schemas
A piece of code with xpath not sending error:
def openSearchPageCommon(self,url,clear_xpath) :
self.drv.get(url)
for x in self.drv.find_elements_by_xpath(clear_xpath) :
x.click()
def openSearchPage(self) :
xpath = "//form[#action='portfoliobroker.asp?']//table//*[contains(text(),'Clear Date')]"
self.openSearchPageCommon(self.tgt,xpath)
Full error:
Traceback (most recent call last):
File "mmmm_lib.py", line 73, in __init__
self.drv.find_element_by_xpath("//*[contains(text(),'Find exited companies announced')]/../..")
File "/home/airflow/.local/lib/python3.6/site-packages/selenium/webdriver/remote/webdriver.py", line 394, in find_element_by_xpath
return self.find_element(by=By.XPATH, value=xpath)
File "/home/airflow/.local/lib/python3.6/site-packages/selenium/webdriver/remote/webdriver.py", line 978, in find_element
'value': value})['value']
File "/home/airflow/.local/lib/python3.6/site-packages/selenium/webdriver/remote/webdriver.py", line 321, in execute
self.error_handler.check_response(response)
File "/home/airflow/.local/lib/python3.6/site-packages/selenium/webdriver/remote/errorhandler.py", line 242, in check_response
raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[contains(text(),'Find exited companies announced')]/../.."}
May be its because the element you are trying to locate is in an iframe or in a shadow dom. And also make sure that the xpath points only one element in the Dom.
If its in an iframe you need switch to that frame and then try to locate the element.
if its in a shadow root, open you need to get the shadow-root first to locate the required element.
I think we should try with css selector written below :-
table.criteriaborder:nth-of-type(2) tr:nth-of-type(5) td
since the xpath that you are using, depends on a text which is basically a text node
if it's python that you are working on, you could try the below code :
print(driver.find_element_by_css_selector("table.criteriaborder:nth-of-type(2) tr:nth-of-type(5) td").text)
I've created this table that's well formatted in chrome but in ie8 the < td> tag ignores the percentages that i've setted, then if i add table-layout:fixed as someone suggested ie8 ignores the proportion and set them to 25-25-25-25 in the field CAP Via etc...
If i remove the doctype it works (i can't remove it because i need it for something else)
<!DOCTYPE HTML>
<html style ="height: 100%">
<body>
<table cellpadding=4 align=center width=772 border=1 style="border-collapse:collapse;">
<tr>
<td valign=top colspan=4>
<center>
<b>INFORMAZIONI CLIENTE</b>
</center>
</td>
</tr>
<tr>
<td align"left" valign=top colspan=4>
Nome e Cognome del Cliente/Azienda:<br>
<input type="Text" align="LEFT" size="120">
</td>
</tr>
<tr>
<td align"left" valign=top colspan=4>
Via:
<br>
<input type="Text" align="LEFT" size="120">
</td>
</tr>
<tr>
<td align"left" valign=top style="width:1%;">
CAP:
<br>
<input type="Text"align="LEFT" size="4">
</td>
<td align"left" valign=top style="width:1%;">
Città :
<br>
<input type="Text" align="LEFT" size="65">
</td>
<td align"left" valign=top style="width:1%;">
Prov:
<br>
<input type="Text" align="LEFT" size="2">
</td>
<td align"left" valign=top style="width:99%;">
Data:
<br>
<input type="Text" align="LEFT" size="1" > / <input type="Text" align="LEFT" size="1" ><nobr> / <input type="Text" align="LEFT" size="4">
</td>
</tr>
<tr>
<td align"left" valign=top colspan=4>
Info aggiuntive
<br>
<input type="Text" align="LEFT" size="120">
</td>
</tr>
</table>
</body>
</html>
I am trying to find the text from the Select Elements "[New List]". The HTML code behind this is :
<div id="pageBody">
<div class="grid">
<div class="col_12 bgColor column">
<form method="POST" action="pickListEdit.cfm" name="formMain" id="formMain">
<input type="hidden" id="usrAction" name="usrAction" value="NONE"/>
<input type="hidden" id="listtype" name="listtype" value="ACCTS"/>
<input type="hidden" id="listmodified" name="listmodified" value="0"/>
<table cellpadding="0" cellspacing="0" border="0" width="620">
<tbody>
<tr class="alt first last">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="360">
<tbody>
<tr class="alt first">
<td width="150" align="right" class="critH2">
<td height="1" align="left">
<select name="listkey" size="1" onchange="formSubmit('GET');"class="selectfont">
<option value="0">[New List]</option>
</select>
</td>
</tr>
<tr class="alt last">
</tbody>
</table>
</td>
<td width="10"/>
<td width="10"/>
<td valign="top">
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600">
</form>
</div>
</div>
</div>
</div>
</body>
The C# code that I am using is :
var AccPic = Driver.Instance.FindElement(By.ClassName("selectfont"));
var selectelement = new SelectElement(AccPic);
selectelement.SelectByText(AP);
The problem is it is unable to find the field name. What I need to do is find the element [New List] and select it. Can someone please help.
Assuming it's the only option tag on the page:
var newList = Driver.Instance.FindElement(By.TagName("option"));
var selectedElement = new SelectElement(newlist);
I am new to bootstrap. What can I do to see all the contents of my page when screens are smaller. My table in Activities panel doesn't adjust with the screen size.I have a div named MiddleDiv where I append 1 or more tables on the fly.
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Activities</div>
<div class="panel-body">
<div class="table-responsive" id="MiddleDiv">
<table width="100%" style="margin-bottom:10px" id="Table_1" class="TableBlankClass table">
<tbody>
<tr class="bg-success">
<td style="font-weight:bold" id="ActivityCompany_1" colspan="3">Company(Bill to): TD General Insurance Company</td>
<td style="font-weight:bold" id="ActivityClient_1" colspan="6">Client: Test Adjsuter</td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<tbody>
<tr>
<td><button class="btn btn-danger btn-xs" id="ActivityDel_1" onclick="DelActivity('Table_1')" type="button">Del</button></td>
<td class="ActivitiesHeading">Activity</td>
<td>
<select onchange="GetRate('Table_1')" id="ActivityTypeDropDown_1" style="width:200px;" class="form-control TableSelectClass">
<option value="- Select One -" selected="">- Select One -</option>
<option value="Accomodation">Accomodation</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td class="ActivitiesHeading">Comments</td>
<td colspan="2" class="ActivitiesHeading"><textarea rows="1" style="width: 275px; height: 35px;" class="form-control" id="ActivityComments_1"></textarea></td>
<td class="ActivitiesHeading">Status<span id="ActivitySpan_1"></span></td>
<td colspan="2" class="ActivitiesHeading">
<select onchange="CalculateActivities(); CreateRemoveReasonButton('Table_1');" id="ActivityStatusDropDown_1" style="width:200px;" class="form-control">
<option value="24859" selected="">Waiting To Process Payer Invoice</option>
</select>
</td>
</tr>
<tr>
<td class="ActivitiesHeading">Rate</td>
<td class="ActivitiesHeading">Qty</td>
<td class="ActivitiesHeading">Discount</td>
<td class="ActivitiesHeading">Discount %</td>
<td class="ActivitiesHeading">Reason For Discount</td>
<td class="ActivitiesHeading">Tax Applicable</td>
<td class="ActivitiesHeading">Taxes</td>
<td class="ActivitiesHeading">SubTotal</td>
<td class="ActivitiesHeading">Gross Total</td>
</tr>
<tr>
<td><input type="text" onblur="if (this.value=='') {this.value = 0;}" value="0" onkeyup="CalculateActivities()" id="ActivityRate_1" class="form-control TableNumericClass"></td>
<td><input type="text" onblur="if (this.value=='' || this.value=='0') {this.value = 1;}" value="1" onkeyup="CalculateActivities()" id="ActivityQty_1" class="form-control TableNumericClass"></td>
<td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscount_1" class="form-control TableDiscountClass"></td>
<td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscountPercentage_1" class="form-control TableDiscountClass"></td>
<td>
<select id="ReasonForDiscountDropDown_1" class="form-control">
<option value="- Select One -" selected="">- Select One -</option>
<option value="Late Report Delivery">Late Report Delivery</option>
<option value="Incorrect File Management">Incorrect File Management</option>
<option value="Client Satisfaction">Client Satisfaction</option>
<option value="Other - See Service Notes">Other - See Service Notes</option>
</select>
</td>
<td>
<select onchange="CalculateActivities()" id="ActivityTaxApplicable_1" class="form-control">
<option value="Yes" selected="">Yes</option>
<option value="No">No</option>
</select>
</td>
<td><img width="15" height="15" title="<body> <table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass">0.00</td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" >0.00</td> </tr> </table> </body>" src="/files/404048/93171/Info-32.png" id="ActivityTaxesAmount_1" class="TaxesClass" data-original-title="<body> <table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass"></td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" ></td> </tr> </table> </body>"></td>
<td id="ActivitySubTotal_1">100.00</td>
<td id="ActivityGrossTotal_1">100.00</td>
</tr>
<tr>
<td class="ActivitiesHeading">Measure</td>
<td colspan="2" class="ActivitiesHeading">GAP Code</td>
<td colspan="3" class="ActivitiesHeading">Other Description</td>
<td colspan="3" class="ActivitiesHeading"> </td>
</tr>
<tr>
<td>
<select id="ActivityMeasure_1" class="form-control">
<option selected="" value="- Select One -">- Select One -</option>
</select>
</td>
<td colspan="2">
<select id="ActivityGAPCode_1" class="form-control">
<option value="00000" selected=""><-Select One-></option>
</select>
</td>
<td colspan="3"><input type="text" id="ActivityOtherDescription_1" class="form-control"></td>
<td colspan="3">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Total</div>
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table">
<tbody>
<tr>
<td class="HeadingTD">SubTotal</td>
<td id="AllSubTotal"></td>
<td class="HeadingTD">Discount</td>
<td id="AllDiscount"></td>
<td class="HeadingTD">Tax</td>
<td id="AllTax"></td>
<td class="HeadingTD">Gross Total</td>
<td id="AllGrossTotal"></td>
</tr>
<tr>
<td colspan="2" id="AddItemTD"></td>
<td colspan="2" id="SubmitActivitiesTD"></td>
<td colspan="2" id="VoidInvoiceTD"></td>
<td colspan="2" align="right"><button class="btn btn-primary btn-sm" onclick="window.parent.close()" type="button">Close</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I can see you are just wrapping traditional HTML tables with some bootstrap classes expecting them to be responsive.
It's a good start but you need to rethink how you construct your tables when you use bootstrap.
Bootstrap uses their "Grid System" http://getbootstrap.com/css/#grid
The grid system doesn't use tables at all. It uses divs with specific classes on them achieve the layout you are looking for. Until you fully use the bootstrap grid system you will not truly see a responsive design.
Take the time to learn the bootstrap grid system.
A bit of a side note and personal opinion: Looking at your form design (which looks great btw) you might not like the result of a responsive design. All of the form fields will end up stacking on top of each other. This form design really only works horizontally. If it were vertically aligned it might get very confusing. If it were me, I might design the form to fit interfaces as small as a tablet but not mobile.
I'm using jquery to copy 1 row to create 1 row below. Control is dynamic.
I have 1 control to copy and paste from tableclone
<input type="button" value="Add Row" id="addrowbutton" class="Button" />
This is the main table :
<table id="registrationtable" class="Grid">
<tr class="Caption">
<th scope="col">
Registration Number
</th>
<th scope="col"> Is Install
</th>
<th scope="col"> Upload File
</th>
<th scope="col"> Remove
</th>
</tr>
And I clone from here
<table id="tableclone" style="display: none;">
<tbody>
<tr class="Row">
<td style="white-space:nowrap;">
<input id="RegistrasiNo" class="RegistrasiNoClass" type="text" />
</td>
<td>
<asp:DropDownList ID="ddlIsInstall" runat="server" class="IsInstallclass">
<asp:ListItem Value="Y" Text="Yes"></asp:ListItem>
<asp:ListItem Value="N" Text="No"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<div style="float: left">
<input type="file" id="fileUpload" class="fileuploadclass" />
</div>
<div style="float: left">
<input type="button" value="Upload File" id="UploadFileControll" class="UploadFileControllclass" runat="server" />
</div>
</td>
<td>Remove</td>
</tr>
</tbody>
<asp:Button ID="SaveRegistrationID" runat="server" Text="SAVE" OnClick="SaveRegistrationID_Click" CssClass="Button" />
How to get posted file from fileupload dynamicly (more than 1 row) when i click button SAVE ?