Click somewhere on page to close items such as drop-down - cypress

Is it possible to click somewhere unspecific on a page?
I have the issue that a drop down becomes top level in the dom and all other elements are not visible anymore for cypress. A user probably simply clicks somewhere in order to close the dropdown. However, I fail with cypress. I can only click on the dropdown-element itself and since there are multiple items in the dropdown I have to even select one (not wanted)
I need something for cypress to click on something unspecific like:
root().click
or
cy.get('body div').click
These 2 are not working not even with force: true.

I had a similar issue and I used coordinates according to the Syntax
.click(x, y, options)
So you should be able to get the body and click on position x = 50, y = 50 or some other position outside the dropdown menu
cy.get('body').click(50, 50, { force: true })
If this does not work, you can try negative coordinates
cy.get('{{dropdown-menu-name}}').click(-50, 0, { force: true})
If this still does not work use .mousemove()
cy.get("{{dropdown-menu-name")
.trigger("mousemove", 50, 50)
.trigger("mousedown", {which : 1})
.trigger("mouseup", {which : 1})
but that seems excessive
{edit} 50 is the number of pixels to move. That is just an example. of course. Pick a number of pixels what works for your project.

Related

Create PySimpleGUI list with a key

I wish to have a list of text items in a PySimpleGUI that I can update later. That is, I want to have a key for the list. This might be vertical or horizontal, and I do not know how many items there will be.
I end up with different use cases, but the current one is to make a single line of text items with different colors. Other times, I need to write and update a customized table, just different enough that the table widget does not work.
Conceptually, I want to do something like this:
layout = [ [sg.T('Titles and Things')], sg.ListThing(key='-data-', [[]]) ]
so that I can:
window['-data-'].update(values=[ [sg.T(v, color=c)] for (v,c) in my_data ])
Another, invalid syntax, way of saying what I want is to use [key="-data-", sg.T('Item1'), sg.T('Item2')].
Is this possible?
You can update individual layout elements but you cannot dynamically change the layout itself.
It is possible to create 2 or more elements, whereby only one of them is visible, and switch them later as needed. Or you can close and re-create the window with another layout. Or combine both approaches.
An example of switching layouts:
def change_layout():
left_col_1 = sg.Column([[sg.Text(f'Text {i}') for i in range(4)]], visible=True, key='col_1')
left_col_2 = sg.Column([[sg.Text(f'Text {i}')] for i in range(6)], visible=False, key='col_2')
visible_1 = True
layout = [[sg.Column([[left_col_1, left_col_2]]), sg.Button('Change layout', key='change')]]
window = sg.Window('window', layout=layout, finalize=True)
while True:
event, values = window.read()
print(event)
print(values)
print(visible_1)
if event in ('Exit', sg.WIN_CLOSED):
break
if event == 'change':
window['col_1'].update(visible=not visible_1)
window['col_2'].update(visible=visible_1)
visible_1 = not visible_1
Please notice that the alternative layouts for the left part (left_col_1, left_col_2) need to be enclosed in a container (column, frame) to keep their position in the window in the moment they are invisible.

SAPUI5 Panels - Controlling position of content

