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
Is there a way to get a drop down arrow on md-autocomplete like md-select has?
It provided a visual clue that the control has a drop down, AND allows the user to open the drop down without typing anything
Angular Material does not provide such functionality but you could try to add something like this in your css file:
md-autocomplete-wrap:after {
display: block;
content: '\25BC';
position: relative;
top: 5px;
speak: none;
font-size: 13px;
left: -10px;
color: rgba(0,0,0,0.38);
-webkit-transform: scaleY(.5) scaleX(1);
transform: scaleY(.5) scaleX(1);
}
Its not perfect solution, but may be enough for you.
And if you want to make dropdown open on click, just add md-min-length="0" attribute to your md-autocomplete.
I have working plunker with my accordion:
http://plnkr.co/edit/Qk4AxzXLuDDAAXt3wZ6z?p=preview
Did the same in my project and when I click to the accordion header, it shows accordion content but its height is 1px and data successfully binds.
What's wrong? :(
(it's not a problem with angular and bootstrap version)
You need to handle the CSS on your own. Refer following dummy CSS for your purpose:
#accordion .ui-accordion-content {
width: 100%;
background-color: #f3f3f3;
color: #777;
font-size: 10pt;
line-height: 16pt;
}
where #accordian is id of the div.
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