Cannot type in Blockly workspace in Bootstrap modal

[francis_...@smartpixel.tv]

I'm having a problem with a Blockly workspace inside a Bootstrap modal.

Everything seems to work fine, but I cannot type in the inputs that I drag into the workspace.

If you look at the attached image, I'm trying to type into the highlighted block, but that doesn't work.

I had a problem previously where the workspace would not show if rendered inside a collapsed div. I fixed this by adding an event which fires when Step Formulas is clicked and execute the following code:

window.dispatchEvent(new Event('resize'));

I validated that if I place the div in which the workspace is injected into the main layout's HTML, it works fine. I can type.

Any ideas?

Thanks.

[Rachel Fenichel]

We've had a lot of problems reported with Bootstrap integration.  It's often a problem with the z-index of various Blockly objects.  

The text editor that pops up over the field when you click is in the blocklyWidgetDiv.  Can you find that in your layout and see if it's there but just out of order somehow?

Here's the expected css: 

  .blocklyWidgetDiv {

    display: none;

    position: absolute;

    z-index: 99999; /* big value for bootstrap3 compatibility */

  }

Rachel

[francis_...@smartpixel.tv]

I see that both divs (blocklyWidgetDiv and blocklyTooltipDiv) are rendered at the root of the document (in body actually) and that seems to be causing an issue with the fact that my div that I use in Blockly.inject() is not at the same level (body).

I've tried the CSS below, that's not doing the trick unfortunately.

I could move around the blocklyWidgetDiv and blocklyTooltipDiv divs with jQuery if that could help.

[francis_...@smartpixel.tv]

Well, for now this seems to have solved the issue:

//Move those two Blockly generated divs inside the div used for the modal (at the root of it actually).

$('.blocklyWidgetDiv').prependTo('.modal-template');

$('.blocklyTooltipDiv').prependTo('.modal-template');

[Rachel Fenichel]

Cool, I'm glad you have a fix.  If you find a general solution feel free to make a pull request.

Rachel