I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'
The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.
However, when I click on the Next Category (Production Area), I need to the page to scroll back up to the first question in the Category, or maybe even just display the selected category at the top of the page.
Is this possible?
Currently, the user has to continually scroll back if when they select the next Category.
You can achieve it using scrollToElement()
var oPage = sap.ui.getCore().byId("pageId"); // you page ID
var oList = sap.ui.getCore().byId("ListId"); // element ID to which it has to scroll
if (oPage && oList) oPage.scrollToElement(oList, 1000);
Execute the above code inside the panel event expand.
you can try to use this control instead which suits your needs
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout
After trying everything, this is what worked for me.
onExpand: function (oEvent) {
if (oEvent.getParameters().expand) {
var focusID = oEvent.getParameter("id");
var elmnt = sap.ui.getCore().byId(focusID);
elmnt.getDomRef().scrollIntoView(true);

KendoSortable placeholder does not appear when item is dragged diagonally upwards

I've got two kendo sortable list wherein I can drag the multi-selected items left to right. All looks good but I experienced this weird behavior. The second time I drag diagonally upwards (north east), the placeholder "Drop here" will not appear until you move the mouse downward a little.
Start dragging "Strawberries" then "Pinapples" to the right list. Remember that your cursor should move north east until you reach the below of "Strawberries"
Is this a limitation of kendo drag and drop?
Here is the Dojo that I am using.
So, I looked the the kendo source code and used your code in a local project with a bunch of console.log()'s and here's what I found:
(The methods of interest are _drag() and _movePlaceholder() of the Sortable class)
This is how kendo is deciding whether or not to show the placeholder(call _movePlaceholder()) inside _drag():
if (axisDelta.y < 0 && (moveOnDragEnter || offsetDelta.top < 0)) {
direction = 'prev';
} else if (axisDelta.y > 0 && (moveOnDragEnter || offsetDelta.top > 0)) {
direction = 'next';
}
While you are moving the cursor upwards over the right-side dropzone:
axisDelta.y is -1(moving up) AND offsetDelta.top > 0(you are below the top of the drop area)
So neither case is true.
The instant you drag 1 pixel down:
axisDelta.y is 1(you are moving down) AND offsetDelta.top > 0(still below the top of the drop area)
So you fall into the direction = 'next'; and _movePlaceholder() will get called since direction is set and the "Drop Here" appears in the "next" spot(below the last item).
If you drag from the top of the drop area, you would hit the direction = 'prev'; case and the "Drop Here" appears in the "prev" spot(above the first item).
The moveOnDragEnter variable seems to be an undocumented option that you can set to true on your sortable init to override the offsetDelta check BUT if you set it, it will cause the "Drop Here" to appear immediately upon entering the drop area BUT it will appear on the top of the list if you enter dragging up and it will appear on the bottom of the list if you enter dragging down...which is not what you want.
Whew!
So....no, with the current logic there is no way to be dragging upwards AND get the "Drop Here" to appear on the bottom of the list and it is a limitation of the sortable.
Now, if you like, you could probably edit the source code to add more cases to the logic to check for more condition combinations, i.e:
if (I'm anywhere in the drop area) {
figure out if the cursor position is above the first item or below the last item and set direction accordingly so that _movePlaceholder() will get called
}
...or just accept the limitation.

How to expand math field in CKEditor

Math formula field is small.
This is default behavior of the Latex plugin. Can the field can be expanded? If yes, then how can I do that?
I have browse to fix this solution but none of them match with what I want. Anyone know how to expand it?
This is the screen shot:
UPDATED
return{title:b.title,minWidth:1000,minHeight:650,contents:[{id:"info",elements:[{id:"equation",type:"textarea",rows:10,label:b.dialogInput, ..
Note: I can expand the dialog display but I cannot expand the textfield formula form. It seem like the variable rows not functioning.
Should I declare the variable rows in other file?
You can edit the code that displays this dialog.
In your ckeditor folder, under the /plugins/mathjax/dialogs/ folder, open the mathjax.js file.
To make the dialog wider change the minWidth attributes. For example, to set the width to 750 pixels:
return {
title: lang.title,
minWidth: 750,
minHeight: 100,
contents: [
To add more lines to the formula textbox, add the rows attribute with the number of lines you want (the rows attribute is not there by default so add it). For example, to make the textbox 10 lines long:
elements: [
{
id: 'equation',
type: 'textarea',
rows: 10,
label: lang.dialogInput,
Here's a screenshot with the above changes:
Save the file and clear your cache before testing.

Set scrollLeft/scrollTop simultaneously does not work in Safari 6

When setting the scrollTop and scrollLeft parameters in Safari 6 simultaneously, only one of both gets executed, scrolling the page only over one axis. This happens both using native JavaScript, jQuery and the jquery.scrollTo plugin.
Example using jQuery's .animate():
$('body').animate({
'scrollLeft': 100,
'scrollTop': 100
}, {
'duration': 500,
'easing': 'swing'
});
I've set up a demo page here: http://nabble.nl/demo/safari6scrollto/
All examples work fine in all major browsers as expected, in Safari 6 only example no. 4, 6 and 7 work.
Somehow, when loading the demo page in an IFRAME (see bottom of demo page), everything works just fine.
Is this a bug in Safari? If so, how to work around this issue? If not, what is causing it and how can this be resolved?
Other related reports:
https://github.com/flesler/jquery.scrollTo/issues/9
http://forum.jquery.com/topic/scrolltop-scrollleft-not-working-in-safari-6
http://bugs.jquery.com/ticket/12588
I needed to get the jquery.scrollTo plugin working on OSX Mountain Lion, and since I couldn't find the specifics on what is causing this behaviour, I put together a rather ugly workaround. It uses window.scrollTo(x, y) in the step function of jQuery's .animate(), which gives no problems in Safari 6:
var left;
$(window).animate({
'pageXOffset': 100,
'pageYOffset': 100
}, {
duration: 500,
easing: 'swing',
step: function(now, fx) {
if (fx.prop == 'pageXOffset') {
left = now;
} else if (fx.prop == 'pageYOffset') {
window.scrollTo(left, now);
}
}
});
Please note that the step function is called for every animated property, for every element the animation is applied on (in our case just 1: window). Hence the intermediate variable to store the current X position in the animation.
It uses the pageXOffset and pageYOffset properties of the window object, so I don't know how suitable this workaround is for animating the scrollLeft and scrollTop properties of non-window objects.
Anyway, it works for scrolling the entire document, which was all I wanted, and does so very smooth in Safari 6, too!

Resources