Answers

• rf1234 Posts: 2,991Questions: 87Answers: 421

  August 2017

  I had something very similar a while ago. I had to edit the datatables.css file to get it working. Eventually Allan fixed it in the next release.

  https://datatables.net/forums/discussion/39293/problem-with-selectize-rendering#latest

  "It appears that the editor is anchoring to the main page instead of the modal that it's included in. Is there a way to override the z-index of the editor or set it to anchor to the modal window so that the popups show above?"

  Maybe Allan can help you out with a better solution next week. For the time being I could only suggest to override the Editor CSS with your own.

  These look like the relevant CSS entries for overriding:

  div.DTE_Bubble {
    position: absolute;
    z-index: 11;
    margin-top: -6px;
    opacity: 0;
  }
  
  div.DTE_Bubble div.DTE_Bubble_Liner div.DTE_Bubble_Close {
    position: absolute;
    top: -11px;
    right: -11px;
    width: 22px;
    height: 22px;
    border: 2px solid white;
    background-color: black;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
    z-index: 12;
    box-shadow: 2px 2px 6px #111;
  }
  
  div.DTE_Bubble_Background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Fallback */
    background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* IE10 Consumer Preview */
    background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* Firefox */
    background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* Opera */
    background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* Webkit (Chrome 11+) */
    background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* W3C Markup, IE10 Release Preview */
    z-index: 10;
  }
  
  div.DTE_Bubble_Background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  div.editor-datetime {
    position: absolute;
    background-color: white;
    z-index: 2050;
    border: 1px solid #ccc;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
    padding-bottom: 5px;
  }
  
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2017

  It is almost certainly a z-index issue. This example for Bootstrap 3 appears to work no problem. Have you altered your z-indexes for the Bootstrap modal perhaps?

  Can you give me a link to a test page?

  Thanks,
  Allan