I am trying to enter some text in text-box which is inside iframe. I am able to identify the text-box by switching to iframe, but not able to type in text.
Here, is the html code:
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" style="width: 100%; height: 100%;" aria-describedby="cke_50" title="Rich Text Editor,missionStatementText" src="" tabindex="0" allowtransparency="true">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title data-cke-title="Rich Text Editor,missionStatementText">Rich Text Editor,missionStatementText</title>
<style data-cke-temp="1">
<link href="http://localhost:8080/sowodemo/js/ckeditor/contents.css" rel="stylesheet" type="text/css">
<style data-cke-temp="1">
</head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="false">
http://l
<br type="_moz">
</body>
</html>
</iframe>
My Selenium Code:
driver.switchTo().frame(driver.findElement(By.tagName("iframe")));
driver.findElement(By.tagName("body")).clear();
driver.findElement(By.tagName("body")).sendKeys("type text");
driver.switchTo().defaultContent();
try to use actions class, we got success when we have used actions class
WebElement we = driver.findElement(By.xpath("xpath of the element"));
new Actions(driver).moveToElement(we).click().sendKeys("bfsdjkf").build().perform();
Related
My media tags dont seem 2 work even thought i have the viewport tag in my head. I am trying to change the font size when lowering the resolution. I am not sure what i am doing wrong but would love some help.
<? ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Changa One' rel='stylesheet'>
<script src="main.js"></script>
</head>
<body style="background-color: #bdc3c7">
<div class="navBar">
</div>
<div class="container">
<div class="pLbl" style="font-family: 'Changa One';">
Enter Password to enter:
</div>
<div>
<input class="pInput" id="pInp" type="password"></input>
</div>
<div>
<div class="tooltip">
<button class="pBtn" onclick="pLogin()"></button>
<span class="tooltiptext">Submit</span>
</div>
</div>
</div>
</body>
</html>
<style>
.pLbl {
font-size: 24px;
color: rgb(50,50,50);
}
#media screen and (max-width: 640px)
{
.pLbl {
font-size 12px;
}
}
</style>
It's just because you forgot the colon after font size on media query :)
PS: While modern browsers have a code correction for invalid HTML, I suggest you put style tag in your head, declare the doctype and write your inputs with self-close tag.
Here there is an example of my problem:
http://asdcastelli.altervista.org/test-bootstrap/
In the head i have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but the responsive works only if i resize the window browser, not in mobile
Why?
This is the page in the resized windows browser
This is the page in the mobile view (chrome inspector)
You have to include table into a div.
<div class="responsive_table">
<table id="pubblicazioni_table">
/*your content*/
</table>
</div>
and on your css, you have to paste this line:
.responsive_table { overflow-x: scroll; width: 100%; }
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
How to restrict the webbrowser control bouncy behaviour (white space is seen while scrolling up and down). Please refer the screenshot below.
There doesn't appear to be a way to disable the 'bounce in the WP7 or WP8 WebBrowser control.
But the issue you're seeing can be fixed with a small bit of CSS. Simply apply a background-color to the BODY of the document..
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {background: black}
#content {background: black}
p {color:white}
</style>
</head>
<body>
<div id="content">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</body>
</html>
This question already has answers here:
How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?
(5 answers)
Closed 6 years ago.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Result in Chrome:
removed dead ImageShack link
Result in FF:
removed dead ImageShack link
Try display:block on the textarea:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {display:block;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
The issue is that the textarea is inline and it is using the text height to add a bit of extra padding. You can also specify:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;line-height:0px;font-size:1px;">
<textarea></textarea>
</div>
</body>
</html>
Another option which is helpful if you want to keep the textarea inline and don't want to mess with the parent block's font properties (I suggest this over the previous method with line-height):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {vertical-align:middle;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Finally, if you're really worried about consistency between browsers keep in mind margins and other things like that can be defined with different defaults in different browsers. Utilizing something like YUI-Reset can help bring all new browsers to a consistent standard from which you can build.
Setting the display mode to block did the trick for me. Just to clarify, here is the declaration that you need to add to your stylesheet. I would recommend adding it to your reset or normalize stylesheet, in the first place.
textarea {
display:block
}
I usually have a "first line" in every global.css file I make.
saying:
<style>
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th
{
margin:0;padding:0;border:none;
font-familiy:"my sites default font";font-size:10px;
}
</style>
After this, I feel that I have full control of the browsers behaviour, when testing on 5 different platforms: Chrome, Firefox, Safari, Opera and ... doh... Microsoft Internet Extracrap..
Then you can easily do something similar for < input > and < textarea > too.
if the first line does too much, then just make a second line for the "special cases" alone.
<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>
Remember that CSS inherits, so you can have multiple declarations of different classes.
Does this remove your problem?