<div draggable="true">
{{input value="default value" }}
</div>
In ember.js, as above code, when the div element has an attribute 'draggable="true"', on the webpage, the input area must need a double-click to edit in ie-11, but in chrome or firefox, it just need a click event to edit. Has anyone resolved this issue?
seems to be a bug
[IE 11] Input field of type text does not respond to mouse clicks when ancestor node has draggable=true
bad workaround:
<div style="background-color:lightgray" id="dragE" draggable="true">
<input id="inputE" type="text" />
</div>
click on the lightgray background
now the input field support single click
$('#dragE').focus(); <br>
$('#inputE').focus();<br>
was my solution
unfotunately reproducing with pluncer & co. did not work.
Or...set attribute draggable to "false", when the page goes to a production environment.
This worked for us.
Related
I'm new to Drupal and I've been given a project to fix a couple of bugs on...
I've got a view with several fields, it displays OK when there is a picture but when there is no picture (and thus the need to display a default picture), then a broken image link appears...For some reason the path points to a different directory...
This works:
<div class="item-header"> <div class="views-field views-field-field-selection-photos"> ... <div class="content">
<div class="field field--name-field-photo field--type-image field--label-hidden field--item"> <img src="/sites/default/files/somepicture.jpeg?itok=sJ6SOjXo" width="445" height="334"/>
This does not, due to the path pointing to ../sites instead of /sites:
<div class="item-header">
<div class="views-field views-field-field-selection-photos"><div class="field-content"><img src="../sites/default/files/structures/photos/defaultpic.jpg" width="100%" />
I've been looking at theming fields but that seems overkill, I wonder if there's a nice and clean way to sort this out rather than override a template or anything else that would seem a bit too much...
Thanks
In my testing, one of the page is having "Submit" button and when i try to click on submit button is not working (not clicking) even though script is executed.
Below is the HTML code for the submit button
<button class="btn btn-primary" name="submit_button" value="1" type="submit">
<i class="fa fa-check"></i>
Submit
I have written the scripts as like below to find submit button element.
time.sleep(6)
sub = web.find_element_by_name("submit_button")
sub.click()
I have tried to find element using "Xpath" (Absolute XPath and Relative XPath) as well and observed that did not work. one more thing is that,the accessible page is in "iframe"
and i have access that as like below
web.switch_to.frame("page-content")
To confirm that whether the scripts is running or not i have modified above code as like below.
time.sleep(6)
print ("hello")
sub = web.find_element_by_name("submit_button")
print ("hello1")
sub.click()
print ("hello2")
From above code i got know that scripts were executing successfully
Please guide me what is the issue?
Answers are much appreciable!
I am trying to select a radio button using Robotframework(Python2.7,Selenium2Library).
I have the following code:
<div id="dt_method_cashondelivery" class="u-border-b-dotted u-space-pt-10
u-space-pb-5">
<input id="p_method_cashondelivery" class="Form-check-toggle"
type="radio"title="Cash On Delivery" name="payment[method]"
value="cashondelivery"/>
<label class="Form-radio" for="p_method_cashondelivery">
<span>Cash On Delivery </span>
</label>
</div>
The Robot Framework code I am using is:
Select Radio Button payment[method] cashondelivery
Any ideas?
Use below keyword
Click Element jquery=#p_method_cashondelivery
OR
Click Element css=#p_method_cashondelivery
If you are locating element using id attribute then precede it with '#' and if you are locating element using class then precede with '.'
How do you Reveal a modal programmatically in Foundation 4?
In Foundation 3 we had the easy to use reveal() method.
What can you use in Foundation 4? Please help.
I am pretty sure you can simply use the .foundation method on your modal to call 'open' on it.. Something like:
$('#myModal').foundation('reveal', 'open');
e: Just checked the docs and yep, It's right there: http://foundation.zurb.com/docs/components/reveal.html
Look for "You can also open and close Reveal via JavaScript:"
Unfortunately, in Foundation 4 you must have this trigger link to open a modal =/ Unfortunately not because you'll have to write a lot more code (thats not true), but because this implementation isnt, let's say, pretty.
My code for the modal:
<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
<div id="modalContent"></div>
<a class="close-reveal-modal">×</a>
</div>
JS function to open and put some content into the modal
function openModal(url,params,text){
// If #url is not empty then we change the #modalContent value with the #url value
if(url !== '')
{
ajaxLoad('#modalContent',url,params);
}
// If #text is not empty then we change the #modalContent value with the #text value
else if(text !== '')
{
$('#modalContent').html(text);
}
// If both #url and #text are empty, then the #modalContent remains unchanged.
// Now we just show de modal with the changed (or not) content
$('a.reveal-link').trigger('click'); }
Hope it helps!
For programmatic (javascript) access the docs seem to only suggest launching via click event.
Add your Modal:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
Set the trigger:
Click Me For A Modal
Activate trigger programmatically:
$('#my-trigger').trigger('click');
Admittedly it does seem like a work-around, maybe this is due to their heightened "lightweight/mobile-first" focus. Lets see what the next release brings.
$("#myModal").foundation('reveal', 'open');
I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.