Develop Reference

Dynamic page element reference of iframe is no longer attached to the DOM

I have a problem to management the iframes in dynamic page
I have a tableview in one iframe when I double-click on row, it's create a new div with iframe you can see the toggle to this iframe in intructions driver.SwitchTo().Frame(frameProduct), after collect data from this frame, I want to continue traverse table rows, but at the final of loop I try to toogle the tableview iframe with driver.SwitchTo().Frame(iframes.ElementAt(1)) and then i have an exception Dynamic page element reference of iframe is no longer attached to the DOM
I cannot toggle from one frame to other frame.
ICollection<IWebElement> iframes = driver.FindElements(By.TagName("iframe"));
// Table frame
driver.SwitchTo().Frame(iframes.ElementAt(1));
element = driver.FindElement(By.XPath("//html"));
string? paths = #"//table[starts-with(#id, 'tableview')]";
ICollection<IWebElement> tableview = element.FindElements(By.XPath(paths));
Actions builder = new Actions(driver);
foreach (IWebElement elements in tableview) {
builder.DoubleClick(elements).Build().Perform();
// result data frame
driver.SwitchTo().ParentFrame();
ICollection<IWebElement> cc = TabPanelCenter.FindElements(By.XPath("./child::*"));
var product = driver.FindElement(By.Id(cc.Last().GetAttribute("id")));
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
var frameProduct = wait.Until(ExpectedConditions.ElementToBeClickable (product.FindElement(By.TagName("iframe"))));
driver.SwitchTo().Frame(frameProduct);
var registration = driver.FindElement(By.Id("ContentPlaceHolder1_lblRegistrationDate-inputEl"));
Console.WriteLine(registration.Text);
driver.SwitchTo().Frame(iframes.ElementAt(1)); // Exception/Error element reference of iframe is no longer attached to the DOM
}
<div id="TabPanelCenter-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" role="presentation" style="width: 1920px; left: 0px; top: 36px; height: 169px;">
<div
class="x-panel x-tabpanel-child x-panel-default x-hidden-offsets"
role="tabpanel"
aria-hidden="true"
aria-disabled="false"
aria-labelledby="tab-1013"
aria-expanded="false"
id="Home"
style="margin: 0px; width: 1284px; height: 778px;"
>
<div id="Home-bodyWrap" data-ref="bodyWrap" class="x-panel-bodyWrap" role="presentation">
<div id="Home-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" role="presentation" style="width: 1284px; left: 0px; top: 0px; height: 778px;">
<iframe
class="x-component x-fit-item x-component-default"
id="component-1015"
name="Home_IFrame"
src="/Private/Intranet/Inicio.aspx?_dc=1674059085974"
style="margin: 0px; width: 1284px; height: 778px;"
frameborder="0"
></iframe>
</div>
</div>
</div>
<div
class="x-panel x-tabpanel-child x-panel-default x-closable x-panel-closable x-panel-default-closable x-hidden-offsets"
role="tabpanel"
aria-hidden="true"
aria-disabled="false"
aria-labelledby="tab-1016"
id="Products"
aria-expanded="false"
style="margin: 0px; width: 1284px; height: 778px;"
>
<div id="Products-bodyWrap" data-ref="bodyWrap" class="x-panel-bodyWrap" role="presentation">
<div
id="Products-body"
data-ref="body"
class="x-panel-body x-panel-body-default x-closable x-panel-body-closable x-panel-body-default-closable x-panel-body-default x-panel-body-default-closable x-noborder-trbl"
role="presentation"
style="width: 1284px; height: 778px; left: 0px; top: 0px;"
>
**
<iframe
class="x-component x-fit-item x-component-default"
id="component-1018"
name="Products_IFrame"
src="/Private/Intranet/Products/ProductsList.aspx?_dc=1674059096599"
style="margin: 0px; width: 1284px; height: 778px;"
frameborder="0"
>
</iframe>
**
</div>
</div>
<div
class="x-component x-border-box x-mask x-component-default"
role="progressbar"
aria-hidden="true"
aria-disabled="false"
id="loadmask-1017"
tabindex="0"
data-componentid="loadmask-1017"
style="display: none;"
aria-valuetext="Loading Products..."
>
<div id="loadmask-1017-msgWrapEl" data-ref="msgWrapEl" class="x-mask-msg" role="presentation" style="right: auto; left: 576px; top: 361px;">
<div id="loadmask-1017-msgEl" data-ref="msgEl" class="x-mask-loading x-mask-msg-inner" role="presentation">
<div id="loadmask-1017-msgTextEl" data-ref="msgTextEl" class="x-mask-msg-text" role="presentation">Loading Products...</div>
</div>
</div>
</div>
</div>
<div
class="x-panel x-tabpanel-child x-panel-default x-closable x-panel-closable x-panel-default-closable"
role="tabpanel"
aria-hidden="false"
aria-disabled="false"
aria-labelledby="tab-1019"
id="Edit_product434"
aria-expanded="true"
style="margin: 0px; width: 1920px; height: 169px;"
>
<div id="Edit_product434-bodyWrap" data-ref="bodyWrap" class="x-panel-bodyWrap" role="presentation">
<div
id="Edit_product434-body"
data-ref="body"
class="x-panel-body x-panel-body-default x-closable x-panel-body-closable x-panel-body-default-closable x-panel-body-default x-panel-body-default-closable x-noborder-trbl"
role="presentation"
style="width: 1920px; height: 169px; left: 0px; top: 0px;"
>
**
<iframe
class="x-component x-fit-item x-component-default"
id="component-1021"
name="Edit_product434_IFrame"
src="/Private/Intranet/Products/ProductsForm.aspx?Id=434&TabId=Products&_dc=1674059103654"
style="margin: 0px; width: 1920px; height: 169px;"
frameborder="0"
>
</iframe>
**
</div>
</div>
<div
class="x-component x-border-box x-mask x-component-default"
role="progressbar"
aria-hidden="true"
aria-disabled="false"
id="loadmask-1020"
tabindex="0"
data-componentid="loadmask-1020"
style="display: none;"
aria-valuetext="Loading Edit product..."
>
<div id="loadmask-1020-msgWrapEl" data-ref="msgWrapEl" class="x-mask-msg" role="presentation" style="right: auto; left: 567px; top: 361px;">
<div id="loadmask-1020-msgEl" data-ref="msgEl" class="x-mask-loading x-mask-msg-inner" role="presentation">
<div id="loadmask-1020-msgTextEl" data-ref="msgTextEl" class="x-mask-msg-text" role="presentation">Loading Edit product...</div>
</div>
</div>
</div>
</div>
</div>

