When click the page scroll all the way up.

[OmarZeidan]

Thank you for this handy editable plugin, however I just noticed that if the button "Add to my calendar" is in the middle of a page, when you click on it the page scrolls all the way up, any help with that ?

[kevinyuliawan]

I am also having this problem. The reason it is scrolling is because the "Add to calendar" text is a label for a checkbox input element, so when you click the label, the browser tries to scroll to that checkbox as part of its native behavior. You can fix this by removing the "for" attribute in the label, and then by changing the checkbox's value by using something like jQuery's .prop() or .click() function.

To remove the 'for' attribute, you'll have to go into ouical.js and change this line. For example in my file:

I just commented out the whole line for reference, but in the new code I simply removed the 'for' attribute. This makes it so that clicking on the label won't toggle the checkbox.

Then like I said you can use jQuery to set up event listeners and do something like:

$('label.add-to-calendar-checkbox').click(function(){
    $('input.add-to-calendar-checkbox').click();
});

or

$('label.add-to-calendar-checkbox').click(function(){
    var checkBox = $('input.add-to-calendar-checkbox'), curValue = checkBox.prop("checked");
    checkBox.prop("checked", !curValue);
});

These aren't pretty solutions, but I believe it's the only way to overcome the scrolling issue due to the implementation of how the list of calendar list is dropped down, without having to make bigger changes to the source code.

[Et3rnal]

Change the checkbox style to display: none;

input.add-to-calendar-checkbox[type="checkbox"] { display: none; }

[bomer]

@Et3rnal CSS line was the easiest option for me! Cheers!