Editor Layout - Multi-column layout and default layout on same page

Ali Adnan

Dear folks,
I have two editor on same page, editor-a having three fields and editor-b having more than 10 fields I want to use default layout for editor-a and Multi-column layout for editor-b.

Currently if I use below css it will apply on both editor, can you help me please how can I achieve this ?

div.DTE_Body div.DTE_Body_Content div.DTE_Field {
    width: 50%;
    padding: 5px 20px;
    box-sizing: border-box;
}
 
div.DTE_Body div.DTE_Form_Content {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}

allan

Hi,

What to do here is to use the displayNode() method:

$( editorB.displayNode() ).addClass( 'twoColumnLayout' );

Then update your CSS to reflect that class for the extra column layout rules.

Allan

Ali Adnan

Thanks