Modal not fading after applying bootswatch theme - asp.net-mvc-4

I applied the "Spacelab" theme from bootswatch and now the webpage does not fade out behind the popup.
Code in View:
<body>
<a type="button" class="btn btn-primary" href="#article-editor1" data-toggle="modal">Add Building</a>
<div class="modal fade" id="article-editor1" draggable="true" aria-hidden="true">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Building Information</h4>
</div>
<div class="modal-body">
<table>
<tr>
<td id="tesing">Building Name: </td>
<td id="tesing">#Html.TextBoxFor(x => x.siteName)</td>
</tr>
<tr>
<td id="tesing">Building Size:</td>
<td id="tesing">#Html.TextBoxFor(x => x.siteSize)</td>
</tr>
<tr>
<td id="tesing">Zipcode: </td>
<td id="tesing">#Html.TextBoxFor(x => x.siteZip)</td>
</tr>
<tr>
<td id="tesing">Cooling Setpoint:</td>
<td id="tesing">#Html.TextBoxFor(x => x.siteOccClg)</td>
</tr>
<tr>
<td id="tesing">Heating Setpoint:</td>
<td id="tesing">#Html.TextBoxFor(x => x.siteOccHtg)</td>
</tr>
</table>
</div>
<div class="modal-footer">
Close
Save Changes
</div>
</div>
code in css:
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.fade.in {
filter: alpha(opacity=50);
opacity: 0.5;
}
I have compared the modal & fade sections to the original bootsrap CSS file and found no differences.


