Editor template and Boostrap styling

Editor template and Boostrap styling

vince-carrascovince-carrasco Posts: 21Questions: 7Answers: 0

I am attempting to use templates with editor. The issue I am having, for example is modifying the width of the bubble form when I include bootstrap library. If I do not include bootstrap, I can do any customizations.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,377Questions: 1Answers: 10,234 Site admin
    div.DTE_Bubble div.DTE_Bubble_Liner {
      width: 500px;
      margin-left: -250px;
    }
    

    should work. If it doesn't, can you link to a page showing the issue so I can take a look into it please?

    Thanks,
    Allan

  • vince-carrascovince-carrasco Posts: 21Questions: 7Answers: 0

    i am able to raise the editor bubble with a custom template. The issue is css div.DTE_Bubble in any permutation has no affect when I use Concatenated libraries
    * Included libraries:
    * Bootstrap 5 5.3.0, jQuery 3 3.7.0, JSZip 3.10.1, pdfmake 0.2.7, DataTables 1.13.6, Editor 2.2.2, Buttons 2.4.1, HTML5 export 2.4.1, Print view 2.4.1, DateTime 1.5.1, Responsive 2.5.0, RowGroup 1.4.0, Select 1.7.0
    */
    On the other hand we found that if we use individual libraries, we are able to access DTE_ css.
    like

    <style>
        div.DTE_Body div.DTE_Body_Content div.DTE_Field {
                float: left;
                width: 50%;
                padding: 5px 20px;
                clear: none;
                box-sizing: border-box;
        }
         
        div.DTE_Body div.DTE_Form_Content:after {
                content: ' ';
                display: block;
                clear: both;
        }
    </style>
    
    <link href="Bootstrap-5-5.3.0/css/bootstrap.css" rel="stylesheet">
    <link href="DataTables-1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="Editor-2.2.2/css/editor.dataTables.min.css" rel="stylesheet">
    <link href="Buttons-2.4.2/css/buttons.dataTables.min.css" rel="stylesheet">
    <link href="DateTime-1.5.1/css/dataTables.dateTime.min.css" rel="stylesheet">
    <link href="Responsive-2.5.0/css/responsive.dataTables.min.css" rel="stylesheet">
    <link href="RowGroup-1.4.0/css/rowGroup.dataTables.min.css" rel="stylesheet">
    <link href="Scroller-2.2.0/css/scroller.dataTables.min.css" rel="stylesheet">
    <link href="Select-1.7.0/css/select.dataTables.min.css" rel="stylesheet">
        <link href="/css/tmds.css" rel="stylesheet">
        <link href="/css/breakpoint.css" rel="stylesheet">
    <script src="jQuery-3.7.0/jquery-3.7.0.min.js"></script>
    <script src="JSZip-3.10.1/jszip.min.js"></script>
    <script src="pdfmake-0.2.7/pdfmake.min.js"></script>
    <script src="pdfmake-0.2.7/vfs_fonts.js"></script>
    <script src="DataTables-1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="Editor-2.2.2/js/dataTables.editor.min.js"></script>
    <script src="Buttons-2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="Buttons-2.4.2/js/buttons.html5.min.js"></script>
    <script src="Buttons-2.4.2/js/buttons.print.min.js"></script>
    <script src="DateTime-1.5.1/js/dataTables.dateTime.min.js"></script>
    <script src="Responsive-2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="RowGroup-1.4.0/js/dataTables.rowGroup.min.js"></script>
    <script src="Scroller-2.2.0/js/dataTables.scroller.min.js"></script>
    <script src="Select-1.7.0/js/dataTables.select.min.js"></script>
    <script src="Bootstrap-5-5.3.0/js/bootstrap.bundle.js"></script>
    

    While individual libraries gets us closer, the downside is that some of the bootstrap css is now misbehaving. i.e., quick example is buttons render as classic html buttons, not as bootstrap buttons, etc.

  • allanallan Posts: 62,377Questions: 1Answers: 10,234 Site admin

    I'd really need a link to the page to be able to see what is actually going on and see if there is some conflict somewhere. Could you PM me a link?

    Allan

  • vince-carrascovince-carrasco Posts: 21Questions: 7Answers: 0

    Alen, thanks for taking a look. Dev is on private network with no public access.
    This is with concatenated library

    This is individual libraries

    This contrasting behavior is consistent across all pages in the site.

  • allanallan Posts: 62,377Questions: 1Answers: 10,234 Site admin
    Answer ✓

    Ah - sorry, I thought you were talking about bubbling editing, not the modal. The images have cleared things up a lot.

    The second image is using Editor's built in modal, rather than the Bootstrap modal.

    With the Bootstrap 5 / Editor styling files (i.e. your first image) what to do is:

    DataTable.Editor.display.bootstrap.classes.modal += ' modal-xl';
    

    That appends the xl size class (see Bootstrap docs for the list of options available) and should make the modal much wider for you.

    Allan

  • vince-carrascovince-carrasco Posts: 21Questions: 7Answers: 0
    edited September 2023

    Thank you Allan. This gets me back on track.

Sign In or Register to comment.