Flexbox Howto

Flexbox Howto

th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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?

This question has accepted answers - jump to:

Answers

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Oh yea, I'm using bootstrap also.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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: [ {...
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Just to check, is this fixed now?

    C

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    So the form looks the way I'd like but it opens under the table instead of over it. Is there an easy fix?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    I'll give it a shot Colin.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    That did the trick Allan. Thank you.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

This discussion has been closed.