Found my own problem. The version of boostrap that the theme was using was setting the backdrop to a "0" height
See Dubug:
// Modal background
.modal-backdrop {
- position: fixed;
+ position: absolute;
top: 0;
right: 0;
- bottom: 0;
so I edited the CSS to comment out the "top" property and added a height property of 100% as shown here:
.modal-backdrop {
position: absolute;
/*top: 0;*/
right: 0;
left: 0;
background-color: #b94a48;
opacity: 0.5;
height:100% /*Add This*/
}

Related

Asp .net core- Modal dialog keeps closing when i click inside the Modal dialog box

I'm working on asp .net core application. I need to load a modal dialog box when the page loads based on data and fetch some input from users. I'm able to load the popup using the following jquery code
$('#activePolicyChooserDialog').modal({ backdrop: "static ", keyboard: false }, 'show');
when I click an element(radio button) inside the popup it keeps closing how can I prevent the popup from closing when I click the radio button inside the popup
<div class="modal container w-100" id="id">
<div class="modal-dialog modal-lg bg-white">
<div class="modal-body modal-xl">
#foreach (var x in Ids)
{
<div class="row">
<input class="col-1 mt-3" style="height: 20px; width: 20px; vertical-align: top;" type="radio" name="option`your text`" value="#x.id" />
<table class="table table-sm table-striped col-10 rounded">
<thead class="card-header section-header">
<tr style="font-family: Oxygen-Bold, 'Oxygen Bold', Oxygen, sans-serif; font-weight: 700;">
<th colspan="4">Package#: #x.SubmissionIdNo</th>
</tr>
</thead>
<tbody>
<tr style=" font-family: 'Lato Bold', Lato, sans-serif;font-weight: 700;">
<td>Product</td>
<td>Policy#</td>
<td>Effective Date</td>
<td></td>
</tr>
#foreach (var item in Model.Where(_ => _.id == x.id))
{
<tr style="font-family: Lato, sans-serif; font-weight: 400;">
<td>#item.Name</td>
<td> #item.Number </td>
<td>#item.Date.ToShortDateString()</td>
<td></td>
</tr>
}
</tbody>
</table>
</div>
}
<button type="button" class="btn btn-primary m-3" id="selectPackageBtn">Select</button>
</div>
</div>
</div>
I don't want the pop up to close when I click on the radio button and be able to call the respective jquery event handlers

cypress clicking on an icon within a table

I am having hard time clicking on an individual icon within this table shown bellow.
I tried the code bellow , but did not work
cy.get('table >tbody >tr td:nth-child(1) fa-icon:nth-child(1)').click({multiple: true})
Visual:
Inspected DOM:
DOM text:
<div _ngcontent-ixx-c110 stickything class="d-block grid is-sticky" style="z-index: 1; top: 0px; width: auto; left: auto; position: sticky;">
<div _ngcontent-ixx-c110 class="d-flex ng-star-inserted">
<table _ngcontent-ixx-c110 class="table table-sm table-bordered">
<thead _ngcontent-ixx-c110 class="bg-color text-center text-black">...</thead>
<tbody _ngcontent-ixx-c110 class="text-center ng-star-inserted">
<tr _ngcontent-ixx-c110 class="bg-addition ng-star-inserted">
<td _ngcontent-ixx-c110 class="stickyContainertd ng-star-inserted" style="width: 20px; padding-top: 4px !important;">
<fa-icon _ngcontent-ixx-c110 size="sm" class="ng-fa-icon ng-star-inserted" css="6">...</fa-icon>
<!-- -->
<!-- -->
Performance insights
</td>
</tr>
...
</tbody>
</table>
</div>
</div>

You'll need to add an :nth-child() to the row (<tr>) as well as column (<td>), presuming the rows all have the same pattern of content.
For example:
cy.get('table >tbody >tr:nth-child(1) td:nth-child(1) fa-icon:nth-child(1)')
.should('have.length', 1)
.click()
or .eq() works
cy.get('table tbody')
.find('tr').eq(0)
.find('td').eq(0)
.find('fa-icon').eq(0)
.should('have.length', 1)
.click()

How Do I Click a div dropdown menu using VBA IE automation

Have the following DIV class, where you click on the bottom it will create a drop down menu. In browser, you can click it with mouse, however with IE automation with VBA. I tried the ".click" method and doesn't work.
I also tried the FireEvent with "onclick" "onchange" "onmouseover" and nothing works. Trying to see if there is any other solution
<div id="add12" style="width: 47px; height: 23px; white-space: nowrap;
position: static;"
controltype="DropDown" param="par">
<input name="ct10115" id="ddl" type="hidden" value="E">
<input class="ffb-input" id="input" style="width: 13px;" maxlength="1"
autocomplete="off">
<span class="ffb-arrow ui-button ui-widget ui-state-default ui-corner-Allui-button-text-icon-primary" id="teste2" role="button" ariadisabled="false" style="position:
static;">
<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"
style="left: 0px; top: 0px; margin-top: 0px; position: static;"></span>
<span class="ui-button-text"></span>
</span>
<div class="ffb" id="example11" style="left: 0px; top: 29px; width: 450px; display: none; z- index: 21; opacity: 0.999;">
<div class="content" style="height: auto; max-height: 200px;" scrolltop="0">
<div class="row" id="A" val="A" std_phase_cd="A" std_nm="A_">
<table>
<tbody>
<tr>
<td style="width: 45px;">A </td>
<td>none A </td>
</tr>
</tbody>
</table>
</div>
<div class="row" id="B" val="B" std__cd="B" std_nm="1">
<table>
<tbody>
<tr>
<td style="width: 45px;">B </td>
<td>none1 </td>
</tr>
</tbody>
</table>
</div>
</div>
<div></div>
</div>
</div>

ok I got it figured out.
So I use the dev tool on browser, and found the event e.g. click, mousedown etc.
then I use IE.dipatchEvent to trigger the click event.

Not able to click on element with unselectable='on' in chrome using webdriver

There is a drop down with an arrow on the side which opens up a sub menu. I am not able to click on the dropdown in chrome whereas its working in ie.
I tried hover and click and actions build too. But it's not working.
The code is as follows:
<div id="navigatortab" class=" x-plain undefined sd_nav_tabpanel x-border-panel" style="left: 0px; top: 0px; width: 1600px;">
<div id="ext-gen32" class="support-servicedesk-navigator">
<table id="ext-comp-1014" class="x-btn support-servicedesk-sb support-servicedesk-sbactive caseMru x-btn-noicon" cellspacing="0" style="width: 180px; height: 26px; background-image: none; background-color: transparent;">
<tbody class="x-btn-small x-btn-icon-small-left">
<tr>
<tr>
<td class="x-btn-ml">
<td class="x-btn-mc">
<em id="ext-gen41" class="x-btn-split" unselectable="on">
<button id="ext-gen33" class=" x-btn-text" type="button">
<div class="mruIcon"></div>
<span>Cases</span>
</button>
</em>
</td>
<td class="x-btn-mr">
</tr>
<tr>
</tbody>
</table>
</div>

Selenium Webdriver: Read a table completely

Scenerio:In a webpage there are few tables present. I want to read one of the table completely, but the problem is only 10 rows are displayed, for rest i have to scroll down. Actually originally only 10 row are available, when we scroll rest of the filed are rendered.
To solve this i thought i will simulate key down and keep reading, but the problem is even the xpath is not consistent through out so cannot put in a loop too. Xpath for few different cells are:
html/body/div[2]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table/tbody/tr[1]/td[1]
html/body/div[2]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table[2]/tbody/tr[3]/td[1]
html/body/div[1]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table[1]/tbody/tr[10]/td[1]
In what way can i get data in all the cells ?
HTML Source:
<div id="pt1:ph1" class="x6v">
<table class="xtb" width="0" cellspacing="0" cellpadding="0" border="0" summary="">
<div class="xvp">
<div>
<div id="pt1:pc1" class="xpb xph" _afrclmwmn="['c1','c2','c3','c4','c5','c6','c7','c8','c9','c10']" _afrac="pt1:pc1:md1" style="height: 282px;">
<div id="pt1:pc1::_ahTp" style="height:auto">
<div id="pt1:pc1::_ahCt">
<div id="pt1:pc1:md1" class="xpj xpb" _leafcolclientids="['pt1:pc1:md1:c1','pt1:pc1:md1:c2','pt1:pc1:md1:c3','pt1:pc1:md1:c4','pt1:pc1:md1:c5','pt1:pc1:md1:c6','pt1:pc1:md1:c7','pt1:pc1:md1:c8','pt1:pc1:md1:c9','pt1:pc1:md1:c10','pt1:pc1:md1:c11','pt1:pc1:md1:c12']" _afrfilterable="true" _afrautohr="10" _afrhcc="0" _afrpcid="pt1:pc1" tabindex="0" style="height: 234px;">
<div id="pt1:pc1:md1::ch" class="xz5" _afrcolcount="12" style="overflow: hidden; position: relative; width: 753px;">
<div id="pt1:pc1:md1::db" class="xyy" _afrcolcount="12" style="position: relative; width: 753px; overflow: hidden; height: 170px; z-index: 1;">
<table class="xyz xzr" cellspacing="0" _startrow="0" _rowcount="44" _selstate="{'0':true}" _totalwidth="1260" style="table-layout:fixed;position:relative;width:1260px;">
<tbody>
<tr class="xzn p_AFSelected" _afrrk="0">
<td class="xzk" nowrap="" style="width:100px;">12</td>
<td class="xzk" nowrap="" style="width:100px;">A12</td>
<td class="xzk" nowrap="" style="width:100px;">B12</td>
<td class="xzk" nowrap="" style="width:100px;">B12</td>
<td class="xzk" nowrap="" style="width:100px;">C12</td>
<td class="xzk" nowrap="" style="width:100px;">D12</td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;">K12</td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;"> </td>
<td class="xzk" nowrap="" style="width:100px;">G12</td>
</tr>
<tr class="xzn" _afrrk="1">
<tr class="xzn" _afrrk="2">
<tr class="xzn" _afrrk="3">
<tr class="xzn" _afrrk="4">
<tr class="xzn" _afrrk="5">
<tr class="xzn" _afrrk="6">
<tr class="xzn" _afrrk="7">
<tr class="xzn" _afrrk="8">
<tr class="xzn" _afrrk="9">
</tbody>
</table>
</div>
<div id="pt1:pc1:md1::sm" class="xzu" style="position:absolute;display:none"></div>
<div id="pt1:pc1:md1::ri" class="xz0" style="position:absolute;display:none;overflow:hidden"></div>
<div id="pt1:pc1:md1::dataW" style="display:none"></div>
<div id="pt1:pc1:md1::scroller" tabindex="-1" style="position: absolute; overflow: auto; z-index: 0; width: 770px; top: 46px; height: 187px; right: 0px;">
</div>
</div>
<div id="pt1:pc1::_ahBt" style="height:auto">
<div id="pt1:pc1:_clmCxt" style="display:none">
<div id="pt1:pc1:_PCPop" style="display:none">
<div id="pt1:pc1::_dchDlgC" style="display:none">
</div>
</div>
</div>
</div>
HTML after scrolling.
<div id="pt1:ph1" class="x6v">
<table class="xtb" width="0" cellspacing="0" cellpadding="0" border="0" summary="">
<div class="xvp">
<div>
<div id="pt1:pc1" class="xpb xph" _afrclmwmn="['c1','c2','c3','c4','c5','c6','c7','c8','c9','c10']" _afrac="pt1:pc1:md1" style="height: 282px;">
<div id="pt1:pc1::_ahTp" style="height:auto">
<div id="pt1:pc1::_ahCt">
<div id="pt1:pc1:md1" class="xpj xpb" _leafcolclientids="['pt1:pc1:md1:c1','pt1:pc1:md1:c2','pt1:pc1:md1:c3','pt1:pc1:md1:c4','pt1:pc1:md1:c5','pt1:pc1:md1:c6','pt1:pc1:md1:c7','pt1:pc1:md1:c8','pt1:pc1:md1:c9','pt1:pc1:md1:c10','pt1:pc1:md1:c11','pt1:pc1:md1:c12']" _afrfilterable="true" _afrautohr="10" _afrhcc="0" _afrpcid="pt1:pc1" tabindex="0" style="height: 234px;">
<div id="pt1:pc1:md1::ch" class="xz5" _afrcolcount="12" style="overflow: hidden; position: relative; width: 753px;">
<div id="pt1:pc1:md1::db" class="xyy" _afrcolcount="12" style="position: relative; width: 753px; overflow: hidden; height: 170px; z-index: 1;">
<table class="xyz xzr" cellspacing="0" _startrow="10" _rowcount="44" style="table-layout:fixed;position:relative;width:1260px;">
<tbody>
<tr class="p_AFFocused p_AFSelected xzn" _afrrk="10">
<tr class="xzn" _afrrk="11">
<tr class="xzn" _afrrk="12">
<tr class="xzn" _afrrk="13">
<tr class="xzn" _afrrk="14">
<tr class="xzn" _afrrk="15">
<tr class="xzn" _afrrk="16">
<tr class="xzn" _afrrk="17">
<tr class="xzn" _afrrk="18">
<tr class="xzn" _afrrk="19">
</tbody>
</table>
<table class="xyz xzr" cellspacing="0" _startrow="20" _rowcount="44" style="table-layout:fixed;position:relative;width:1260px;">
</div>
<div id="pt1:pc1:md1::sm" class="xzu" style="position: absolute; display: none; z-index: 5000; visibility: visible; top: 120px; right: 25px;">Fetching Data...</div>
<div id="pt1:pc1:md1::ri" class="xz0" style="position:absolute;display:none;overflow:hidden"></div>
<div id="pt1:pc1:md1::dataW" style="display:none"></div>
<div id="pt1:pc1:md1::scroller" tabindex="-1" style="position: absolute; overflow: auto; z-index: 0; width: 770px; top: 46px; height: 187px; right: 0px;">
</div>
</div>
<div id="pt1:pc1::_ahBt" style="height:auto">
<div id="pt1:pc1:_clmCxt" style="display:none">
<div id="pt1:pc1:_PCPop" style="display:none">
<div id="pt1:pc1::_dchDlgC" style="display:none">
</div>
</div>
</div>
</div>
<div id="pt1:ph2" class="x6v">
</span>
</div>
</div>

try to use this approach:
1) actions builder, advanced user API
MoveMouseAction method in particular - Moving the mouse from its current location to another element.
you can get here more info about actions builder
2) also dont forget to use fluent wait until web element is rendered
public WebElement fluentWait(final By locator){
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
.withTimeout(30, TimeUnit.SECONDS)
.pollingEvery(5, TimeUnit.SECONDS)
.ignoring(NoSuchElementException.class);
WebElement foo = wait.until(
new Function<WebDriver, WebElement>() {
public WebElement apply(WebDriver driver) {
return driver.findElement(locator);
}
}
);
return foo; } ;
By xpathElem=By.xpath("html/body/div[2]/form/div[1]/div[2]/div/div[2]/div/div[2]/div/div[2]/div/div[2]/div/span/div[1]/div/div/div/div[2]/div/div[2]/table/tbody/tr[1]/td[1]");
//getting data from cells
fluentWait(xpathElem).getText().trim();
hope this somehow helps you ;-)