Answers

• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  Oh yea, I'm using bootstrap also.
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2020

  If you mean the lightbox container, this example here should help.

  Colin
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  That may be what I'm looking for colin. I'll try that out tomorrow when I get to work.
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  Unfortunately that didn't change the width of the editor form displayed. I tried both lightbox and envelope. I'm not sure if bootstrap4 uses either.
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  I am using a custom form also...

  div.DTED_Lightbox_Wrapper {
      left: 1em;
      right: 1em;
      margin-left: 0;
      width: auto;
  }
  div.DTE_Body div.DTE_Form_Content {
      display: flex;
      flex-flow: row nowrap;
      background-color: white;
  }
  div.DTE_Body div.DTE_Body_Content div.DTE_Field {
      width: 100%;
      padding: 5px 20px;
      box-sizing: border-box;
  }
  #myForm {
      display: flex;
      flex-flow: row nowrap;
      background-color: white;
  }
  #myForm2 {
      display: flex;
      flex-flow: row nowrap;
      background-color: white;
  }
  #myForm > div {
      width: 75%;
      margin: 5px;
      padding: 5px;
      font-size: 14px;
  }
  #myForm fieldset {
      flex: 1;
      border: 3px solid #4286f4;
      margin: 0.5em;
      width: 100%;
  }
  #myForm fieldset2 {
      flex: 1;
      border: 3px solid #4286f4;
      margin: 0.5em;
      width: 100%;
  }
  #myForm2 fieldset3 {
      flex: 1;
      border: 3px solid #4286f4;
      margin: 0.5em;
      width: 100%;
  }
  #myForm fieldset legend {
      padding: 5px 20px;
      border: 1px solid #aaa;
      font-weight: bold;
      font-size: 14px;
      width: 75%;
  }
  #myForm fieldset.cases_details {
      flex: 1 100%;
    flex-wrap: wrap;
    flex-direction: row;
      align-content: space-between;
  }
  #myForm fieldset2.department_details {
      flex: 1 100%;
      
  }
  #myForm2 fieldset3.other_details {
      flex: 2 100%;
      
  }
  #myForm fieldset.cases_details legend {
      background: #4286f4;
  }
  #myForm div.DTE_Field {
      padding: 2px;
  }
  

  This code produces a form like so...
  

  If I comment out the custom form for the editor instance I end up with this...
  

  The width of the form never changes. I think it has to do with bootstrap4 styling.
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  Looks like I needed to set display in editor for the lightbox css to take affect.

  $(document).ready(function() {
      var editor = new $.fn.dataTable.Editor( {
          ajax: 'cases-con.php',
          table: '#cases',
          template: '#myForm',
          display: 'lightbox',
          fields: [ {...
  
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2020 Answer ✓

  Just to check, is this fixed now?

  C
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  Sorry Colin. Yes. Setting display: lightbox and the css fixed my problem. Thank you for pointing me in the right direction.
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  So the form looks the way I'd like but it opens under the table instead of over it. Is there an easy fix?
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2020

  That's probably something to do with the z-index - this thread might help.

  If not, would you be able to link to your page, please.

  Colin
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  The z-index did not help. I believe there is some bootstrap4 css that is controlling the width of the modal. It would be difficult to give you access to the page as it is an internal application for a law enforcement agency.
  I am using flexbox, bootstrap4 and a custom style for the editor form.
• colin Posts: 15,240Questions: 1Answers: 2,599

  January 2020

  Understood. Could you see if you can modify this example here to demonstrate the issue with your custom form, please? That's also BS4

  Colin
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  I'll give it a shot Colin.
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  Ok Colin. Clicking on the New button will show you the width that I can't change however it displays on top of the table as I would like it.

  Commenting out "display: 'lightbox' in editor shows the form at a width I would like but it displays at the bottom of the table instead of over it like the above when using the bootstrap display.

  my_example
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  January 2020 Answer ✓

  Thanks for the link - the Bootstrap CSS contains:

  .modal-dialog {
      max-width: 500px;
      margin: 1.75rem auto;
  }
  

  which is what is constraining the width of your modal. You can override that with something like:

  .modal-dialog {
      max-width: 1200px;
  }
  

  http://live.datatables.net/bimudaha/3/edit

  Allan
• th3t1ck Posts: 228Questions: 37Answers: 1

  January 2020

  That did the trick Allan. Thank you.
• th3t1ck Posts: 228Questions: 37Answers: 1

  February 2020

  Colin thank you too for your help. I truly appreciate your help and Allan on this.