Field display styling options with Bootstrap 4

sdroulers

Using Boostrap 4 styling, I'm having some difficulties in applying Field display styling options.

{
 label: 'Office (<code>block</code>):',
 name: 'office',
'className': 'block'
},

for example, won't work. In the html, the block class will appear but with no effect. I tried to tweak the upper BS4 example by adding a 'block' class on one field just to try with no effect.

My setup is: datatables & editors from the generator with BS4 class.

Many thanks in advance.

Sébastien

sdroulers

Well, to my understanding this option is not implemented with Bootstrap 4.

In editor.bootstrap4.js, we have the following :

"field": {
    "wrapper": "DTE_Field form-group row",
           ...

Which will be hardcoded to the HTML page.

Am I wrong?

sdroulers

I ended up using some jQuery to fix this:

editor.on('open', function(e, mode, action) {
     $( ".DTE_Field.form-group.row" ).each(function(){
            $( this ).removeClass('row') })
})

allan

You are right - the block, etc, style names are specific to the Editor native stylesheet. However, the block can readily be added in Bootstrap 4:

div.DTE_Body div.DTE_Body_Content div.DTE_Field.block label, div.DTE_Body div.DTE_Body_Content div.DTE_Field.block > div {
    max-width: 100%;
    flex: 0 0 100%;
}

I'll include that in the next release.

Allan

sdroulers

That is excellent, thank you very much