lab_gzf 部署微服务应用

app_BusinessCentral/src/components/app-column-link/app-column-link.vue

@@ -54,6 +54,14 @@ export default class AppColumnLink extends Vue {
      */
     @Prop({default:{}}) public viewparams?:any;
 
+    /**
+     * 局部导航参数
+     * 
+     * @type {any}
+     * @memberof AppColumnLink
+     */
+    @Prop() public localParam!:any;
+
     /**
      * 应用实体主键属性名称
      *
@@ -281,6 +289,11 @@ export default class AppColumnLink extends Vue {
         // 合并表单参数
         arg.param = this.viewparams ? JSON.parse(JSON.stringify(this.viewparams)) : {};
         arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {};
+        // 附加参数处理
+        if (this.localParam && Object.keys(this.localParam).length >0) {
+            let _param = this.$util.computedNavData(this.data,arg.param,arg.param,JSON.parse(JSON.stringify(this.localParam)));
+            Object.assign(arg.param,_param);
+        }
         return true;
     }
 

app_BusinessCentral/src/components/app-rich-text-editor/app-rich-text-editor.vue

 <template>
-  <textarea :id="id"></textarea>
+    <div :class="editorClass">
+        <textarea :id="id"></textarea>
+    </div>
 </template>
 <script lang = 'ts'>
 import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
@@ -19,6 +21,7 @@ import 'tinymce/plugins/codesample';
 import 'tinymce/plugins/code';
 import 'tinymce/plugins/fullscreen';
 import 'tinymce/plugins/preview';
+import 'tinymce/plugins/fullscreen';
 import 'tinymce/icons/default/icons.min.js';
 
 const tinymceCode:any = tinymce;
@@ -191,6 +194,20 @@ export default class AppRichTextEditor extends Vue {
      */
     public isNeedInit:boolean = false;
 
+    /**
+     * 上传的图片id与类型集合
+     * @type {string}
+     * @memberof AppRichTextEditor
+     */
+    public imgsrc: Array<any> = [];
+
+    /**
+     * 编辑器样式类
+     * @type {string}
+     * @memberof AppRichTextEditor
+     */
+    public editorClass: string = 'app-rich-text-editor';
+
     /**
      * 生命周期
      *
@@ -238,8 +255,31 @@ export default class AppRichTextEditor extends Vue {
      */
     public mounted() {
         this.init();
+        const ele: any = this.isDrawer(this.$el);
+        let index: number = ele.style.transform.indexOf('translateX');
+        if(index >= 0) {
+            let num: string = ele.style.transform.substring(index + 12, index + 15);
+            this.editorClass = this.editorClass + (-parseInt(num));
+        }
     }
     
+    /**
+     * 是否抽屉打开
+     * 
+     * @memberof AppRichTextEditor
+     */
+    public isDrawer(ele: any): any {
+        let pele: any = ele.parentNode;
+        if(!pele) {
+            return false;
+        }
+        if(pele.className.indexOf('studio-drawer-content') >= 0) {
+            return pele;
+        }
+        return this.isDrawer(pele);
+        
+    }
+ 
     /**
      * 生命周期：销毁富文本
      * 
@@ -259,6 +299,10 @@ export default class AppRichTextEditor extends Vue {
     @Watch('value', { immediate: true, deep: true })
     oncurrentContent(newval: any, val: any) {
         const content: any = this.editor ? this.editor.getContent() : undefined;
+        const url = this.downloadUrl.substring(3);
+        if(newval) {
+            newval = newval.replace(/\{(\d+)\.(bmp|jpg|jpeg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp)\}/g, `${url}/$1`);
+        }
         if (!Object.is(newval,content)) {
             this.init();
         }
@@ -292,8 +336,8 @@ export default class AppRichTextEditor extends Vue {
             height: richtexteditor.height,
             min_height: 400,
             branding: false,
-            plugins: ['link', 'paste', 'table', 'image', 'codesample', 'code', 'fullscreen', 'preview', 'quickbars'],
-            toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image',
+            plugins: ['link', 'paste', 'table', 'image', 'codesample', 'code', 'fullscreen', 'preview', 'quickbars', 'fullscreen'],
+            toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image | preview code fullscreen',
             quickbars_insert_toolbar: false,
             quickbars_selection_toolbar: 'forecolor fontsizeselect fontselect',
             codesample_languages: [
@@ -316,7 +360,16 @@ export default class AppRichTextEditor extends Vue {
             setup: (editor: any) => {
                 richtexteditor.editor = editor;
                 editor.on('blur', () => {
-                    const content = editor.getContent();
+                    let content = editor.getContent();
+                    const url = richtexteditor.downloadUrl.substring(3);
+                    let newContent: string = "";
+                    const imgsrc = richtexteditor.imgsrc;
+                    if(imgsrc && imgsrc.length > 0){
+                        imgsrc.forEach((item: any)=>{
+                            newContent = content.replace(url+"/"+item.id,"{"+item.id+item.type+"}");
+                            content = newContent;
+                        });
+                    }
                     richtexteditor.$emit('change', content);
                 });
             },
@@ -335,6 +388,8 @@ export default class AppRichTextEditor extends Vue {
                 }
                 this.uploadUrl = _url;
                 richtexteditor.uploadFile(_url, formData).subscribe((file: any) => {
+                    const item: any = { id: file.fileid, type: file.ext };
+                    richtexteditor.imgsrc.push(item);
                     let downloadUrl =   richtexteditor.downloadUrl;
                     if (file.filename) {
                         const id: string = file.fileid;
@@ -438,4 +493,22 @@ export default class AppRichTextEditor extends Vue {
 .tox-statusbar__text-container{
     display: none !important;
 }
+.app-rich-text-editor-100 {
+    .tox-fullscreen {
+        height: 100% !important;
+        transform: translateX(100%);
+    }
+    .tox-blocker {
+        transform: translateX(100%);
+    }
+}
+.app-rich-text-editor-200 {
+    .tox-fullscreen {
+        height: 100% !important;
+        transform: translateX(200%);
+    }
+    .tox-blocker {
+        transform: translateX(200%);
+    }
+}
 </style>
\ No newline at end of file

app_BusinessCentral/src/studio-core/components/exp-control-layout/exp-control-layout.less

 .exp-control-layout.animation {
 
-    .ivu-split-pane, .ivu-split-trigger-con {
+    .ivu-split-pane,
+    .ivu-split-trigger-con {
         transition: all .5s ease-in-out;
     }
 }
@@ -10,11 +11,50 @@
     height: 100%;
     display: flex;
 
-    .exp, .view {
+    .exp-control-layout-exp,
+    .exp-control-layout-view {
         height: 100%;
         width: 100%;
     }
 
+    .exp-control-layout-exp {
+        display: flex;
+        flex-direction: column;
+
+        .exp-header {
+            height: 40px;
+            padding: 3px 8px;
+        }
+
+        .exp-content {
+            height: calc(100% - 40px);
+        }
+
+        .exp-header-title,
+        .exp-quick-search {
+            float: left;
+            padding-right: 8px;
+            height: 100%;
+        }
+
+        .exp-header-title {
+            font-size: 20px;
+            font-weight: 700;
+        }
+
+        .exp-quick-search {
+            
+            .ivu-input-wrapper {
+                vertical-align: -5px;
+            }
+        }
+
+        .exp-toolbar {
+            float: right;
+            height: 100%;
+        }
+    }
+
     .grid-exp-bar-content {
         height: 100%;
     }

app_BusinessCentral/src/studio-core/components/exp-control-layout/exp-control-layout.tsx

@@ -20,6 +20,14 @@ export class ExpControlLayout extends Vue {
      */
     protected showAnimation: boolean = false;
 
+    /**
+     * 默认分割比例
+     *
+     * @type {number}
+     * @memberof ExpControlLayout
+     */
+    public defaultSplit: number = 0.6;
+
     /**
      * 默认分割比例
      *
@@ -34,7 +42,7 @@ export class ExpControlLayout extends Vue {
      * @type {number}
      * @memberof ExpControlLayout
      */
-    public oldSplit: number = 0.7;
+    public oldSplit: number = this.defaultSplit;
 
     /**
      * 视图是否显示
@@ -123,16 +131,15 @@ export class ExpControlLayout extends Vue {
      */
     public mounted(): void {
         const el: any = this.$el;
-        let split = 1;
         if (this.ctrlWidth > 0 && this.mode === 'horizontal') {
-            split = parseFloat(((el.offsetWidth - this.ctrlWidth) / el.offsetWidth).toFixed(2));
+            this.defaultSplit = 1 - parseFloat(((el.offsetWidth - this.ctrlWidth) / el.offsetWidth).toFixed(2));
         } else if (this.ctrlHeight > 0 && this.mode === 'vertical') {
-            split = parseFloat(((el.offsetHeight - this.ctrlHeight) / el.offsetHeight).toFixed(2));
+            this.defaultSplit = 1 - parseFloat(((el.offsetHeight - this.ctrlHeight) / el.offsetHeight).toFixed(2));
         }
         if (this.showView) {
-            this.split = split;
+            this.split = this.defaultSplit;
         } else {
-            this.oldSplit = split;
+            this.oldSplit = this.defaultSplit;
         }
     }
 
@@ -144,14 +151,31 @@ export class ExpControlLayout extends Vue {
      * @memberof ExpControlLayout
      */
     protected renderSplit(): any {
-        return <split class={{ 'exp-control-layout': true, 'animation': this.showAnimation }} v-model={this.split} mode={this.mode}>
+        let showHeader = false;
+        if (this.$slots.title || this.$slots.toolbar || this.$slots.quickSearch) {
+            showHeader = true;
+        }
+        return <split class={{ 'exp-control-layout': true, 'animation': this.showAnimation }} v-model={this.split} mode={this.mode} min={(this.ctrlHeight > 0 || this.ctrlWidth > 0) ? this.defaultSplit : null}>
             <template slot={this.mode === 'horizontal' ? 'left' : 'top'}>
-                <div class="exp">
-                    {this.$slots.exp}
+                <div class="exp-control-layout-exp">
+                    {showHeader ? <div class="exp-header">
+                        {this.$slots.title ? <div class="exp-header-title">
+                            {this.$slots.title}
+                        </div> : null}
+                        {this.$slots.toolbar ? <div class="exp-toolbar">
+                            {this.$slots.toolbar}
+                        </div> : null}
+                        {this.$slots.quickSearch ? <div class="exp-quick-search">
+                            {this.$slots.quickSearch}
+                        </div> : null}
+                    </div> : null}
+                    <div class={{ 'exp-content': true, 'hidden-header': !showHeader }}>
+                        {this.$slots.expContent}
+                    </div>
                 </div>
             </template>
             <template slot={this.mode === 'horizontal' ? 'right' : 'bottom'}>
-                <div class="view">
+                <div class="exp-control-layout-view">
                     {this.$slots.default}
                 </div>
             </template>

app_BusinessCentral/src/studio-core/utils/studio-drawer/studio-drawer.tsx

@@ -270,35 +270,39 @@ export class StudioDrawer extends Vue {
      */
     protected renderViews(h: CreateElement): any {
         return this.showViewList.map((view: any, i: number) => {
-            const props: any = { openMode: 'MODAL', viewUsage: 2, viewDefaultUsage: false, viewdata: JSON.stringify(view.viewdata), viewparams: view.viewparams };
-            const style: any = { 'z-index': i + 1 };
-            return <div class={{ 'studio-drawer-item': true, 'active': this.activeIndex === i }}>
-                {h(view.viewname, {
-                    key: view.viewname + i,
-                    ref: view.viewname + i,
-                    style,
-                    props,
-                    on: {
-                        viewdataschange: (data: any) => {
-                            this.closeModalData = data;
-                        },
-                        close: () => {
-                            if ((this.viewList.length - 1) < i) {
-                                return;
-                            }
-                            if (this.viewList.length === 1) {
-                                this.isShow = false;
-                                setTimeout(() => this.closeView(view), 500);
-                            } else {
-                                this.closeView(view);
+            try {
+                const props: any = { openMode: 'MODAL', viewUsage: 2, viewDefaultUsage: false, viewdata: JSON.stringify(view.viewdata), viewparam: JSON.stringify(view.viewparams) };
+                const style: any = { 'z-index': i + 1 };
+                return <div class={{ 'studio-drawer-item': true, 'active': this.activeIndex === i }}>
+                    {h(view.viewname, {
+                        key: view.viewname + i,
+                        ref: view.viewname + i,
+                        style,
+                        props,
+                        on: {
+                            viewdataschange: (data: any) => {
+                                this.closeModalData = data;
+                            },
+                            close: () => {
+                                if ((this.viewList.length - 1) < i) {
+                                    return;
+                                }
+                                if (this.viewList.length === 1) {
+                                    this.isShow = false;
+                                    setTimeout(() => this.closeView(view), 500);
+                                } else {
+                                    this.closeView(view);
+                                }
+                            },
+                            viewModelChange: () => {
+                                this.$forceUpdate();
                             }
-                        },
-                        viewModelChange: () => {
-                            this.$forceUpdate();
                         }
-                    }
-                })}
-            </div>;
+                    })}
+                </div>;
+            } catch (err) {
+                console.warn('上飘窗打开视图参数转换异常', err);
+            }
         });
     }
 

app_BusinessCentral/src/styles/default.less

@@ -281,7 +281,16 @@ div::-webkit-scrollbar-thumb {
                     >.el-table__row:hover {
 
                         >td {
-                            background-color: var(--view-background-color-tint);
+                            // color: var(--view-font-color-active);
+                            background-color: rgba(var(--view-background-color-active-rgb), 0.5);
+                        }
+                    }
+
+                    >.el-table__row.current-row {
+
+                        >td {
+                            color: var(--view-font-color-active);
+                            background-color: var(--view-background-color-active);
                         }
                     }
                 }

app_BusinessCentral/src/widgets/account/default-searchform/default-searchform.html

@@ -6,13 +6,13 @@
   </div>
   <div class="form-content">
                   
-          <i-col v-show="detailsModel.n_accountname_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_accountname_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_accountname_like' :itemRules="this.rules.n_accountname_like" class='' :caption="$t('entities.account.default_searchform.details.n_accountname_like')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_accountname_like.error" :isEmptyCaption="false" labelPos="TOP">
               <input-box v-model="data.n_accountname_like"  @enter="onEnter($event)"    :disabled="detailsModel.n_accountname_like.disabled" type='text'  style=""></input-box>
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_statecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_statecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_statecode_eq' :itemRules="this.rules.n_statecode_eq" class='' :caption="$t('entities.account.default_searchform.details.n_statecode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_statecode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 
@@ -32,7 +32,7 @@
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_accountcategorycode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_accountcategorycode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_accountcategorycode_eq' :itemRules="this.rules.n_accountcategorycode_eq" class='' :caption="$t('entities.account.default_searchform.details.n_accountcategorycode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_accountcategorycode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 
@@ -52,7 +52,7 @@
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_accountclassificationcode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_accountclassificationcode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_accountclassificationcode_eq' :itemRules="this.rules.n_accountclassificationcode_eq" class='' :caption="$t('entities.account.default_searchform.details.n_accountclassificationcode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_accountclassificationcode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 
@@ -72,7 +72,7 @@
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_accountratingcode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_accountratingcode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_accountratingcode_eq' :itemRules="this.rules.n_accountratingcode_eq" class='' :caption="$t('entities.account.default_searchform.details.n_accountratingcode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_accountratingcode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 

app_BusinessCentral/src/widgets/account/edit-account-info-form/edit-account-info-form.html

@@ -2,35 +2,35 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.account.edit_accountinfo_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.accountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.accountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='accountname' :itemRules="this.rules.accountname" class='' :caption="$t('entities.account.edit_accountinfo_form.details.accountname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.accountname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.accountname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.accountname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='telephone1' :itemRules="this.rules.telephone1" class='' :caption="$t('entities.account.edit_accountinfo_form.details.telephone1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.telephone1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.telephone1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.telephone1.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.fax.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.fax.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='fax' :itemRules="this.rules.fax" class='' :caption="$t('entities.account.edit_accountinfo_form.details.fax')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.fax.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.fax"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.fax.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='websiteurl' :itemRules="this.rules.websiteurl" class='' :caption="$t('entities.account.edit_accountinfo_form.details.websiteurl')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.websiteurl.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.websiteurl"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.websiteurl.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.parentaccountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.parentaccountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='parentaccountname' :itemRules="this.rules.parentaccountname" class='' :caption="$t('entities.account.edit_accountinfo_form.details.parentaccountname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.parentaccountname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -56,13 +56,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.tickersymbol.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.tickersymbol.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='tickersymbol' :itemRules="this.rules.tickersymbol" class='' :caption="$t('entities.account.edit_accountinfo_form.details.tickersymbol')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.tickersymbol.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.tickersymbol"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.tickersymbol.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.customertypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.customertypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='customertypecode' :itemRules="this.rules.customertypecode" class='' :caption="$t('entities.account.edit_accountinfo_form.details.customertypecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.customertypecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -82,7 +82,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.defaultpricelevelname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.defaultpricelevelname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='defaultpricelevelname' :itemRules="this.rules.defaultpricelevelname" class='' :caption="$t('entities.account.edit_accountinfo_form.details.defaultpricelevelname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.defaultpricelevelname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 

app_BusinessCentral/src/widgets/account/edit-address-form/edit-address-form.html

@@ -2,23 +2,23 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.account.edit_address_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.address1_addressid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.address1_addressid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='address1_addressid' :itemRules="this.rules.address1_addressid" class='' :caption="$t('entities.account.edit_address_form.details.address1_addressid')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_addressid.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_addressid"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_addressid.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_name.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_name.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='address1_name' :itemRules="this.rules.address1_name" class='' :caption="$t('entities.account.edit_address_form.details.address1_name')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_name.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_name"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_name.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_addresstypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_addresstypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='address1_addresstypecode' :itemRules="this.rules.address1_addresstypecode" class='' :caption="$t('entities.account.edit_address_form.details.address1_addresstypecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_addresstypecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -38,25 +38,25 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_country.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_country.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='address1_country' :itemRules="this.rules.address1_country" class='' :caption="$t('entities.account.edit_address_form.details.address1_country')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_country.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_country"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_country.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='address1_stateorprovince' :itemRules="this.rules.address1_stateorprovince" class='' :caption="$t('entities.account.edit_address_form.details.address1_stateorprovince')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_stateorprovince.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_stateorprovince"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_stateorprovince.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_city.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_city.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='address1_city' :itemRules="this.rules.address1_city" class='' :caption="$t('entities.account.edit_address_form.details.address1_city')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_city.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_city"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_city.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_county.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_county.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='address1_county' :itemRules="this.rules.address1_county" class='' :caption="$t('entities.account.edit_address_form.details.address1_county')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_county.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_county"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_county.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/account/edit-data-panel-form/edit-data-panel-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.account.edit_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.industrycode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.industrycode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='industrycode' :itemRules="this.rules.industrycode" class='' :caption="$t('entities.account.edit_datapanel_form.details.industrycode')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.industrycode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -26,25 +26,25 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='telephone1' :itemRules="this.rules.telephone1" class='' :caption="$t('entities.account.edit_datapanel_form.details.telephone1')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.telephone1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.telephone1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.telephone1.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.revenue.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.revenue.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='revenue' :itemRules="this.rules.revenue" class='' :caption="$t('entities.account.edit_datapanel_form.details.revenue')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.revenue.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.revenue"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.revenue.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.numberofemployees.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.numberofemployees.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='numberofemployees' :itemRules="this.rules.numberofemployees" class='' :caption="$t('entities.account.edit_datapanel_form.details.numberofemployees')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.numberofemployees.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.numberofemployees"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.numberofemployees.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.statuscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.statuscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='statuscode' :itemRules="this.rules.statuscode" class='' :caption="$t('entities.account.edit_datapanel_form.details.statuscode')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.statuscode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -64,7 +64,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.account.edit_datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/account/edit-introduction-form/edit-introduction-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.account.edit_introduction_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.industrycode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.industrycode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='industrycode' :itemRules="this.rules.industrycode" class='' :caption="$t('entities.account.edit_introduction_form.details.industrycode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.industrycode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -26,13 +26,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.sic.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.sic.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='sic' :itemRules="this.rules.sic" class='' :caption="$t('entities.account.edit_introduction_form.details.sic')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.sic.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.sic"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.sic.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownershipcode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownershipcode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='ownershipcode' :itemRules="this.rules.ownershipcode" class='' :caption="$t('entities.account.edit_introduction_form.details.ownershipcode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownershipcode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -52,7 +52,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.account.edit_introduction_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/account/info-data-panel-form/info-data-panel-form.html

@@ -2,57 +2,57 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.account.info_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.industrycode.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.industrycode.visible" :style="{}">
 <app-form-item name='industrycode' :itemRules="this.rules.industrycode" class='datapanel-style' :caption="$t('entities.account.info_datapanel_form.details.industrycode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.industrycode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='industrycode' :value="data.industrycode" tag='IndustryCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.telephone1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.telephone1.visible" :style="{}">
 <app-form-item name='telephone1' :itemRules="this.rules.telephone1" class='datapanel-style' :caption="$t('entities.account.info_datapanel_form.details.telephone1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.telephone1.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='telephone1' :value="data.telephone1" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.revenue.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.revenue.visible" :style="{}">
 <app-form-item name='revenue' :itemRules="this.rules.revenue" class='datapanel-style' :caption="$t('entities.account.info_datapanel_form.details.revenue')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.revenue.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='revenue' :value="data.revenue" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.numberofemployees.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.numberofemployees.visible" :style="{}">
 <app-form-item name='numberofemployees' :itemRules="this.rules.numberofemployees" class='datapanel-style' :caption="$t('entities.account.info_datapanel_form.details.numberofemployees')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.numberofemployees.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='numberofemployees' :value="data.numberofemployees" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.statuscode.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.statuscode.visible" :style="{}">
 <app-form-item name='statuscode' :itemRules="this.rules.statuscode" class='datapanel-style' :caption="$t('entities.account.info_datapanel_form.details.statuscode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statuscode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='statuscode' :value="data.statuscode" tag='Account__StatusCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.ownername.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}">
 <app-form-item name='ownername' :itemRules="this.rules.ownername" class='datapanel-style' :caption="$t('entities.account.info_datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.account.info_datapanel_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;align-items: center;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)" class="form-btn-noborder-transparent"
          style="">
         <i class="fa fa-angle-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/account/quick-create-form/quick-create-form.html

@@ -2,35 +2,35 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.account.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.accountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.accountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='accountname' :itemRules="this.rules.accountname" class='' :caption="$t('entities.account.quickcreate_form.details.accountname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.accountname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.accountname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.accountname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='telephone1' :itemRules="this.rules.telephone1" class='' :caption="$t('entities.account.quickcreate_form.details.telephone1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.telephone1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.telephone1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.telephone1.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.fax.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.fax.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='fax' :itemRules="this.rules.fax" class='' :caption="$t('entities.account.quickcreate_form.details.fax')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.fax.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.fax"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.fax.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='websiteurl' :itemRules="this.rules.websiteurl" class='' :caption="$t('entities.account.quickcreate_form.details.websiteurl')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.websiteurl.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.websiteurl"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.websiteurl.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.parentaccountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.parentaccountname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='parentaccountname' :itemRules="this.rules.parentaccountname" class='' :caption="$t('entities.account.quickcreate_form.details.parentaccountname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.parentaccountname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -56,13 +56,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.tickersymbol.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.tickersymbol.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='tickersymbol' :itemRules="this.rules.tickersymbol" class='' :caption="$t('entities.account.quickcreate_form.details.tickersymbol')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.tickersymbol.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.tickersymbol"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.tickersymbol.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.customertypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.customertypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='customertypecode' :itemRules="this.rules.customertypecode" class='' :caption="$t('entities.account.quickcreate_form.details.customertypecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.customertypecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -82,7 +82,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.defaultpricelevelname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.defaultpricelevelname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='defaultpricelevelname' :itemRules="this.rules.defaultpricelevelname" class='' :caption="$t('entities.account.quickcreate_form.details.defaultpricelevelname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.defaultpricelevelname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 

app_BusinessCentral/src/widgets/activity-pointer/by-parent-key-list/by-parent-key-list.html

@@ -5,7 +5,7 @@
                   :viewState="viewState"  
                   :viewparams="viewparams" 
                   :context="context" 
-                  :parentRef="thisRef"
+                  :parentRef="_self"
                   :inputData="item"
                   @panelDataChange="($event)=>{onPanelDataChange(item,$event)}"
                   name="dashboard_sysportlet2_list_itempanel"  

app_BusinessCentral/src/widgets/activity-pointer/default-searchform/default-searchform.html

@@ -6,13 +6,13 @@
   </div>
   <div class="form-content">
                   
-          <i-col v-show="detailsModel.n_subject_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_subject_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_subject_like' :itemRules="this.rules.n_subject_like" class='' :caption="$t('entities.activitypointer.default_searchform.details.n_subject_like')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_subject_like.error" :isEmptyCaption="false" labelPos="TOP">
               <input-box v-model="data.n_subject_like"  @enter="onEnter($event)"    :disabled="detailsModel.n_subject_like.disabled" type='text'  style=""></input-box>
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_activitytypecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_activitytypecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_activitytypecode_eq' :itemRules="this.rules.n_activitytypecode_eq" class='' :caption="$t('entities.activitypointer.default_searchform.details.n_activitytypecode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_activitytypecode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 
@@ -32,7 +32,7 @@
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_prioritycode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_prioritycode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_prioritycode_eq' :itemRules="this.rules.n_prioritycode_eq" class='' :caption="$t('entities.activitypointer.default_searchform.details.n_prioritycode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_prioritycode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 
@@ -52,7 +52,7 @@
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_statuscode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_statuscode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_statuscode_eq' :itemRules="this.rules.n_statuscode_eq" class='' :caption="$t('entities.activitypointer.default_searchform.details.n_statuscode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_statuscode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 
@@ -72,7 +72,7 @@
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_statecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_statecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_statecode_eq' :itemRules="this.rules.n_statecode_eq" class='' :caption="$t('entities.activitypointer.default_searchform.details.n_statecode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_statecode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 

app_BusinessCentral/src/widgets/activity-pointer/main-form/main-form.html

@@ -12,11 +12,11 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.activitypointer.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.activitypointer.main_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -39,32 +39,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.activitypointer.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.activitypointer.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.activitypointer.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.activitypointer.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.activitypointer.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/appointment/main-form/main-form.html

@@ -12,11 +12,11 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.appointment.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.appointment.main_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -39,32 +39,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.appointment.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.appointment.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.appointment.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.appointment.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.appointment.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/appointment/quick-create-form/quick-create-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.appointment.quickcreate_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.appointment.quickcreate_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/campaign-activity/main-form/main-form.html

@@ -12,11 +12,11 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignactivity.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.campaignactivity.main_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -39,32 +39,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignactivity.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.campaignactivity.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.campaignactivity.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.campaignactivity.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.campaignactivity.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/campaign-activity/quick-create-form/quick-create-form.html

@@ -2,23 +2,23 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignactivity.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.category.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.category.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='category' :itemRules="this.rules.category" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.category')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.category.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.category"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.category.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.channeltypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.channeltypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='channeltypecode' :itemRules="this.rules.channeltypecode" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.channeltypecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.channeltypecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -38,49 +38,49 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.scheduledstart.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.scheduledstart.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='scheduledstart' :itemRules="this.rules.scheduledstart" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.scheduledstart')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.scheduledstart.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.scheduledstart" :disabled="detailsModel.scheduledstart.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.scheduledstart = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.scheduledend.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.scheduledend.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='scheduledend' :itemRules="this.rules.scheduledend" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.scheduledend')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.scheduledend.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.scheduledend" :disabled="detailsModel.scheduledend.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.scheduledend = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.actualstart.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.actualstart.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='actualstart' :itemRules="this.rules.actualstart" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.actualstart')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.actualstart.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.actualstart" :disabled="detailsModel.actualstart.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.actualstart = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.actualend.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.actualend.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='actualend' :itemRules="this.rules.actualend" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.actualend')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.actualend.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.actualend" :disabled="detailsModel.actualend.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.actualend = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.budgetedcost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.budgetedcost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='budgetedcost' :itemRules="this.rules.budgetedcost" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.budgetedcost')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.budgetedcost.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.budgetedcost"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.budgetedcost.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.actualcost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.actualcost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='actualcost' :itemRules="this.rules.actualcost" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.actualcost')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.actualcost.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.actualcost"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.actualcost.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.regardingobjectid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.regardingobjectid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='regardingobjectid' :itemRules="this.rules.regardingobjectid" class='' :caption="$t('entities.campaignactivity.quickcreate_form.details.regardingobjectid')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.regardingobjectid.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.regardingobjectid"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.regardingobjectid.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/campaign-list/main-form/main-form.html

@@ -12,7 +12,7 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignlist.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
@@ -33,7 +33,7 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignlist.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>

app_BusinessCentral/src/widgets/campaign-response/main-form/main-form.html

@@ -12,11 +12,11 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignresponse.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.campaignresponse.main_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -39,32 +39,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignresponse.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.campaignresponse.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.campaignresponse.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.campaignresponse.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.campaignresponse.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/campaign-response/quick-create-form/quick-create-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaignresponse.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.campaignresponse.quickcreate_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.regardingobjectid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.regardingobjectid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='regardingobjectid' :itemRules="this.rules.regardingobjectid" class='' :caption="$t('entities.campaignresponse.quickcreate_form.details.regardingobjectid')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.regardingobjectid.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.regardingobjectid"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.regardingobjectid.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/campaign/data-panel-form/data-panel-form.html

@@ -2,43 +2,43 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.template.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.template.visible" :style="{}">
 <app-form-item name='template' :itemRules="this.rules.template" class='datapanel-style' :caption="$t('entities.campaign.datapanel_form.details.template')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.template.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='template' :value="data.template" tag='YesNo' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.expectedrevenue.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.expectedrevenue.visible" :style="{}">
 <app-form-item name='expectedrevenue' :itemRules="this.rules.expectedrevenue" class='datapanel-style' :caption="$t('entities.campaign.datapanel_form.details.expectedrevenue')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.expectedrevenue.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='expectedrevenue' :value="data.expectedrevenue" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.statecode.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.statecode.visible" :style="{}">
 <app-form-item name='statecode' :itemRules="this.rules.statecode" class='datapanel-style' :caption="$t('entities.campaign.datapanel_form.details.statecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statecode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='statecode' :value="data.statecode" tag='Campaign__StateCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.ownername.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}">
 <app-form-item name='ownername' :itemRules="this.rules.ownername" class='datapanel-style' :caption="$t('entities.campaign.datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.datapanel_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)" class="form-btn-noborder-transparent"
          style="">
         <i class="fa fa-angle-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/campaign/edit-data-panel-form/edit-data-panel-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.edit_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.template.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.template.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='template' :itemRules="this.rules.template" class='' :caption="$t('entities.campaign.edit_datapanel_form.details.template')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.template.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -26,13 +26,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.expectedrevenue.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.expectedrevenue.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='expectedrevenue' :itemRules="this.rules.expectedrevenue" class='' :caption="$t('entities.campaign.edit_datapanel_form.details.expectedrevenue')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.expectedrevenue.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.expectedrevenue"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.expectedrevenue.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.statecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.statecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='statecode' :itemRules="this.rules.statecode" class='' :caption="$t('entities.campaign.edit_datapanel_form.details.statecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -52,7 +52,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.campaign.edit_datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/campaign/info-head-form/info-head-form.html

@@ -2,15 +2,15 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.info_head_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;justify-content: space-between;">
-        <div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.info_head_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.campaignname.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.campaignname.visible" :style="{}">
 <app-form-item name='campaignname' :itemRules="this.rules.campaignname" class='' :caption="$t('entities.campaign.info_head_form.details.campaignname')" uiStyle="DEFAULT" :labelWidth="0" :isShowCaption="false" :error="detailsModel.campaignname.error" :isEmptyCaption="false" labelPos="NONE">
     
 <app-span name='campaignname' :value="data.campaignname" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
@@ -22,11 +22,11 @@
 </app-form-group>
 
 </div>
-<div  v-show="detailsModel.grouppanel2.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel2.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel2" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.info_head_form.details.grouppanel2')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel2" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;justify-content: space-between;">
-        <div  v-show="detailsModel.grouppanel3.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.grouppanel3.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel3" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel3.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.info_head_form.details.grouppanel3')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel3" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
@@ -35,43 +35,43 @@
 </app-form-group>
 
 </div>
-<div  v-show="detailsModel.grouppanel4.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel4.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel4" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel4.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.info_head_form.details.grouppanel4')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel4" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;justify-content: flex-end;">
-        <div  v-show="detailsModel.template.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.template.visible" :style="{}">
 <app-form-item name='template' :itemRules="this.rules.template" class='' :caption="$t('entities.campaign.info_head_form.details.template')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.template.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='template' :value="data.template" tag='YesNo' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.expectedrevenue.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.expectedrevenue.visible" :style="{}">
 <app-form-item name='expectedrevenue' :itemRules="this.rules.expectedrevenue" class='' :caption="$t('entities.campaign.info_head_form.details.expectedrevenue')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.expectedrevenue.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='expectedrevenue' :value="data.expectedrevenue" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.statuscode.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.statuscode.visible" :style="{}">
 <app-form-item name='statuscode' :itemRules="this.rules.statuscode" class='' :caption="$t('entities.campaign.info_head_form.details.statuscode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statuscode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='statuscode' :value="data.statuscode" tag='Campaign__StatusCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.ownername.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}">
 <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.campaign.info_head_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel5.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel5.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel5" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel5.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.info_head_form.details.grouppanel5')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel5" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;align-items: center;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)"
          style="">
         <i class="fa fa-chevron-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/campaign/quick-create-form/quick-create-form.html

@@ -2,23 +2,23 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.campaign.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.campaignname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.campaignname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='campaignname' :itemRules="this.rules.campaignname" class='' :caption="$t('entities.campaign.quickcreate_form.details.campaignname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.campaignname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.campaignname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.campaignname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.codename.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.codename.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='codename' :itemRules="this.rules.codename" class='' :caption="$t('entities.campaign.quickcreate_form.details.codename')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.codename.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.codename"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.codename.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.campaign.quickcreate_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -44,7 +44,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.typecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.typecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='typecode' :itemRules="this.rules.typecode" class='' :caption="$t('entities.campaign.quickcreate_form.details.typecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.typecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -64,7 +64,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.expectedresponse.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.expectedresponse.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='expectedresponse' :itemRules="this.rules.expectedresponse" class='' :caption="$t('entities.campaign.quickcreate_form.details.expectedresponse')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.expectedresponse.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.expectedresponse"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.expectedresponse.disabled" type='number'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/competitor-product/edit-comp-pro-form/edit-comp-pro-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitorproduct.edit_comppro_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.entity2name.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.entity2name.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='entity2name' :itemRules="this.rules.entity2name" class='' :caption="$t('entities.competitorproduct.edit_comppro_form.details.entity2name')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entity2name.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -32,7 +32,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.productnumber.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.productnumber.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='productnumber' :itemRules="this.rules.productnumber" class='' :caption="$t('entities.competitorproduct.edit_comppro_form.details.productnumber')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.productnumber.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='productnumber' :value="data.productnumber" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/competitor-sales-literature/sal-lit-comp-form/sal-lit-comp-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitorsalesliterature.sallitcomp_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.entityname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.entityname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='entityname' :itemRules="this.rules.entityname" class='' :caption="$t('entities.competitorsalesliterature.sallitcomp_form.details.entityname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entityname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 

app_BusinessCentral/src/widgets/competitor/abstract-info-form/abstract-info-form.html

@@ -2,60 +2,60 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.abstractinfo_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="1" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.competitorname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.competitorname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='competitorname' :itemRules="this.rules.competitorname" class='' :caption="$t('entities.competitor.abstractinfo_form.details.competitorname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.competitorname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='competitorname' :value="data.competitorname" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.websiteurl.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.websiteurl.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='websiteurl' :itemRules="this.rules.websiteurl" class='' :caption="$t('entities.competitor.abstractinfo_form.details.websiteurl')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.websiteurl.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='websiteurl' :value="data.websiteurl" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.competitor.abstractinfo_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='transactioncurrencyname' :value="data.transactioncurrencyname" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_postalcode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_postalcode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_postalcode' :itemRules="this.rules.address1_postalcode" class='' :caption="$t('entities.competitor.abstractinfo_form.details.address1_postalcode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_postalcode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='address1_postalcode' :value="data.address1_postalcode" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_country.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_country.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_country' :itemRules="this.rules.address1_country" class='' :caption="$t('entities.competitor.abstractinfo_form.details.address1_country')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_country.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='address1_country' :value="data.address1_country" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_stateorprovince' :itemRules="this.rules.address1_stateorprovince" class='' :caption="$t('entities.competitor.abstractinfo_form.details.address1_stateorprovince')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_stateorprovince.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='address1_stateorprovince' :value="data.address1_stateorprovince" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_city.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_city.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_city' :itemRules="this.rules.address1_city" class='' :caption="$t('entities.competitor.abstractinfo_form.details.address1_city')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_city.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='address1_city' :value="data.address1_city" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_line1.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_line1.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_line1' :itemRules="this.rules.address1_line1" class='' :caption="$t('entities.competitor.abstractinfo_form.details.address1_line1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_line1.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='address1_line1' :value="data.address1_line1" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
@@ -67,18 +67,18 @@
 </app-form-group>
 
 </i-col>
-<i-col v-show="detailsModel.grouppanel1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.grouppanel1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.abstractinfo_form.details.grouppanel1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="1" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.strengths.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.strengths.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='strengths' :itemRules="this.rules.strengths" class='' :caption="$t('entities.competitor.abstractinfo_form.details.strengths')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.strengths.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='strengths' :value="data.strengths" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.weaknesses.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.weaknesses.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='weaknesses' :itemRules="this.rules.weaknesses" class='' :caption="$t('entities.competitor.abstractinfo_form.details.weaknesses')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.weaknesses.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='weaknesses' :value="data.weaknesses" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/competitor/data-panel-form/data-panel-form.html

@@ -2,29 +2,29 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.reportedrevenue.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.reportedrevenue.visible" :style="{}">
 <app-form-item name='reportedrevenue' :itemRules="this.rules.reportedrevenue" class='datapanel-style' :caption="$t('entities.competitor.datapanel_form.details.reportedrevenue')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.reportedrevenue.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='reportedrevenue' :value="data.reportedrevenue" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.websiteurl.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.websiteurl.visible" :style="{}">
 <app-form-item name='websiteurl' :itemRules="this.rules.websiteurl" class='datapanel-style' :caption="$t('entities.competitor.datapanel_form.details.websiteurl')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.websiteurl.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='websiteurl' :value="data.websiteurl" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.datapanel_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)" class="form-btn-noborder-transparent"
          style="">
         <i class="fa fa-angle-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/competitor/default-searchform/default-searchform.html

@@ -6,7 +6,7 @@
   </div>
   <div class="form-content">
                   
-          <i-col v-show="detailsModel.n_competitorname_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_competitorname_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_competitorname_like' :itemRules="this.rules.n_competitorname_like" class='' :caption="$t('entities.competitor.default_searchform.details.n_competitorname_like')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_competitorname_like.error" :isEmptyCaption="false" labelPos="TOP">
               <input-box v-model="data.n_competitorname_like"  @enter="onEnter($event)"    :disabled="detailsModel.n_competitorname_like.disabled" type='text'  style=""></input-box>
           </app-form-item>

app_BusinessCentral/src/widgets/competitor/edit-data-panel-form/edit-data-panel-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.edit_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.reportedrevenue.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.reportedrevenue.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='reportedrevenue' :itemRules="this.rules.reportedrevenue" class='' :caption="$t('entities.competitor.edit_datapanel_form.details.reportedrevenue')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.reportedrevenue.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.reportedrevenue"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.reportedrevenue.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='websiteurl' :itemRules="this.rules.websiteurl" class='' :caption="$t('entities.competitor.edit_datapanel_form.details.websiteurl')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.websiteurl.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.websiteurl"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.websiteurl.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/competitor/edit-main-form/edit-main-form.html

@@ -2,23 +2,23 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.edit_main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="1" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.competitorname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.competitorname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='competitorname' :itemRules="this.rules.competitorname" class='' :caption="$t('entities.competitor.edit_main_form.details.competitorname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.competitorname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.competitorname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.competitorname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.websiteurl.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.websiteurl.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='websiteurl' :itemRules="this.rules.websiteurl" class='' :caption="$t('entities.competitor.edit_main_form.details.websiteurl')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.websiteurl.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.websiteurl"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.websiteurl.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.competitor.edit_main_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -44,31 +44,31 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_postalcode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_postalcode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_postalcode' :itemRules="this.rules.address1_postalcode" class='' :caption="$t('entities.competitor.edit_main_form.details.address1_postalcode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_postalcode.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_postalcode"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_postalcode.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_country.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_country.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_country' :itemRules="this.rules.address1_country" class='' :caption="$t('entities.competitor.edit_main_form.details.address1_country')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_country.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_country"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_country.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_stateorprovince' :itemRules="this.rules.address1_stateorprovince" class='' :caption="$t('entities.competitor.edit_main_form.details.address1_stateorprovince')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_stateorprovince.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_stateorprovince"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_stateorprovince.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_city.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_city.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_city' :itemRules="this.rules.address1_city" class='' :caption="$t('entities.competitor.edit_main_form.details.address1_city')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_city.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_city"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_city.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_line1.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_line1.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='address1_line1' :itemRules="this.rules.address1_line1" class='' :caption="$t('entities.competitor.edit_main_form.details.address1_line1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_line1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_line1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_line1.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -79,17 +79,17 @@
 </app-form-group>
 
 </i-col>
-<i-col v-show="detailsModel.grouppanel1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.grouppanel1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.edit_main_form.details.grouppanel1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="1" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.strengths.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.strengths.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='strengths' :itemRules="this.rules.strengths" class='' :caption="$t('entities.competitor.edit_main_form.details.strengths')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.strengths.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.strengths"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.strengths.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.weaknesses.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.weaknesses.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='weaknesses' :itemRules="this.rules.weaknesses" class='' :caption="$t('entities.competitor.edit_main_form.details.weaknesses')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.weaknesses.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.weaknesses"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.weaknesses.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/competitor/quick-create-form/quick-create-form.html

@@ -2,23 +2,23 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.competitor.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.competitorname.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.competitorname.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='competitorname' :itemRules="this.rules.competitorname" class='' :caption="$t('entities.competitor.quickcreate_form.details.competitorname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.competitorname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.competitorname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.competitorname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.websiteurl.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='websiteurl' :itemRules="this.rules.websiteurl" class='' :caption="$t('entities.competitor.quickcreate_form.details.websiteurl')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.websiteurl.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.websiteurl"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.websiteurl.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.competitor.quickcreate_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -44,31 +44,31 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_postalcode.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_postalcode.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='address1_postalcode' :itemRules="this.rules.address1_postalcode" class='' :caption="$t('entities.competitor.quickcreate_form.details.address1_postalcode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_postalcode.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_postalcode"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_postalcode.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_country.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_country.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='address1_country' :itemRules="this.rules.address1_country" class='' :caption="$t('entities.competitor.quickcreate_form.details.address1_country')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_country.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_country"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_country.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='address1_stateorprovince' :itemRules="this.rules.address1_stateorprovince" class='' :caption="$t('entities.competitor.quickcreate_form.details.address1_stateorprovince')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_stateorprovince.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_stateorprovince"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_stateorprovince.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_city.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_city.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='address1_city' :itemRules="this.rules.address1_city" class='' :caption="$t('entities.competitor.quickcreate_form.details.address1_city')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_city.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_city"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_city.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_line1.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_line1.visible" :style="{}"  :lg="{ span: 12, offset: 0 }" :xl="{ span: 12, offset: 0 }">
     <app-form-item name='address1_line1' :itemRules="this.rules.address1_line1" class='' :caption="$t('entities.competitor.quickcreate_form.details.address1_line1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_line1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_line1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_line1.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/connection-role/main-form/main-form.html

@@ -12,17 +12,17 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.connectionrole.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.connectionrolename.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.connectionrolename.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='connectionrolename' :itemRules="this.rules.connectionrolename" class='' :caption="$t('entities.connectionrole.main_form.details.connectionrolename')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.connectionrolename.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.connectionrolename"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.connectionrolename.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.category.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.category.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='category' :itemRules="this.rules.category" class='' :caption="$t('entities.connectionrole.main_form.details.category')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.category.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -42,7 +42,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.componentstate.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.componentstate.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='componentstate' :itemRules="this.rules.componentstate" class='' :caption="$t('entities.connectionrole.main_form.details.componentstate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.componentstate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -62,7 +62,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.managed.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.managed.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='managed' :itemRules="this.rules.managed" class='' :caption="$t('entities.connectionrole.main_form.details.managed')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.managed.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -82,7 +82,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.statuscode.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.statuscode.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='statuscode' :itemRules="this.rules.statuscode" class='' :caption="$t('entities.connectionrole.main_form.details.statuscode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statuscode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -102,7 +102,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.statecode.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.statecode.visible" :style="{}"  :md="{ span: 13, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='statecode' :itemRules="this.rules.statecode" class='' :caption="$t('entities.connectionrole.main_form.details.statecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -122,7 +122,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.connectionrole.main_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style="height:80px;"></input-box>
 </app-form-item>
@@ -145,32 +145,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.connectionrole.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.connectionrole.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.connectionrole.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.connectionrole.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.connectionrole.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/contact/address-edit-form/address-edit-form.html

@@ -2,35 +2,35 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.addressedit_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.address1_country.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.address1_country.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='address1_country' :itemRules="this.rules.address1_country" class='' :caption="$t('entities.contact.addressedit_form.details.address1_country')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_country.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_country"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_country.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_stateorprovince.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='address1_stateorprovince' :itemRules="this.rules.address1_stateorprovince" class='' :caption="$t('entities.contact.addressedit_form.details.address1_stateorprovince')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_stateorprovince.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_stateorprovince"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_stateorprovince.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_city.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_city.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='address1_city' :itemRules="this.rules.address1_city" class='' :caption="$t('entities.contact.addressedit_form.details.address1_city')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_city.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_city"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_city.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_line1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_line1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='address1_line1' :itemRules="this.rules.address1_line1" class='' :caption="$t('entities.contact.addressedit_form.details.address1_line1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_line1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_line1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_line1.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.address1_postalcode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.address1_postalcode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='address1_postalcode' :itemRules="this.rules.address1_postalcode" class='' :caption="$t('entities.contact.addressedit_form.details.address1_postalcode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.address1_postalcode.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.address1_postalcode"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.address1_postalcode.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/contact/book-edit-form/book-edit-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.grouppanel2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.grouppanel2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.grouppanel2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.bookedit_form.details.grouppanel2')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.contact.bookedit_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -32,13 +32,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.creditlimit.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.creditlimit.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='creditlimit' :itemRules="this.rules.creditlimit" class='' :caption="$t('entities.contact.bookedit_form.details.creditlimit')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.creditlimit.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.creditlimit"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.creditlimit.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.creditonhold.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.creditonhold.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='creditonhold' :itemRules="this.rules.creditonhold" class='' :caption="$t('entities.contact.bookedit_form.details.creditonhold')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.creditonhold.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -58,7 +58,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.paymenttermscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.paymenttermscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='paymenttermscode' :itemRules="this.rules.paymenttermscode" class='' :caption="$t('entities.contact.bookedit_form.details.paymenttermscode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.paymenttermscode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 

app_BusinessCentral/src/widgets/contact/date-panel-form/date-panel-form.html

@@ -2,36 +2,36 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.datepanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;justify-content: space-between;">
-        <div  v-show="detailsModel.customersizecode.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.customersizecode.visible" :style="{}">
 <app-form-item name='customersizecode' :itemRules="this.rules.customersizecode" class='datapanel-style' labelStyle="datapanel-label-style" :caption="$t('entities.contact.datepanel_form.details.customersizecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.customersizecode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='customersizecode' :value="data.customersizecode" tag='Contact__CustomerSizeCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.statuscode.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.statuscode.visible" :style="{}">
 <app-form-item name='statuscode' :itemRules="this.rules.statuscode" class='datapanel-style' labelStyle="datapanel-label-style" :caption="$t('entities.contact.datepanel_form.details.statuscode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statuscode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='statuscode' :value="data.statuscode" tag='Contact__StatusCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.ownername.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}">
 <app-form-item name='ownername' :itemRules="this.rules.ownername" class='datapanel-style' labelStyle="datapanel-label-style" :caption="$t('entities.contact.datepanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.datepanel_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;align-items: center;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)" class="form-btn-noborder-transparent"
          style="">
         <i class="fa fa-angle-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/contact/default-searchform/default-searchform.html

@@ -6,13 +6,13 @@
   </div>
   <div class="form-content">
                   
-          <i-col v-show="detailsModel.n_fullname_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_fullname_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_fullname_like' :itemRules="this.rules.n_fullname_like" class='' :caption="$t('entities.contact.default_searchform.details.n_fullname_like')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_fullname_like.error" :isEmptyCaption="false" labelPos="TOP">
               <input-box v-model="data.n_fullname_like"  @enter="onEnter($event)"    :disabled="detailsModel.n_fullname_like.disabled" type='text'  style=""></input-box>
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_statecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_statecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_statecode_eq' :itemRules="this.rules.n_statecode_eq" class='' :caption="$t('entities.contact.default_searchform.details.n_statecode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_statecode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 
@@ -32,7 +32,7 @@
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_leadsourcecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_leadsourcecode_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_leadsourcecode_eq' :itemRules="this.rules.n_leadsourcecode_eq" class='' :caption="$t('entities.contact.default_searchform.details.n_leadsourcecode_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_leadsourcecode_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <dropdown-list 

app_BusinessCentral/src/widgets/contact/edit-data-panel-form/edit-data-panel-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.edit_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.customersizecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.customersizecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='customersizecode' :itemRules="this.rules.customersizecode" class='' :caption="$t('entities.contact.edit_datapanel_form.details.customersizecode')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.customersizecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -26,7 +26,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.statuscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.statuscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='statuscode' :itemRules="this.rules.statuscode" class='' :caption="$t('entities.contact.edit_datapanel_form.details.statuscode')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.statuscode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -46,7 +46,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.contact.edit_datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="70" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/contact/market-edit-form/market-edit-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.marketedit_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.originatingleadname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.originatingleadname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='originatingleadname' :itemRules="this.rules.originatingleadname" class='' :caption="$t('entities.contact.marketedit_form.details.originatingleadname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.originatingleadname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -32,13 +32,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.lastusedincampaign.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.lastusedincampaign.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='lastusedincampaign' :itemRules="this.rules.lastusedincampaign" class='' :caption="$t('entities.contact.marketedit_form.details.lastusedincampaign')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.lastusedincampaign.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.lastusedincampaign" :disabled="detailsModel.lastusedincampaign.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.lastusedincampaign = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.donotsendmm.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.donotsendmm.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='donotsendmm' :itemRules="this.rules.donotsendmm" class='' :caption="$t('entities.contact.marketedit_form.details.donotsendmm')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.donotsendmm.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -58,7 +58,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.shippingmethodcode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.shippingmethodcode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='shippingmethodcode' :itemRules="this.rules.shippingmethodcode" class='' :caption="$t('entities.contact.marketedit_form.details.shippingmethodcode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.shippingmethodcode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 

app_BusinessCentral/src/widgets/contact/person-edit-form/person-edit-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.personedit_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.gendercode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.gendercode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='gendercode' :itemRules="this.rules.gendercode" class='' :caption="$t('entities.contact.personedit_form.details.gendercode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.gendercode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -26,7 +26,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.familystatuscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.familystatuscode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='familystatuscode' :itemRules="this.rules.familystatuscode" class='' :caption="$t('entities.contact.personedit_form.details.familystatuscode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.familystatuscode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -46,25 +46,25 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.spousesname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.spousesname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='spousesname' :itemRules="this.rules.spousesname" class='' :caption="$t('entities.contact.personedit_form.details.spousesname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.spousesname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.spousesname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.spousesname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.birthdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.birthdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='birthdate' :itemRules="this.rules.birthdate" class='' :caption="$t('entities.contact.personedit_form.details.birthdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.birthdate.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.birthdate" :disabled="detailsModel.birthdate.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.birthdate = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.anniversary.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.anniversary.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='anniversary' :itemRules="this.rules.anniversary" class='' :caption="$t('entities.contact.personedit_form.details.anniversary')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.anniversary.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.anniversary" :disabled="detailsModel.anniversary.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.anniversary = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.contact.personedit_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/contact/quick-create-form/quick-create-form.html

@@ -2,23 +2,23 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.contact.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.fullname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.fullname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='fullname' :itemRules="this.rules.fullname" class='' :caption="$t('entities.contact.quickcreate_form.details.fullname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.fullname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.fullname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.fullname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.jobtitle.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.jobtitle.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='jobtitle' :itemRules="this.rules.jobtitle" class='' :caption="$t('entities.contact.quickcreate_form.details.jobtitle')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.jobtitle.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.jobtitle"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.jobtitle.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.customername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.customername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='customername' :itemRules="this.rules.customername" class='' :caption="$t('entities.contact.quickcreate_form.details.customername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.customername.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -44,25 +44,25 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.emailaddress1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.emailaddress1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='emailaddress1' :itemRules="this.rules.emailaddress1" class='' :caption="$t('entities.contact.quickcreate_form.details.emailaddress1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.emailaddress1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.emailaddress1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.emailaddress1.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.telephone1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='telephone1' :itemRules="this.rules.telephone1" class='' :caption="$t('entities.contact.quickcreate_form.details.telephone1')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.telephone1.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.telephone1"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.telephone1.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.mobilephone.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.mobilephone.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='mobilephone' :itemRules="this.rules.mobilephone" class='' :caption="$t('entities.contact.quickcreate_form.details.mobilephone')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.mobilephone.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.mobilephone"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.mobilephone.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.fax.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.fax.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='fax' :itemRules="this.rules.fax" class='' :caption="$t('entities.contact.quickcreate_form.details.fax')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.fax.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.fax"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.fax.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/discount-type/main-form/main-form.html

@@ -12,11 +12,11 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.discounttype.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.discounttypename.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.discounttypename.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='discounttypename' :itemRules="this.rules.discounttypename" class='' :caption="$t('entities.discounttype.main_form.details.discounttypename')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.discounttypename.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.discounttypename"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.discounttypename.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -39,32 +39,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.discounttype.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.discounttype.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.discounttype.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.discounttype.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.discounttype.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/email/main-form/main-form.html

@@ -12,11 +12,11 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.email.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.email.main_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -39,32 +39,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.email.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.email.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.email.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.email.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.email.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/fax/main-form/main-form.html

@@ -12,11 +12,11 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.fax.main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.subject.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subject' :itemRules="this.rules.subject" class='' :caption="$t('entities.fax.main_form.details.subject')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subject.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.subject"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.subject.disabled" type='text'  style=""></input-box>
 </app-form-item>
@@ -39,32 +39,32 @@
                     ])
                 }">
                     
-<i-col v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group2.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group2" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group2.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.fax.main_form.details.group2')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group2" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.createman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createman' :itemRules="this.rules.createman" class='' :caption="$t('entities.fax.main_form.details.createman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createman' :value="data.createman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.createdate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='createdate' :itemRules="this.rules.createdate" class='' :caption="$t('entities.fax.main_form.details.createdate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.createdate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='createdate' :value="data.createdate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updateman.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updateman' :itemRules="this.rules.updateman" class='' :caption="$t('entities.fax.main_form.details.updateman')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updateman.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updateman' :value="data.updateman" tag='SysOperator' codelistType='DYNAMIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.updatedate.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='updatedate' :itemRules="this.rules.updatedate" class='' :caption="$t('entities.fax.main_form.details.updatedate')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.updatedate.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='updatedate' :value="data.updatedate" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/goal/quick-create-form/quick-create-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.goal.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='title' :itemRules="this.rules.title" class='' :caption="$t('entities.goal.quickcreate_form.details.title')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.title.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.title"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.title.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.parentgoalname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.parentgoalname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='parentgoalname' :itemRules="this.rules.parentgoalname" class='' :caption="$t('entities.goal.quickcreate_form.details.parentgoalname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.parentgoalname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -38,13 +38,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.goalownerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.goalownerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='goalownerid' :itemRules="this.rules.goalownerid" class='' :caption="$t('entities.goal.quickcreate_form.details.goalownerid')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.goalownerid.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.goalownerid"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.goalownerid.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.metricname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.metricname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='metricname' :itemRules="this.rules.metricname" class='' :caption="$t('entities.goal.quickcreate_form.details.metricname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.metricname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -70,7 +70,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownerid' :itemRules="this.rules.ownerid" class='' :caption="$t('entities.goal.quickcreate_form.details.ownerid')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownerid.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownerid"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownerid.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/ibiz-list/abstract-edit-form/abstract-edit-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.ibizlist.abstractedit_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.listname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.listname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='listname' :itemRules="this.rules.listname" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.listname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.listname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.listname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.listname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.type.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.type.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='type' :itemRules="this.rules.type" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.type')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.type.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -32,25 +32,25 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.purpose.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.purpose.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='purpose' :itemRules="this.rules.purpose" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.purpose')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.purpose.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.purpose"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.purpose.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.membertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.membertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='membertype' :itemRules="this.rules.membertype" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.membertype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.membertype.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.membertype"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.membertype.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.source.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.source.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='source' :itemRules="this.rules.source" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.source')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.source.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.source"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.source.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -76,19 +76,19 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.cost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.cost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='cost' :itemRules="this.rules.cost" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.cost')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.cost.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.cost"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.cost.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.ibizlist.abstractedit_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/ibiz-list/abstract-info-form/abstract-info-form.html

@@ -2,67 +2,67 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.ibizlist.abstractinfo_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="1" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.listname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.listname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='listname' :itemRules="this.rules.listname" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.listname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.listname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='listname' :value="data.listname" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.type.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.type.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='type' :itemRules="this.rules.type" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.type')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.type.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='type' :value="data.type" tag='YesNo' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.purpose.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.purpose.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='purpose' :itemRules="this.rules.purpose" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.purpose')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.purpose.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='purpose' :value="data.purpose" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.membertype.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.membertype.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='membertype' :itemRules="this.rules.membertype" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.membertype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.membertype.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='membertype' :value="data.membertype" tag='List__MemberType' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.source.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.source.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='source' :itemRules="this.rules.source" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.source')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.source.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='source' :value="data.source" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='transactioncurrencyname' :value="data.transactioncurrencyname" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.cost.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.cost.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='cost' :itemRules="this.rules.cost" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.cost')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.cost.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='cost' :value="data.cost" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.ibizlist.abstractinfo_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-span name='description' :value="data.description" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/ibiz-list/data-panel-form/data-panel-form.html

@@ -2,36 +2,36 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.ibizlist.datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.lockstatus.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.lockstatus.visible" :style="{}">
 <app-form-item name='lockstatus' :itemRules="this.rules.lockstatus" class='datapanel-style' :caption="$t('entities.ibizlist.datapanel_form.details.lockstatus')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.lockstatus.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='lockstatus' :value="data.lockstatus" tag='YesNo' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.lastusedon.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.lastusedon.visible" :style="{}">
 <app-form-item name='lastusedon' :itemRules="this.rules.lastusedon" class='datapanel-style' :caption="$t('entities.ibizlist.datapanel_form.details.lastusedon')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.lastusedon.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='lastusedon' :value="data.lastusedon" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.ownername.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}">
 <app-form-item name='ownername' :itemRules="this.rules.ownername" class='datapanel-style' :caption="$t('entities.ibizlist.datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.ibizlist.datapanel_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)" class="form-btn-noborder-transparent"
          style="">
         <i class="fa fa-angle-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/ibiz-list/edit-data-panel-form/edit-data-panel-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.ibizlist.edit_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.lockstatus.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.lockstatus.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='lockstatus' :itemRules="this.rules.lockstatus" class='' :caption="$t('entities.ibizlist.edit_datapanel_form.details.lockstatus')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.lockstatus.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -26,13 +26,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.lastusedon.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.lastusedon.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='lastusedon' :itemRules="this.rules.lastusedon" class='' :caption="$t('entities.ibizlist.edit_datapanel_form.details.lastusedon')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.lastusedon.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.lastusedon" :disabled="detailsModel.lastusedon.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.lastusedon = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.ibizlist.edit_datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/ibiz-list/edit-main-form/edit-main-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.ibizlist.edit_main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="1" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.listname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.listname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='listname' :itemRules="this.rules.listname" class='' :caption="$t('entities.ibizlist.edit_main_form.details.listname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.listname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.listname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.listname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.type.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.type.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='type' :itemRules="this.rules.type" class='' :caption="$t('entities.ibizlist.edit_main_form.details.type')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.type.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -32,25 +32,25 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.purpose.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.purpose.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='purpose' :itemRules="this.rules.purpose" class='' :caption="$t('entities.ibizlist.edit_main_form.details.purpose')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.purpose.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.purpose"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.purpose.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.membertype.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.membertype.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='membertype' :itemRules="this.rules.membertype" class='' :caption="$t('entities.ibizlist.edit_main_form.details.membertype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.membertype.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.membertype"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.membertype.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.source.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.source.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='source' :itemRules="this.rules.source" class='' :caption="$t('entities.ibizlist.edit_main_form.details.source')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.source.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.source"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.source.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.ibizlist.edit_main_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -76,19 +76,19 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.cost.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.cost.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='cost' :itemRules="this.rules.cost" class='' :caption="$t('entities.ibizlist.edit_main_form.details.cost')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.cost.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.cost"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.cost.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.ibizlist.edit_main_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 24, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.ibizlist.edit_main_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/ibiz-list/quick-create-form/quick-create-form.html

@@ -2,23 +2,23 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.ibizlist.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.listname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.listname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='listname' :itemRules="this.rules.listname" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.listname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.listname.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.listname"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.listname.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.membertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.membertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='membertype' :itemRules="this.rules.membertype" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.membertype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.membertype.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.membertype"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.membertype.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.type.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.type.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='type' :itemRules="this.rules.type" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.type')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.type.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -38,19 +38,19 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.purpose.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.purpose.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='purpose' :itemRules="this.rules.purpose" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.purpose')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.purpose.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.purpose"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.purpose.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.source.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.source.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='source' :itemRules="this.rules.source" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.source')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.source.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.source"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.source.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.transactioncurrencyname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='transactioncurrencyname' :itemRules="this.rules.transactioncurrencyname" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.transactioncurrencyname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.transactioncurrencyname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -76,19 +76,19 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.cost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.cost.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='cost' :itemRules="this.rules.cost" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.cost')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.cost.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.cost"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.cost.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.lastusedon.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.lastusedon.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='lastusedon' :itemRules="this.rules.lastusedon" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.lastusedon')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.lastusedon.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.lastusedon" :disabled="detailsModel.lastusedon.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.lastusedon = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.lockstatus.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.lockstatus.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='lockstatus' :itemRules="this.rules.lockstatus" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.lockstatus')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.lockstatus.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -108,25 +108,25 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownerid' :itemRules="this.rules.ownerid" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.ownerid')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownerid.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownerid"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownerid.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownertype' :itemRules="this.rules.ownertype" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.ownertype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownertype.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownertype"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownertype.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.ibizlist.quickcreate_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/incident-customer/default-searchform/default-searchform.html

@@ -6,14 +6,14 @@
   </div>
   <div class="form-content">
                   
-          <i-col v-show="detailsModel.n_customertype_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_customertype_eq.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_customertype_eq' :itemRules="this.rules.n_customertype_eq" class='' :caption="$t('entities.incidentcustomer.default_searchform.details.n_customertype_eq')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_customertype_eq.error" :isEmptyCaption="false" labelPos="TOP">
               
           <app-span name='n_customertype_eq' :value="data.n_customertype_eq" tag='IncidentCustomer' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
           </app-form-item>
           
           </i-col>
-          <i-col v-show="detailsModel.n_customername_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+          <i-col class="form-layout-container" v-show="detailsModel.n_customername_like.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
               <app-form-item name='n_customername_like' :itemRules="this.rules.n_customername_like" class='' :caption="$t('entities.incidentcustomer.default_searchform.details.n_customername_like')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.n_customername_like.error" :isEmptyCaption="false" labelPos="TOP">
               
           <app-span name='n_customername_like' :value="data.n_customername_like" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>

app_BusinessCentral/src/widgets/incident/by-parent-key-form/by-parent-key-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.byparentkey_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='title' :itemRules="this.rules.title" class='' :caption="$t('entities.incident.byparentkey_form.details.title')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.title.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.title"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.title.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.subjectname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.subjectname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subjectname' :itemRules="this.rules.subjectname" class='' :caption="$t('entities.incident.byparentkey_form.details.subjectname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subjectname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -38,7 +38,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.caseorigincode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.caseorigincode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='caseorigincode' :itemRules="this.rules.caseorigincode" class='' :caption="$t('entities.incident.byparentkey_form.details.caseorigincode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.caseorigincode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -58,7 +58,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.productname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.productname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='productname' :itemRules="this.rules.productname" class='' :caption="$t('entities.incident.byparentkey_form.details.productname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.productname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -84,7 +84,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.entitlementname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.entitlementname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='entitlementname' :itemRules="this.rules.entitlementname" class='' :caption="$t('entities.incident.byparentkey_form.details.entitlementname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entitlementname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 

app_BusinessCentral/src/widgets/incident/date-panel-form/date-panel-form.html

@@ -2,43 +2,43 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.datepanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.prioritycode.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.prioritycode.visible" :style="{}">
 <app-form-item name='prioritycode' :itemRules="this.rules.prioritycode" class='datapanel-style' :caption="$t('entities.incident.datepanel_form.details.prioritycode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.prioritycode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='prioritycode' :value="data.prioritycode" tag='Incident__PriorityCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.escalatedon.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.escalatedon.visible" :style="{}">
 <app-form-item name='escalatedon' :itemRules="this.rules.escalatedon" class='datapanel-style' :caption="$t('entities.incident.datepanel_form.details.escalatedon')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.escalatedon.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='escalatedon' :value="data.escalatedon" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.statecode.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.statecode.visible" :style="{}">
 <app-form-item name='statecode' :itemRules="this.rules.statecode" class='datapanel-style' :caption="$t('entities.incident.datepanel_form.details.statecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statecode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='statecode' :value="data.statecode" tag='Incident__StateCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.ownername.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}">
 <app-form-item name='ownername' :itemRules="this.rules.ownername" class='datapanel-style' :caption="$t('entities.incident.datepanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.datepanel_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)" class="form-btn-noborder-transparent"
          style="">
         <i class="fa fa-angle-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/incident/edit-child-incident-form/edit-child-incident-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.edit_childincident_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='title' :itemRules="this.rules.title" class='' :caption="$t('entities.incident.edit_childincident_form.details.title')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.title.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.title"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.title.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.subjectname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.subjectname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subjectname' :itemRules="this.rules.subjectname" class='' :caption="$t('entities.incident.edit_childincident_form.details.subjectname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subjectname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -38,7 +38,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.casetypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.casetypecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='casetypecode' :itemRules="this.rules.casetypecode" class='' :caption="$t('entities.incident.edit_childincident_form.details.casetypecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.casetypecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -58,7 +58,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.primarycontactname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.primarycontactname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='primarycontactname' :itemRules="this.rules.primarycontactname" class='' :caption="$t('entities.incident.edit_childincident_form.details.primarycontactname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.primarycontactname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -84,7 +84,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.caseorigincode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.caseorigincode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='caseorigincode' :itemRules="this.rules.caseorigincode" class='' :caption="$t('entities.incident.edit_childincident_form.details.caseorigincode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.caseorigincode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -104,7 +104,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.productname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.productname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='productname' :itemRules="this.rules.productname" class='' :caption="$t('entities.incident.edit_childincident_form.details.productname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.productname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -130,7 +130,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.entitlementname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.entitlementname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='entitlementname' :itemRules="this.rules.entitlementname" class='' :caption="$t('entities.incident.edit_childincident_form.details.entitlementname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entitlementname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 

app_BusinessCentral/src/widgets/incident/edit-data-panel-form/edit-data-panel-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.edit_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.prioritycode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.prioritycode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='prioritycode' :itemRules="this.rules.prioritycode" class='' :caption="$t('entities.incident.edit_datapanel_form.details.prioritycode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.prioritycode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -26,13 +26,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.escalatedon.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.escalatedon.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='escalatedon' :itemRules="this.rules.escalatedon" class='' :caption="$t('entities.incident.edit_datapanel_form.details.escalatedon')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.escalatedon.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.escalatedon" :disabled="detailsModel.escalatedon.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.escalatedon = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.statecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.statecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='statecode' :itemRules="this.rules.statecode" class='' :caption="$t('entities.incident.edit_datapanel_form.details.statecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -52,7 +52,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.incident.edit_datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/incident/edit-main-form/edit-main-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.edit_main_form.details.group1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.title.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.title.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='title' :itemRules="this.rules.title" class='' :caption="$t('entities.incident.edit_main_form.details.title')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.title.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.title"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.title.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.subjectname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.subjectname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='subjectname' :itemRules="this.rules.subjectname" class='' :caption="$t('entities.incident.edit_main_form.details.subjectname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subjectname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -38,7 +38,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.caseorigincode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.caseorigincode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='caseorigincode' :itemRules="this.rules.caseorigincode" class='' :caption="$t('entities.incident.edit_main_form.details.caseorigincode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.caseorigincode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -58,7 +58,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.productname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.productname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='productname' :itemRules="this.rules.productname" class='' :caption="$t('entities.incident.edit_main_form.details.productname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.productname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -84,7 +84,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.entitlementname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.entitlementname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='entitlementname' :itemRules="this.rules.entitlementname" class='' :caption="$t('entities.incident.edit_main_form.details.entitlementname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entitlementname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -115,11 +115,11 @@
 </app-form-group>
 
 </i-col>
-<i-col v-show="detailsModel.grouppanel1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.grouppanel1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.edit_main_form.details.grouppanel1')" :isShowCaption="true" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.primarycontactname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.primarycontactname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='primarycontactname' :itemRules="this.rules.primarycontactname" class='' :caption="$t('entities.incident.edit_main_form.details.primarycontactname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.primarycontactname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -145,7 +145,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.casetypecode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.casetypecode.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='casetypecode' :itemRules="this.rules.casetypecode" class='' :caption="$t('entities.incident.edit_main_form.details.casetypecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.casetypecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -165,7 +165,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.parentcasename.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.parentcasename.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='parentcasename' :itemRules="this.rules.parentcasename" class='' :caption="$t('entities.incident.edit_main_form.details.parentcasename')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.parentcasename.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -191,7 +191,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.escalated.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.escalated.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='escalated' :itemRules="this.rules.escalated" class='' :caption="$t('entities.incident.edit_main_form.details.escalated')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.escalated.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -211,13 +211,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.followupby.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.followupby.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='followupby' :itemRules="this.rules.followupby" class='' :caption="$t('entities.incident.edit_main_form.details.followupby')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.followupby.error" :isEmptyCaption="false" labelPos="LEFT">
     <date-picker type="datetime" :transfer="true" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择时间..." :value="data.followupby" :disabled="detailsModel.followupby.disabled" style="min-width: 150px; width:160px;" @on-change="(val1, val2) => { this.data.followupby = val1 }"></date-picker>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 24, offset: 0 }" :xl="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.incident.edit_main_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.description"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.description.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/incident/quick-create-form/quick-create-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.incident.quickcreate_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.title.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='title' :itemRules="this.rules.title" class='' :caption="$t('entities.incident.quickcreate_form.details.title')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.title.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.title"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.title.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.subjectname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.subjectname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='subjectname' :itemRules="this.rules.subjectname" class='' :caption="$t('entities.incident.quickcreate_form.details.subjectname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.subjectname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -38,7 +38,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.caseorigincode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.caseorigincode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='caseorigincode' :itemRules="this.rules.caseorigincode" class='' :caption="$t('entities.incident.quickcreate_form.details.caseorigincode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.caseorigincode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -58,7 +58,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.productname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.productname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='productname' :itemRules="this.rules.productname" class='' :caption="$t('entities.incident.quickcreate_form.details.productname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.productname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -84,7 +84,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.entitlementname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.entitlementname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='entitlementname' :itemRules="this.rules.entitlementname" class='' :caption="$t('entities.incident.quickcreate_form.details.entitlementname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entitlementname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -110,7 +110,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.description.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.description.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='description' :itemRules="this.rules.description" class='' :caption="$t('entities.incident.quickcreate_form.details.description')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.description.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-mpicker
@@ -136,13 +136,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.customerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.customerid.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='customerid' :itemRules="this.rules.customerid" class='' :caption="$t('entities.incident.quickcreate_form.details.customerid')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.customerid.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.customerid"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.customerid.disabled" type='text'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.customername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.customername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='customername' :itemRules="this.rules.customername" class='' :caption="$t('entities.incident.quickcreate_form.details.customername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.customername.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -169,7 +169,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.customertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.customertype.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='customertype' :itemRules="this.rules.customertype" class='' :caption="$t('entities.incident.quickcreate_form.details.customertype')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.customertype.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.customertype"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.customertype.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/invoice-detail/main-form/main-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.invoicedetail.main_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.productname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.productname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='productname' :itemRules="this.rules.productname" class='' :caption="$t('entities.invoicedetail.main_form.details.productname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.productname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -32,19 +32,19 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.priceperunit.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.priceperunit.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='priceperunit' :itemRules="this.rules.priceperunit" class='' :caption="$t('entities.invoicedetail.main_form.details.priceperunit')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.priceperunit.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.priceperunit"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.priceperunit.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.quantity.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.quantity.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='quantity' :itemRules="this.rules.quantity" class='' :caption="$t('entities.invoicedetail.main_form.details.quantity')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.quantity.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.quantity"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.quantity.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.uomname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.uomname.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='uomname' :itemRules="this.rules.uomname" class='' :caption="$t('entities.invoicedetail.main_form.details.uomname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.uomname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 
@@ -70,13 +70,13 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.manualdiscountamount.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.manualdiscountamount.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='manualdiscountamount' :itemRules="this.rules.manualdiscountamount" class='' :caption="$t('entities.invoicedetail.main_form.details.manualdiscountamount')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.manualdiscountamount.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.manualdiscountamount"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.manualdiscountamount.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.tax.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.tax.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='tax' :itemRules="this.rules.tax" class='' :caption="$t('entities.invoicedetail.main_form.details.tax')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.tax.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.tax"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.tax.disabled" type='number'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/invoice/data-panel-form/data-panel-form.html

@@ -2,36 +2,36 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.invoice.datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.totalamount.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.totalamount.visible" :style="{}">
 <app-form-item name='totalamount' :itemRules="this.rules.totalamount" class='datapanel-style' :caption="$t('entities.invoice.datapanel_form.details.totalamount')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.totalamount.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='totalamount' :value="data.totalamount" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.statecode.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.statecode.visible" :style="{}">
 <app-form-item name='statecode' :itemRules="this.rules.statecode" class='datapanel-style' :caption="$t('entities.invoice.datapanel_form.details.statecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statecode.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='statecode' :value="data.statecode" tag='Invoice__StateCode' codelistType='STATIC' :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.ownername.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}">
 <app-form-item name='ownername' :itemRules="this.rules.ownername" class='datapanel-style' :caption="$t('entities.invoice.datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="BOTTOM">
     
 <app-span name='ownername' :value="data.ownername" :data="data" :context="context" :viewparams="viewparams" :localContext ='{ }'  :localParam ='{ }'  style=""></app-span>
 </app-form-item>
 
 </div>
-<div  v-show="detailsModel.grouppanel1.visible" :style="{}">
+<div class="form-layout-container" v-show="detailsModel.grouppanel1.visible" :style="{}">
 <app-form-group :model="detailsModel.grouppanel1" layoutType="FLEX" titleStyle="" class='' :uiActionGroup="detailsModel.grouppanel1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.invoice.datapanel_form.details.grouppanel1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="true" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.grouppanel1" :data="data" :context="context" :viewparams="viewparams"/>
     <div style="height: 100%;display: flex;">
-        <div  v-show="detailsModel.button1.visible" :style="{}">
+        <div class="form-layout-container" v-show="detailsModel.button1.visible" :style="{}">
     <i-button type="primary" @click="button1_click($event)" class="form-btn-noborder-transparent"
          style="">
         <i class="fa fa-angle-down" style="margin-right: 2px;"></i>   

app_BusinessCentral/src/widgets/invoice/edit-data-panel-form/edit-data-panel-form.html

@@ -2,17 +2,17 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.invoice.edit_datapanel_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.totalamount.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.totalamount.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='totalamount' :itemRules="this.rules.totalamount" class='' :caption="$t('entities.invoice.edit_datapanel_form.details.totalamount')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.totalamount.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.totalamount"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.totalamount.disabled" type='number'  style=""></input-box>
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.statecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.statecode.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='statecode' :itemRules="this.rules.statecode" class='' :caption="$t('entities.invoice.edit_datapanel_form.details.statecode')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.statecode.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <dropdown-list 
@@ -32,7 +32,7 @@
 </app-form-item>
 
 </i-col>
-<i-col v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.ownername.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='ownername' :itemRules="this.rules.ownername" class='' :caption="$t('entities.invoice.edit_datapanel_form.details.ownername')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.ownername.error" :isEmptyCaption="false" labelPos="LEFT">
     <input-box v-model="data.ownername"  @enter="onEnter($event)"   unit=""  :disabled="detailsModel.ownername.disabled" type='text'  style=""></input-box>
 </app-form-item>

app_BusinessCentral/src/widgets/knowledge-article-incident/main-form/main-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.knowledgearticleincident.main_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.incidentname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.incidentname.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-item name='incidentname' :itemRules="this.rules.incidentname" class='' :caption="$t('entities.knowledgearticleincident.main_form.details.incidentname')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.incidentname.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker 

app_BusinessCentral/src/widgets/lead-competitor/edit-comp-lead-form/edit-comp-lead-form.html

@@ -2,11 +2,11 @@
     <input style="display:none;" />
     <row >
             
-<i-col v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
+<i-col class="form-layout-container" v-show="detailsModel.group1.visible" :style="{}"  :lg="{ span: 24, offset: 0 }">
     <app-form-group :model="detailsModel.group1" layoutType="TABLE_24COL" titleStyle="" class='' :uiActionGroup="detailsModel.group1.uiActionGroup" @groupuiactionclick="groupUIActionClick($event)" :caption="$t('entities.leadcompetitor.edit_complead_form.details.group1')" :isShowCaption="false" uiStyle="DEFAULT" :titleBarCloseMode="0" :isInfoGroupMode="false" >    
     <app-form-group-data-panel slot="dataInfoPanel" :model="detailsModel.group1" :data="data" :context="context" :viewparams="viewparams"/>
     <row>
-        <i-col v-show="detailsModel.entity2name.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
+        <i-col class="form-layout-container" v-show="detailsModel.entity2name.visible" :style="{}"  :md="{ span: 12, offset: 0 }" :lg="{ span: 8, offset: 0 }" :xl="{ span: 6, offset: 0 }">
     <app-form-item name='entity2name' :itemRules="this.rules.entity2name" class='' :caption="$t('entities.leadcompetitor.edit_complead_form.details.entity2name')" uiStyle="DEFAULT" :labelWidth="130" :isShowCaption="true" :error="detailsModel.entity2name.error" :isEmptyCaption="false" labelPos="LEFT">
     
 <app-picker