I use Packery.js with ability to drag element. Inside the container I have <select> tag.
When I click anywhere on the container, drag event starts. Also on child elements. This prevents drop down from opening. Example under this link:
http://jsfiddle.net/Tschareck/tXdqw/1/
How can I override dragging, and instead open dropdown, when I click on it?
The trick is to use handle.
Answer to this question:
https://github.com/desandro/draggabilly/issues/37
Related
If you have a TreeView in a VS Code extension, when you click on the items in it, they get selected (highlighted green, in my color theme). Click away from them and they get un-highlighted. See the below screenshot, in the file explorer view:
I'd like to "take control" of this behavior. I want to disable the highlighting that happens by default when the user clicks on these items, disable the un-highlighting that happens when they click away, and control in my extension code when the items get highlighted. I'd like to do this in my extension's custom TreeView, not an existing one.
Use the 'reveal' method of the treeview item. You can specify if it's to be 'selected' and also 'focused'.
Basically, you can change to the structure you want by forcing a refresh of the whole treeview. You probably already know that if you started making treeview extensions for vscode...
But then, right as it finishes re-rendering the tree, you 'reveal' a node, with the 'select' parameter option, to have that node as the selection in the tree. ...To have another node selected, just 'reveal' another one. (no need to force a full refresh of the treeview if it's only to have another node selected without changing the structure of the tree.)
see the 'reveal' method of the treeview here treeview API
Also see the leointeg extension on vscode for actual code example of controlling which node is selected
How to create menu like below
I have already craeted charts but all of them are displayed within tab open, I want to create menu like above to choose which one should be displayed.
Does anyone have suggestion or some tutorial to watch how to make these?
To me, it looks like a Static content region that has buttons as menu items. Those buttons have images on them (so that they look pretty - like the one you attached, having blue-red-green worksheets).
How to do that?
Create a button
modify its size using "Custom attributes" property. For example:
style="width:100px; height:100px"
in order to put an image onto the button, here are two options you might want to explore:
if it (the image) is in workspace images (uploadable as a shared component), then resize it before uploading and set it to a button by putting something like this into button's label property:
<img src="#WORKSPACE_IMAGES#PRETTY_WORKSHEETS.JPG">
or, use "Custom attributes" again, this time by using a fully-qualified URL as an image source, e.g.
style="width:100px; height:100px; background-image:url('https://www.miroconsulting.com/wp-content/uploads/2018/10/oracle-apex-license-1.png')"
The rest should be easy, i.e. setting a link to the button so that - when pressed - it takes you to another page in this application (which is what you, probably, will do).
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
I have a situation where a toolbar item in CKEditor5 opens a ContextualBalloon which contains an iframe.
In my current understanding, the only way to hide the balloon is to remove the iframe view i.e.
this.balloon.remove(this.colorPickerIframeView)
However this removes the iframe view from the DOM, meaning that the next time I open the balloon view the iframe is reloaded.
I'd rather not have to reload the iframe every time, is there any way around that?
If you want to only hide the ContextualBalloon's view you can try to use this.balloon.view.hide()
I'm trying to complete a happy path e-commerce payment test but I cant seem to click on the nested element for credit card to be honest I'm not entirely sure which is the clickable element.
Any help to get this working would be appreciated.
When inputting forms, you typically want to interact with input and select elements. In this case, you can see that the visible input field is a radio button - ie <input type="radio">.
You access radio buttons using the radio method and select it by using the set method:
browser.radio(id: 'cc-payment').set
The element you want to click is the input with type radio. You should be able to do something like:
driver.find_element(:css, "input[id='cc-payment'][value='creditCard']").click
I'm curious if clicking on the parent item would resolve.
#browser.input(id: 'cc-payment').parent.click
If the div registers the click and sets the input then this might work. You should be able to manually verify this beahviour by clicking outside of the radial and seeing if it selects.