Input fields at wrong location when not in fullscreen mode

[bartbutenaers]

Dear,

My blockly workspace is displayed under blocklyDiv:

<div id="blocklyArea" style="width: 100%; height: 100%;">
   <div id="blocklyDiv" style="width: 100%; height: 450px; min-height:350px;"></div>
</div>

In this issue I got the following advice, to be able to enter data in the input fields (when being in fullscreen mode):

So I did it like this:

var blocklyDiv = document.getElementById('blocklyDiv');
Blockly.setParentContainer(blocklyArea);
    
node.workspace = Blockly.inject('blocklyDiv', {
   ...
});

I assume this is correctly, since my fullscreen mode works fine...

However the user can - via a simple button - toggle between fullscreen and normal mode.
And in normal mode the user input will be completely shifted to another location (as a result of calling setParentContainer!):

This is information about the shifted input element:

To Reproduce

Same way of working as in the other issue.

Expected behavior

The input elements should be displayed in both modes above the input fields.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome, Edge Chromium, Firefox
• Version [e.g. 22]

Hopefully you have an idea about what I am doing wrong ...

Thanks in advance!
Bart

[samelhusseini]

It sounds like somehow the blocklyArea is positioned relatively.
The blocklyWidgetDiv and blocklyDropdownDiv are positoned absolutely, there's an assumption that they are positioned absolutely against the body element.

You may change that if you want, but you'll need to adjust their positioning as well. You can try changing their positioning to fixed instead:

.blocklyWidgetDiv, .blocklyDropDownDiv, .blocklyTooltipDiv {
   position: fixed;
}

[4n70w4]

If I use Blockly in pop-up div and call Blockly.setParentContainerafter remove pop-up div and re-open popup div - Blockly componets become don't editable like #4476 issue. In window and full screen modes. I tryed call workspace.dispose(); but it did not solve the problem.

If I use Blockly in pop-up div without call Blockly.setParentContainer componets become don't editable in full screen mode. But works in window mode.

If I use Blockly without pop-up div and call Blockly.setParentContainer - the same problem like topic starter.