Currently, I am working with a reactjs web application and it has many dropdowns throughout the application, the normal dropdown (select) approach doesn't work because the options to select are dynamically loaded from react dropdown component, but for the moment I tried to sort out by using keystroke like this:
#browser.text_field(name: "countries").set("Germany");sleep1
#browser.text_field(name: "countries").send_keys :enter
I am writing into the textfield and wait until the expected text appears then use the keystroke.
Below is the HTML, I know it doesn't help to any extent:
<div class="Select-input" style="display: inline-block;"><input name="countries" data-test-id="countries" autocomplete="0" aria-activedescendant="react-select-7--value" aria-expanded="false" aria-haspopup="false" aria-owns="" role="combobox" value="" style="box-sizing: content-box; width: 5px;"><div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div></div>
However, I see this is not the best solution any suggestions or solutions would be very helpful.
You need to pass the enter key upon that option not on the text field. May be something like this.
#browser.text_field(name: "countries").set("Germany");sleep1
#browser.element(text: "Germany").send_keys :enter
You don't need to pass the enter key to be more specific, you can trigger the click instead.
#browser.text_field(name: "countries").set("Germany");sleep1
#browser.element(text: "Germany").click
I'm trying to take an image from a phone and then put it through Watson Visual Recognition on Node-Red.
I've been loading my URL on my phone, and it's able to take an image, but then instantly crashes.
Does anyone have any experience in this? Thanks
My node-red flow is here
[{"id":"d2139149.736cb","type":"visual-recognition-v3","z":"12c7584.82dbca8","name":"Classify Meter","apikey":"","image-feature":"classifyImage","lang":"en","x":652.107177734375,"y":757.9999923706055,"wires":[["603c48c7.3144f8","8f4f26d2.549338","a862f46a.96305"]]},{"id":"4a935442.0b7efc","type":"http in","z":"12c7584.82dbca8","name":"","url":"/recophone","method":"get","upload":false,"swaggerDoc":"","x":115,"y":733.4404983520508,"wires":[["f235ab46.9552a8"]]},{"id":"1c640d2d.20b8b3","type":"http response","z":"12c7584.82dbca8","name":"HTTP Response","statusCode":"","headers":{},"x":1097.33349609375,"y":719.3928298950195,"wires":[]},{"id":"f235ab46.9552a8","type":"switch","z":"12c7584.82dbca8","name":"Check Url","property":"payload.imageurl","propertyType":"msg","rules":[{"t":"null"},{"t":"else"}],"checkall":"false","outputs":2,"x":311.5714111328125,"y":727.4404907226562,"wires":[["7de01baf.d96a2c"],["9b629cc.7379fe"]]},{"id":"603c48c7.3144f8","type":"template","z":"12c7584.82dbca8","name":"Report","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n<head><title>Watson Visual Recognition on Node-RED</title></head>\n<style> \nbody {background-color: white;}\nh1 {text-align: center;}\nh2 {color: black; text-align: center; font-family: verdana; font-size: 30px;}\np {color:black; text-align: center; font-family: verdana; font-size: 15px;}\ntable {color:black; text-align: center; font-family: verdana; font-size: 15px;}\nform {color:black; text-align: center; font-family: verdana; font-size: 15px;}\n</style>\n<body>\n<h1><img src=\"http://www.rousseau.com.pt/imagens/estudos/IBM_logo_blue_thumb1.png\">\n<img src=\"https://images.reevoo.com/retailers/Center/NPOWR/brand/260x200.png\"> </h1>\n<h2>Node-RED Watson Visual Recognition output</h2>\n<p>Analyzed image: {{payload}}<br/><img src=\"{{payload}}\" height='100'/></p>\n<table border='1' align=\"center\"> \n <thead><tr><th>Name</th><th>Score</th></tr></thead>\n{{#result.images.0.classifiers.0.classes}}\n <tr><td><b>{{class}}</b></td><td><i>{{score}}</i></td></tr>\n{{/result.images.0.classifiers.0.classes}}\n</table>\n<form action=\"{{req._parsedUrl.pathname}}\">\n <input type=\"submit\" value=\"Try again\"/>\n</form>\n</body>\n</html>","x":903.7618408203125,"y":756.726203918457,"wires":[["1c640d2d.20b8b3"]]},{"id":"9b629cc.7379fe","type":"change","z":"12c7584.82dbca8","name":"Convert Url","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.imageurl","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":459.33343505859375,"y":757.2500228881836,"wires":[["d2139149.736cb"]]},{"id":"8f4f26d2.549338","type":"function","z":"12c7584.82dbca8","name":"get labels","func":"//var labels = msg.result.images[0].classifiers[0].classes;\nvar confidence = msg.result.images[0].classifiers[0].classes;\n//msg.payload = labels.map(function(i){\n // return i.class;\nmsg.payload = confidence.map(function(i){\nreturn i.class + \" \" + i.score;\n//msg.payload = confidence.map(function(i){\n //return i.score;\n \n});\nreturn msg;","outputs":1,"noerr":0,"x":897.66650390625,"y":795.1071243286133,"wires":[["e10c122c.626fd"]]},{"id":"e10c122c.626fd","type":"debug","z":"12c7584.82dbca8","name":"","active":true,"console":"false","complete":"payload","x":1082.428466796875,"y":791.726203918457,"wires":[]},{"id":"a862f46a.96305","type":"debug","z":"12c7584.82dbca8","name":"","active":false,"console":"false","complete":"result","x":901.3629150390625,"y":832.3452758789062,"wires":[]},{"id":"df542a47.1a7088","type":"inject","z":"12c7584.82dbca8","name":"URL","topic":"","payload":"http://visual-recognition-demo.mybluemix.net/images/samples/2.jpg","payloadType":"str","repeat":"","crontab":"","once":false,"x":474.73809814453125,"y":795.75,"wires":[["d2139149.736cb"]]},{"id":"7de01baf.d96a2c","type":"template","z":"12c7584.82dbca8","name":"File UploadGet Image URL","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<html>\n<head>\n <style>\nbody {background-color: white;}\nh1 {text-align: center;}\nh2 {color: black; text-align: center; font-family: verdana; font-size: 30px;}\nh3 {color:black; text-align: center; font-family: verdana; font-size: 15px;}\nform {color:black; text-align: center; font-family: verdana; font-size: 15px;}\n</style>\n<title>Npower Meter Watson Visual Recognition font-family: \"Playfair Display\", serif;\nfont-size: 32px;text-align: left; </title> </head>\n<body>\n<h1> <img src=\"http://www.rousseau.com.pt/imagens/estudos/IBM_logo_blue_thumb1.png\">\n<img src=\"https://images.reevoo.com/retailers/Center/NPOWR/brand/260x200.png\"> </h1> \n \n <h2> Welcome to this demo on identifying Meter Issues via images </h2>\n <h3> Select an image URL</h3>\n<form action=\"{{req._parsedUrl.pathname}}\">\n //Code for taking picture from phone\n<form action=\"/action_page.php\">\n <input type=\"file\" name=\"pic\" accept=\"image/*\">\n <input type=\"submit\">\n <img src=\"http://static.flickr.com/3087/2648843542_3101f132ec.jpg\" height='200'/>\n <img src=\"http://static.flickr.com/3281/2719178040_e80447902d.jpg\" height='200'/>\n <img src=\"http://static.flickr.com/2308/2218597585_410d3c9148.jpg\" height='200'/>\n <img src=\"http://static.flickr.com/3072/2439552803_ed8b7d6ab1.jpg\" height='200'/>\n<br/><b>Copy above image location URL or enter any image URL:</b><br/>\n <input type=\"text\" name=\"imageurl\"/>\n <input type=\"submit\" value=\"Analyze\"/>\n</form>\n</body>\n</html>\n","x":843.5714111328125,"y":716.5833435058594,"wires":[["1c640d2d.20b8b3"]]},{"id":"7bd12438.024544","type":"comment","z":"12c7584.82dbca8","name":"Phone Upload","info":"","x":110,"y":682,"wires":[]}]
You can use the Camera node that is included in the node-red-contrib-browser-utils package.
To install it either run
npm install node-red-contrib-browser-utils
or go your Node-red instance -> Menu (top-right) -> Manage palette -> Install -> Search for node-red-contrib-browser utils
More info on the NPM registry page
how can I change joomla3.x template background color .I am trying it from css but I can't get it. can any body tell me how can I change the color of joomla3.3 template background color?
you can use Firebug or Inspect Element for online edit css and get which file you should editing.
Go to your root folder and
administrator/templates/isis/css
You will find template.css (in my case it is isis template)
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333;
background-color: #fff; //Change this to your desired color.
}
I'm trying to make a cross browser CSS nav-bar for mobile and desktop using Jquery Mobile.
I don't want to use media queries for retina/non-retina devices, so I'm basically trying to use a single hi-res CSS icon/sprite on all devices. The following works nicely except on IE7+8.
HTML
<span class="hasIcon">
<span class="someText"></span>
<span class="someBackground"></span>
</span>
CSS
.hasIcon {
display: inline-block;
position: static;
height: 30px; width: 30px;
background-color: none;
background: url("http://www.franckreich.de/x/IMG/gen/6060dummy.png") no-repeat;
background-size: 30px 30px;
-o-background-size: 30px 30px;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-ms-background-size: 30px 30px;
}
JsFiddle example here
Of course this breaks in IE7+8, as backgrond-size is not supported...
My question: Does anybody have an idea how I can achieve this effect on IE7+8?
Solutions, I don't want to use:
CSS Media Query for retina/non retina = miss out on good looks on desktop
put retina/non-retina icons in single sprite & position accordingly = works so-so & serving bigger file
Curious to see if anybody can help me out.
Thanks!
You can use a filter: http://jsfiddle.net/thirtydot/QTT4N/3/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.franckreich.de/x/IMG/gen/6060dummy.png',
sizingMethod='scale');
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Duplicate of IE 8: background-size fix.
Short answer: Use IE Filter. http://www.pziecina.com/design/turorial_demos/resize_background.php
I need to set the minimum height of a div. In Firefox everything is good, but I'm having trouble with IE7 - an unintended big space.
ul, il {
list-style: none;
padding: 0px;
margin: 0px;
}
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
}
<ul>
<li><div class="p_block">text</div></li>
<li><div class="p_block">text</div></li>
<li><div class="p_block">text</div></li>
<li><div class="p_block">text</div></li>
</ul>
Strangely, if I delete padding: 0px; from ul, li, everything works fine. Why?
#Chinmayee, the problem with that solution is that the element's height will not be able to grow past 18px in firefox and a few others.
A good cross-browser solution to min-height:
{
height: auto !important;
height: 200px;
min-height: 200px;
}
Basically;
Line #1: most modern browsers understand !important, therefore will not overwrite the property in the next line.
Line #2: because older browsers do not know !important, it must be a set height. Older browsers will allow the element to grow unless there is an overflow: property set.
Line #3: Modern browsers understand min- and !important. So modern browsers understand height:auto and min-height:200px, while older browsers understand height:200px; but will allow the element to grow ;)
Here's a solution that I prefer:
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
}
Then for IE use this:
.p_block{
height: 18px;
}
IE treats height as min-height so it will grow.
You can target IE by including a specific IE6 & 7 CSS file as shown below (goes in the < head >)
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" />
<script type="text/javascript">
// IE6 Background Hover Flicker Fix
try {
document.execCommand('BackgroundImageCache',false,true);
}catch(ignoreme){
}
</script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" />
<![endif]-->
Miss out the auto height and the important and add * before the height.
This will then only be applied to IE7 and below.
.p_block{
min-height: 30px;
*height: 30px;
}
It's what I used, IE7 won't use min-height but will set the height to 30px and will go bigger if required.
use this CSS for IE & FF
.p_block{
color: #336699;
font-size: 14px;
min-height: 18px;
height:18px !important;
}