Stop side panel from moving

[BoPeng]

It is possible to move side panel around, which has caused some trouble when I select text from the input area. It is probably good enough to fix the side panel to the side.

[aadithpm]

Since it's jQuery, wouldn't setting draggable and resizable to 'disable' remove the ability to resize and/or drag the panel around? This way, there could possibly be an addition in the future to add something like a checkbox that could allow the user to enable or disable those properties as required.

eg:

// let the code stay but disable panel draggability for now
$("#panel-wrapper").draggable('disable');
$("#panel-wrapper").resizable('disable');

[BoPeng]

The problem I had was that when I edit something in the input field of the side panel and would like to select some test with mouse (e.g. copy/paste), the panel could be dragged. So I think,

1. It would be good enough to be able to drag the panel only in a specific way (e.g. drag the border). I think the css already disables dragging from the inner panel, but the editing box still can be used to drag the panel. This could be fixed.

2. If 1) is difficult, it would be ok to disable draggability using your code. resizability is pretty useful and should be kept. A PR would be welcome.

3. I would hate an option to allow/disallow draggability because it uses a frontend UI on something that is rarely triggered.

[aadithpm]

The problem might be something to do with the interaction with CodeMirror. CodeMirror has a CodeMirror-focused class that is active when the text editor is focused. When you click the drop-down panel near an input field, that class is removed from the element and this lets the user drag the panel.

I will submit the PR shortly, but would it be possible to leave the issue open so point #1 of your response can be done in the near future?

[BoPeng]

I will prefer a PR that solves problem 1. In this way we can keep graggability but disallow unintended drag.

[aadithpm]

Ah, okay. My mistake, I saw your reply after I submitted the PR. I'll look at problem 1 then.

[BoPeng]

It is ok. Since you are on the css/js side of the side panel, perhaps you can have a look at the placement of the side panel as well (shown below). The problem is that when you open a sos notebook and zoom in, and at some point the side panel would be detached and leave an ugly gap at the top.

[aadithpm]

I haven't been able to replicate it, but I'll take a look at this and the draggability as well and get back to you if I find a suitable solution.

[BoPeng]

The screenshot was for the latest sos notebook on a mac machine with chrome. It might pertain only to chrome.

[aadithpm]

I couldn't replicate the issue on a Windows machine with Firefox. It's probably an issue with Chrome and WebKit that can be handled with JS. I'll look into it and update here if I find anything good.

[BoPeng]

A new console interface will be used, which should move around. #150