Flexbox Howto

th3t1ck

How do I set the width of the flexbox form that editor displays? Is there a css config I can use to override the width?

th3t1ck

Oh yea, I'm using bootstrap also.

colin

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

Colin

th3t1ck

That may be what I'm looking for colin. I'll try that out tomorrow when I get to work.

th3t1ck

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

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

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

Just to check, is this fixed now?

C

th3t1ck

Sorry Colin. Yes. Setting display: lightbox and the css fixed my problem. Thank you for pointing me in the right direction.

th3t1ck

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

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

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

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

I'll give it a shot Colin.

th3t1ck

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

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

That did the trick Allan. Thank you.

th3t1ck

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