How to ensure that my left div element does not change the position of my right div element, when left div element gets long?

I have two div elements that are positioned side by side. The left side div is an action link , and the right side div is an icon. The issue I am having is that, when I type a lengthy name for the action link title (example: "ActionLinkTitleNameVeryLongTitleABCDE"), it moves the position of my right side div icon - to the right. I am looking for a way where no matter how long the action link title is, the right side div icon should not move from it's original position. Even if the title is really long, it should be displayed on top of the icon(overlap), but the position of icon shouldn't change. Here is the fiddle: https://jsfiddle.net/cliffeee/f5c1xrq3/17/ .
.content {
.bottomLeft
{
height: 36px;
color: blue;
font-weight: bold;
padding-top: 10px;
}
.bottomRight {
height: 77px;
}
}
<div class="bottomLeft">
<a href=#_Functions.GetUrlValueBySchema(link) title=#link.LinkName>#linkTitle</a>
</div>
<div class="bottomRight">
<i class="fa-external-link pull-right" title="icon for link"></i>
</div>

I have modified your link. Please check it if any changes than let me know.
https://jsfiddle.net/Lbnz9qaj/
.col_wrap {
display: flex;
justify-content: space-between;
}
.bottomLeft {
height: 36px;
color: blue;
font-weight: bold;
width: 80%;
word-break: break-all;
}
.bottomRight {
padding-left: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col_wrap">
<div class="bottomLeft">
<a href=#_Functions.GetUrlValueBySchema(link) title=#link.LinkName>ActionLinkTitleNameVeryLongTitleABCDEActionLinkTitleNameVeryLongTitleABCDEActionLinkTitleNameVeryLongTitleABCDE</a>
</div>
<div class="bottomRight">
<i class="fa fa-external-link pull-right" title="icon for link"></i>
</div>
</div>

customized bootstrap btn not working on chrome

I had to customize button in bootstrap for my webpage. It works well on IE but not on Chrome. Where did I go wrong. Below is my html.
.btn-secondary {
background-color: #283238;
color: #05a9d0;
border-color: #05a9d0;
border-radius: 0;
font-family:Helvetica Neue;
font-size:20px;
width:auto;
opacity:0.9;
border:1px solid;
height:auto;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
background-color: #283238;
color: #ffffff;
border-color: #05a9d0;
}
<div id="banner" class=" text-center vertical-center">
<div class="slide-top" id="valign-IE" data-plugin-options='{"speed":1500}'>
<img src="img/logo_page.svg" class="banner-logo"/><br />
<button class="btn btn-primaryLogin" onclick="document.location.href='signin.aspx'">Login</button>
<button type="button" class ="btn btn-secondary" >REQUEST ACCESS FOR SIGNUP</button>
</div>
</div>

window.location is read/write on all compliant browsers.
document.location is read-only in Internet Explorer but read/write in Gecko-based browsers (Firefox, SeaMonkey).
use window.location instead of document.location

Fancybox cache issue (registered and unregistered user)

We are using a fancybox on our site. Registered users can see top panel on the fancybox, unregistered can't see it.
At first boot of images there are request to the server, create a template that displays a picture. But after the first click there is no request to the server - therefore if we click by registered user and after make log out and click again we see that top panel.
There is c# checking if user registered or not:
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
//show top panel
}
else{
//hide top panel
}
There is fancybox calling:
this.cont.find("a.imglnk").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
type: 'ajax',
ajax: { global: false, cache: false },
titleShow: false,
scrolling: 'no',
});
There is template by which we get picture (C#):
<div style="position: relative" id="mmgf_#(prefix)" class="mmgf">
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
<div class="fancy-box-top-panel">
<div class="choose-album-cover">
<div style='min-height: 22px; display: inline-block;'>
<div class='checkbox-test cb_gray'>
<input type='checkbox' id='choose-album-cover' name='choose-album-cover' value='on' />
</div>
</div>
<div class="album-cover">
#RenderMultimediaGalleryStrings.ChooseAlbumCover</div>
</div>
<div class="dn manage-album-cont">
<div class="move-dp-btn">
#RenderMultimediaGalleryStrings.Move
<div class="dn move-drop-down-list">
#if (albums != null && albums.Any())
{
foreach (var alb in albums)
{
#alb.Name
}
}
</div>
</div>
</div>
<div class="clearfix">
</div>
</div> }
<div style="width: 630px; height: 440px; overflow: hidden; text-align: center; position: relative;">
#if (Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image)
{
<img src="#(Html.KZStreamImagePath(Model.Id, 630, 440))" style="text-align: center;position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;" />
}
else
{
<iframe width="632" height="414" src="#(Html.Action("GetVideo", new { id = Model.Id }))" frameborder="0" allowfullscreen>
</iframe>
}
</div>
<div style="margin-top: 10px; font-family: Tahoma, Verdana, Segoe, sans-serif; font-weight: normal;
font-size: 14px; color: #000000; max-width: 630px;">
#Model.Description
</div>
</div>
Finally i need that at every image showing there are carried out an inspection :) Thanks :)

