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
Related
I have created a feature in my application wherein one can copy contents of an existing invoice to create a fresh new invoice. All other fields are getting copied. But the field 'note to customer' isn't getting displayed somehow. I've used text angular for adding a 'note to customer'.
<div layout="row" flex>
<div flex-xl="" ng-if="documentEntity.noteToCustomer"
ng-click="noteToCustomer($event,documentEntity.noteToCustomer)"
style="border: 1px solid rgba(0, 0, 0, 0.12); background-color: #fdf7f7; padding: 15px; border-width: 2 0 1px; line-height: 26px; width: 100%; box-sizing: border-box; float: left;"
class="flex-xl" ><span ng-bind-html="documentEntity.noteToCustomer"></span></div>
</div>
What might be the issue here?
text angular directive is missing in above
<div text-angular flex-xl="" ng-if="documentEntity.noteToCustomer" ....>...</div>
add a plunker for clear understanding..
In the documentarion of textangular, something is said about using ng-bind-html. Try using ta-bing instead.
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.
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