Editor template and Boostrap styling

vince-carrasco

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.

allan

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-carrasco

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.

allan

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-carrasco

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.

allan

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-carrasco

Thank you Allan. This gets me back on track.