auto login via c# webBrowser, on a javascript based site

Ive been trying to auto login to a javascript based site using a c# webBrowser form,
after a bit of searching I came up with how to auto fill the username and password:
webBrowser1.Document.GetElementById("email Id").InnerText = "email";
webBrowser1.Document.GetElementById("password Id").InnerText = "password";
but I just couldnt find how to auto click the "enter" button.
ive tried using the same method as the auto fill with the invoke option:
webBrowser1.Document.GetElementById("btn").InvokeMember("click");
but it didnt work, so here's some of the site's source code
(a small prtion, showing the login form section)
</a>
<form id="login" name="login" action="index.php?sendPass=true" method="post" style="margin: 0; padding: 0; position: relative">
<div style="text-align: right; margin-right: 10px; margin-top: 0; padding-top: 0;">
<div style="font: 12px arial; margin: 0; text-align: center"></div>
<img src="new1/login_title_ido.jpg" alt="" />
<div style="margin:0px; margin-bottom:10px">
<div style="font: 12px arial; margin: 0px">דוא"ל :
<input type="text" name="email" class="loginInput" value="" dir="ltr" /></div>
<div style="font: 12px arial; margin-top: 1px">סיסמה:
<input type="password" name="pass" class="loginInput" style="margin-right:1px;margin-top:1px" value="" dir="ltr" /></div>
<a onmouseover="this.style.cursor='pointer';" onclick="alert('הכנס דואר אלקטרוני \n ולחץ על כפתור הכנס ');"><u>שכחתי סיסמה</u></a>
<input type="image" src="new/login.jpg" align="middle" style="margin-right: 25px;" />
</div>
<div style="color: #000000; padding-top:3px; direction:rtl">
</div>
</div>
</form>
I just cant seem to pinpoint the "enter" button id, any ideas?! or perhaps theres other ways to invoke the "enter" button?

You are simulating click event correctly, but I don't see any input on the form with id="btn".
Simply try to add it in your markup like this:
<input id="btn" type="image" src="new/login.jpg" align="middle" style="margin-right: 25px;" />
EDIT:
If you don't have access to source you could try something like this:
var forms = webBrowser.Document.All.GetElementsByName("login");
var form = forms[forms.Count - 1];
if(form.TagName.Equals("FORM"))
{
form.InvokeMember("Submit");
}