I create simple application with window and 3 field:
Fiddle Link (Use Chrome)
When I enter a value in the field, it looks fine.
But when I change the focus,text in field moves down.
All fields work similarly.
After click on trigger (if field has it) text looks fine.
This bug only in Chrome.
IE, Opera, Firefox and Vivaldi work right.
How can I fix that?
It's a known bug for chrome. Take a look here for the workaround:
https://www.sencha.com/forum/showthread.php?301227-Visual-combobox-bug-in-Chrome-43.0.2357.65-m&p=1101244&viewfull=1#post1101244
Css fix:
.x-form-text { display: inline; }
Demo here: http://ext4all.com/post/extjs-5-textfield-chrome-bug-fix.html
Related
I am trying to use Protractor to write end-to-end tests using Protractor. I've run into an issue where I am unable to click on an Angular Material md-tab item and have it load. Instead, when I click on it, I just get a blank area where the tab content should appear.
I found this GitHub issue that provided some CSS that supposedly fixes the problem, but even with the CSS my tab is still not loading. I have tried clicking the tab in the following ways:
element.all(By.css('md-tab-content')).then (tabs)->
#browser.executeScript("#{tabs[1]}.click();")
#browser.actions().click(tabs[1]).perform()
#tabs[1].click()
browser.actions().mouseMove(tabs[1], {x: -20, y: -20}).mouseDown().perform()
All of these methods result in the same hanging issue. The CSS I added based on the GitHub response is:
md-tabs-canvas {
// Keeps IE11 from making `md-pagination-wrapper` as wide as the page.
align-items: inherit;
md-pagination-wrapper {
width: auto !important;
}
}
If I use browser.sleep(5000) and manually click the tab rather than trying to click the tab through protractor, the tab loads perfectly, and the test continues on as expected.
Does anyone know how I can use protractor to click an md-tab element and have it load the content properly?
I click tab items in my e2e tests without any problems using the following
element(by.css('md-tab-item:nth-child(1)')).click();
I got a great solution here. Just do element(by.cssContainingText('.mat-tab-label', "<Tab Name>")).click();
I am trying to make the Bootstrap dropdown keyboard accessible in my page. But I don't know why keydown/up doesn't work. Please see the my jsfiddle demo
And I also have some questions on Bootstrap accessibility. Please help to review it.
According the Issue 931. It seems the keyboard accessibility wasn't added until v3.0.0-rc1. Right?
Why missing href in the anchor element would disable keyup/down accessibility for dropdown?
The problem lies in the following source code of bootstrap's dropdown.js that is using to find index of focused element:
var index = $items.index($items.filter(':focus'))
the problem is that the $items.filter(':focus') don't returns correct element and in this case index will be -1 each time.
I don't know how jQuery's :focus exactly works but this problem can be solved with the following code: var index = $items.index($(document.activeElement)). But anywhere it's not good thing to change something in source code of 3rd-party library.
This is an unanswered question in some blogs... `
<< Please Click Here To This Unanswered Question In Other Blogs..>>
will greatfull if can..
am trying to retrive Combobox selected item into a TextBox..here is my code..
using AjaxControlToolKit.dll version - 4.5.7.1002 for ComboBox.
i need to run this code on IE11 for sure.
Please help me in getting solution.
~ Udai
For the difference in html mentioned in reference,you need to access your control using clientId, on of the ways is:-
var TextBoxXXXID = <%=textBoxXXXID .ClientID%>
var control= document.getElementById(TextBoxXXXID);
About the issue this can be because of browser compatibility issue, you would like to add meta tag and add app_brower folder specified in the link .
IN IE 11, use this code to find user input in the textbox in the AjaxComboBox.
It is working in Chrome as well.
ASPX -
<ajaxToolkit:ComboBox ID="cboMetric" runat="server"></ajaxToolkit:ComboBox>
Code behind -
TextBox textBox = cboMetric.FindControl("cboMetric_TextBox") as TextBox;
strMetric = textBox.Text;
I'm using Selenium Webdriver to test a web page.
The web page http://www.leaseplan.nl/contact/index.asp has two buttons, one button with button text 'Zoeken' and one with button text 'Verstuur'. I want to click on the button with button text 'Verstuur' either by using XPath or CssSelector with the following code:
driver.FindElement(By.XPath("/html/body/div[3]/div[2]/div[2]/form/fieldset/a/span")).Click();
driver.FindElement(By.CssSelector("fieldset.contact_form > a.button > span.button_center")).Click();
But using the either one of the above lines of code, on the button with text 'Zoeken' is clicked on instead.
This button has quite a similar CssSelector and XPath:
fieldset.header_search a.button span.button_center
/html/body/div[3]/div/form/fieldset/a/span[2]
Does anybody know how to solve this?
Try this out with the cssSelector and tell me if it's work.
For "verstuur" :
By.cssSelector("div.content form a.button")
Solution :
Ok, i've found your problem. Your xpath is good but now, your action on the click submit the first form, so the form with "Zoeken".
onclick="document.forms[0].submit();" // submit the 1st form, the bad one !
Try this :
onclick="document.forms["form"].submit();" // submit the 2nd form, the good one !
//or
onclick="document.forms[1].submit();"
proof : Jsfiddle
xpath for ZOEKEN /html/body/div[3]/div/form/fieldset/a/span[2]
xpath for VERSTUUR /html/body/div[3]/div[2]/div[2]/form/fieldset/a/span[2]
Try this:
driver.FindElement(By.XPath("//span[text()='Verstuur']")).click();
Edit:
I think you want to learn Selenium that's why you are using 3rd party websites. If you really want to learn Selenium find some opensource applications to automate. Here is a good application to automate -
http://sourceforge.net/projects/sugarcrm/files/1%20-%20SugarCRM%206.5.X/FastStack/
Download the latest version and install.
Find more info about the website and selenium stuff here. It's so good..
http://selftechy.com/2011/02/05/introduction-to-selenium-web-application-test-automation-tool
Zoeken: driver.findElement(By.xpath("//div[1]/form/fieldset/a/span[2]")).click();
Verstuur : driver.findElement(By.xpath("//div[2]/form/fieldset/a/span[2]")).click();
Using xpath is easy but slow.
IE9 isn't playing nice with my select boxes. When you click on one to change the value in Chrome it works as intended. In IE9 it's removing the default selection from every select box on the page. What the heck is happening here?
I had to do a jsfiddle this time becuase plunker doesn't seem to link IE9 either.
http://jsfiddle.net/sonicparke/nEDfY/
Here's one section of the code I'm using for the select boxes. There's a working example in the fiddle.
<select ng-model="initialOption1" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
<select ng-model="initialOption2" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
<select ng-model="initialOption3" ng-options="drafter.name for drafter in drafterItems"><option value="">Initial Option</option></select>
I'm not exactly sure what the cause is, but you can make it work by not using the initial option in the markup. Instead set a default in your ngOptions object and set the model values to that.
http://jsfiddle.net/Z2gkg/
$scope.initialOption1 = $scope.drafterItems[0];
$scope.initialOption2 = $scope.drafterItems[0];
$scope.initialOption3 = $scope.drafterItems[0];
I would love to know the underlying cause, but it is likely related to the ng-grid library you are including.