So I've been trying to get the CalendarExtender from the Ajaxcontroltoolkit to work in my web application and all with no success. I started off trying to use the little calendar picture to make it popup, but the page kept reloading when it was clicked and I could not find any solutions online. I read that if I did not choose a popup image it would activate when the textbox came into focus, so i cleared the property...but still nothing what am I missing?
<asp:TextBox runat="server" ID="CustomerSignUpDate"
style="z-index: 1; left: 1px; top: 0px; position: relative; height: 21px;"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender"
runat="server" TargetControlID="CustomerSignUpDate"
Format="MM-dd-yyyy" StartDate="2012-06-20"/>
<div style="position: relative;">
<asp:TextBox runat="server" ID="CustomerSignUpDate"
style="z-index: 1; left: 1px; top: 0px; position: relative; height: 21px;"/>
<ajaxToolkit:CalendarExtender ID="calendarButtonExtender"
runat="server" TargetControlID="CustomerSignUpDate"
Format="MM-dd-yyyy" StartDate="2012-06-20"/>
</div>
So I accidentally deleted everything on my server last night and had to redeploy my web application....and what do ya know..IT FIXED ITSELF.
So I say, make sure you have all the references in your project and perhaps delete everything on the server and do a fresh deploy.
Related
Initially, when my site loads some images are sliced off, which reappear after a few seconds. But once it scrolled the issue will reappear. It occurs in the latest version of Firefox only. It's fine in Firefox version 44, but I am getting the issue in 49 and 52.
The HTML structure is as follows.
<div style="transform: translate(0px, 0px); position: absolute; left: 0px; top: 0px;">
<div class="whitecontent" style=" position: relative;">
<p class="blockelemimage" style="position: absolute; top: -64px;">
<img alt="Client Logo" src="">
</p>
</div>
</div>
there is issues about the transform-box and transform property in Firefox.
they are an experimental features . check here . and they are disabled in the beta versions.
also there are a reported bug here about that.
hope those links would help you.
I need to click on the that appears after clicking in box that opens after clicking on an expand icon. Using Webdriver I am able to expand the box but after that I am unable to click on the image icon which suposed to open a dialog box.
The xpath is showing for that image is as follows:
html/body/div[2]/div/div/div/div[3]/div/div[2]/div/div[2]/div/div[2]/div/div/div/div/div/div/div/div[14]/div/div/div/div[1]/div/div[1]/div/div[2]/div/div/div/img
The code is coming as:
<div id="isc_X1" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:205382;CURSOR:default;" eventproxy="page$mainWindow$interactionsUI$$content$InteractionDetail$VerticalLayout1">
<div id="isc_X2" class="normal" onscroll="return page$mainWindow$interactionsUI$$content$InteractionDetail$customerInteractionSearchGrid.$lh()" style="position: absolute; left: 0px; top: 0px; width: 717px; height: 64px; z-index: 205400; margin: 0px; -moz-box-sizing: border-box; overflow: hidden;" eventproxy="page$mainWindow$interactionsUI$$content$InteractionDetail$customerInteractionSearchGrid">
<div id="isc_Y8" class="normal" onscroll="return page$mainWindow$interactionsUI$$content$InteractionDetail$MenuLayout.$lh()" style="position: absolute; left: 0px; top: 64px; width: 800px; height: 18px; z-index: 205454; padding: 0px; -moz-box-sizing: border-box; overflow: hidden; cursor: default;" eventproxy="page$mainWindow$interactionsUI$$content$InteractionDetail$MenuLayout">
<div id="isc_Y9" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:205454;CURSOR:default;" eventproxy="page$mainWindow$interactionsUI$$content$InteractionDetail$MenuLayout">
<div id="isc_YB" class="imgButton" onscroll="return page$mainWindow$interactionsUI$$content$InteractionDetail$ImageAdd.$lh()" style="position: absolute; left: 782px; top: 0px; width: 18px; height: 18px; z-index: 205472; -moz-box-sizing: border-box; overflow: hidden; cursor: pointer;" tabindex="7583" onblur="if(window.isc)isc.EH.blurFocusCanvas(page$mainWindow$interactionsUI$$content$InteractionDetail$ImageAdd,true);" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(page$mainWindow$interactionsUI$$content$InteractionDetail$ImageAdd,true);" role="button" eventproxy="page$mainWindow$interactionsUI$$content$InteractionDetail$ImageAdd">
<div id="isc_YA" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:205472;CURSOR:pointer;" eventproxy="page$mainWindow$interactionsUI$$content$InteractionDetail$ImageAdd">
<img border="0" align="TEXTTOP" height="18" width="18" suppress="TRUE" name="isc_YApage$mainWindow$interactionsUI$$content$InteractionDetail$ImageAdd" src="http://kolcaresuse01:12345/cwf/r/orga_pics/add_icon.gif?v=1371640285409en-xx"/>
Please help to solve this.
Use shorter locators if possible, //tag[#attribute_name='attribute_value'] for example
You need to use explicit and implicit waits. They're discribed here
If I understand your code right, the <img> is in <div id="isc_YA" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:205472;CURSOR:pointer;" eventproxy="page$mainWindow$interactionsUI$$content$InteractionDetail$ImageAdd"> tag. So here's the python example:
from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
## Here you're expanding the box, then:
WebDriverWait(driver, 5).until(lambda driver : driver.find_element_by_xpath("//div[contains (#id, 'constant_part_of_id')]/img").is_displayed(), "No icon displayed")
## 5 is for 5 seconds to wait
## driver is for instance of webdriver
## check the locator, it might be wrong
driver.find_element_by_xpath("//div[contains (#id, 'constant_part_of_id')]/img").click()
## Or whatever you're going to do with that
I would use FluentWait instead of WebDriverWait because it sounds like you may be getting a exception that you need to handle/ignore until the element is ready to be acted upon. Also, #AlexanderPetrovich is correct and you should use a shortened locator or perhaps a css locator instead. Also, I would use the Firefox plugin "FirePath" to verify your locator syntax.
Is there a public API for accessing the HTML div object of an OpenLaszlo view in the DHTML runtime? There doesn't seem to be an example for that in the OpenLaszlo documentation, but technically it should be possible.
When the DHTML runtime was created, the OpenLaszlo team decided to hide the implementation details of the HTML div structure from the developer using LZX. While it's not recommended to directly access the underlying object structure of views, there are situations where you have to do it - but it might break your application with future updates of the platform.
Take the following simple example application:
<canvas debug="false">
<view name="v1" x="10" y="10" width="100" height="100" bgcolor="red">
</view>
</canvas>
If you compile the application using the query string
lzoptions=proxied(true)%2Cruntime(dhtml)&target=html
you will just get the application without the developer console. Now, when you inspect the page structure, you will see the following div structure:
<body>
<div id="appcontainer" style="height: 100%; width: 100%; margin: 0px; padding: 0px; border: 0px none; overflow: hidden; text-align: left; ">
<div class="lzappoverflow" style="width: 1905px; height: 429px; ">
<div class="lzcanvascontextdiv" id="lzcanvascontextdiv">
...
</div>
<div class="lzcanvasdiv">
<!-- visual part of view instance with id="v1" -->
<div class="lzdiv" style="background-color: rgb(255, 0, 0); height: 100px; width: 100px; left: 10px; top: 10px; z-index: 2; "></div>
</div>
</div>
</div>
</body>
I've removed the CSS information and added the comment to mark the div representing the view with id=v1. You don't see any div with the id value 'v1', since the view instances are instantiated as JavaScript objects storing a reference to the visual presentation. You can access the div by calling
v1.getDisplayObject()
which will return
<div class="lzdiv" style="background-color: rgb(255, 0, 0); height: 100px; width: 100px; left: 10px; top: 10px; z-index: 2; "></div>
The object hierarchy of a view is *view->sprite->__LZdiv* property. That means, for each view OpenLaszlo instantiates a runtime specific sprite object, which in turn generates the corresponding div for the DHTML runtime.
v1.sprite.__LZdiv.style.backgroundColor
"rgb(255, 0, 0)"
Here are the links to the implementations of the LzView and LzSprite class, if you are interested to learn about the internals:
After my Browser was today updated to Firefox 7.0 on some of my pages elements are replaced with ... (elipses) and the z-index of items is all messed up.
I tried the same site in 3.6.2 and 6.0 and it is working fine. As soon so the machine updates to 7.0 or 8.0 beta it now longer renders so the problem is related to firefox.
I made a sample html page that shows the problem.
In the upper div i would expect the image to display in the button us it does in the lower div but it is replaced with .... It seems to be the text-overflow: ellipsis; css but why would this change on updating?
Does anyone have a suggestion?
<!DOCTYPE html>
<html>
<head>
<title>Infor DataGrid Sample </title>
<style>
.slick-headerrow-column {
background: #d5d5d5;
border-bottom: 0 none;
height: 100%;
margin-left: 2px;
padding-top: 2px;
}
.slick-headerrow-column, .slick-cell {
cursor: default;
float: left;
overflow: hidden;
padding: 3px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
z-index: 1;
}
.inforFilterButton {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAB0ElEQVQ4T62USWoCQRiF+wQeQZKt4MKVG68RSFAkS/EG3sBlFCdUslNxIYgLiVEQZwWHheKwMA444EIFPcCLr0gbDWgrpOFRXV1VX/31/r9Lkv770Wg0OofDMXa73fB6vfD7/QgEAkLBYPAm/cyf6A6PdICNfD4f4vE4stksCoUCyuUyKpXKzcpkMohGowiFQiPJ5XIhFoshn8+j0Wig0+mg1+thMBjcpVqthkQiAcnj8YA71Ot19Pt9jMdjLBYLoeVyeZM4dzqdCo7E4+ZyObTbbQFbrVbYbDZCFotFjMl9pZZ2SUxCsVhEt9vFfD7Her3GbrfDfr/HoQBgt9vFu5K4hr4LYKlUEr4xdEbBxZFIBFarFVqtVhEmb1atVn+B9O8UaDQakUwmoVarMZvNboJeBRLEnQmmz0pH5vhFIC0g0GazwWAwCOg14JvTJcYvAgmifzwypVKpLgIJe3oxnQOZTXrIlklhIhilHBWjJFjOvNzKMAKZ5WOErJ+/WVbyzB98F5FRzyazKLcjMJVK3QX8SH2ewUzmV/GnyMBhOBwWHX48LWylKDm+3W4xmUzQbDbRarWGkl6vfzzcEl+8bdLptLhtWPHc4B4R5nQ6H74BwAUeSLCHS8oAAAAASUVORK5CYII=");
border: medium none;
height: 16px;
left: -3px;
position: relative;
top: 4px;
width: 20px;
z-index: 10;
}
</style>
</head>
<body style="margin:10px;padding:10px">
<div class="ui-state-default slick-headerrow-column c2">
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"> </button>
</div>
<br>
<br>
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"></button>
</body></html>
Firefox 7 is the first Firefox release to implement text-overflow: ellipsis. It also implements what the spec said when Firefox 7 shipped, which was that if only one value is provided then it applies to both start and end sides of the overflowing container. In your case your buttons are positioned so they overflow the left edge of the container, so they're overflowing and get converted to ellipses.
Based on feedback from the experience with Firefox 7, the spec has since been changed to a behavior that's more compatible with the way IE originally implemented text-overflow: ellipsis, but there may be more changes happening there. The wonders of unstable specs that are written to not match deployed browser behavior...
I created Ajax Calender Extender as a user control and using the same in various pages. My problem with the calender user control is, When I click on the Next and Previous buttons in the calender It is not navigating previous month or next month.
AJAX version is : 4.1.40412.2
AJAX Calendar CSS :
.ajax_calendar
{
position: relative;
left: 0px !important;
top: 0px !important;
visibility: visible;
display: block;
background-color: Red;
}
.ajax_calendar iframe
{
left: 0px !important;
top: 0px !important;
}
Here is my user Control is :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="UCCalender.ascx.cs"
Inherits="test.Web.Pages.UserControls.UCCalender" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>
<div style="position:relative;border:solid 1px red;">
<asp:TextBox ID="txtDate" MaxLength="10" CssClass="txtBox medium" ToolTip="DD/MM/YYYY"
Style="width: 85px;" Font-Size="11px" runat="server"></asp:TextBox>
<asp:ImageButton ImageUrl="~/Resources/Images/calendar.gif" ID="imgCalender" runat="Server"
BorderWidth="0" ImageAlign="absmiddle" />
<ajaxControl:CalendarExtender ID="AjaxCalenderCtrl" runat="server" Format="dd/MM/yyyy" PopupPosition ="TopLeft"
TargetControlID="txtDate" FirstDayOfWeek="Sunday" PopupButtonID="imgCalender">
</ajaxControl:CalendarExtender>
<ajaxControl:TextBoxWatermarkExtender WatermarkCssClass="watermark" ID="txtWaterMarkDate"
runat="server" WatermarkText="DD/MM/YYYY" TargetControlID="txtDate">
</ajaxControl:TextBoxWatermarkExtender>
<asp:RegularExpressionValidator ID="regexpvalEndDateEdit" ErrorMessage="!" ValidationExpression="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d"
ControlToValidate="txtDate" runat="server"></asp:RegularExpressionValidator>
</div>
And I am using the same UserControl in the pages in this way:
<table id="inputDetails" style="padding: 0px; width: 700px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 198px; position: relative" align="left">
<asp:Label ID="lblBeginning" runat="server" Text="Beginning :" Style="margin-left: 10px;"></asp:Label>
<asp:TextBox ID="tbxBeginCalendar" TabIndex="3" runat="server" Style="width: 85px;" Font-Size="11px"></asp:TextBox>
<asp:ImageButton ID="BeginCal" runat="server" ImageUrl= "~/Resources/Images/calendar.gif" />
<uc1:UCCalender ID="UCCalStartDate" runat="server" />
</td>
</table>
Please provide the solution for this post.
This problem happens when you browse the CalendarExtender in IE8. You need to add the following CSS class to have the problem solved:
.MyCalendar .ajax__calendar_title
{
border: none; /* Fixes the "previous" and "next" buttons in the popup title */
}
This is explained here: http://ajaxcontroltoolkit.codeplex.com/workitem/22894
I have just come across this same issue. It was seemingly being caused because I had applied position:relative to the parent element.
Adding this this CSS fixed the issue for me:
.ajax__calendar_prev, .ajax__calendar_next{z-index:1;}
Hope that helps!