1. Home
  2. Forum
  3. Vue
  4. Dialog content template padding and border

Dialog content template padding and border

Hi,
I created dynamically a Vue Dialog with content template and I would set the padding
of the template that act as content of dialog (it seems that the default put around 10px
of padding on all sides).
Also I want to set the border of the Dialog component.
I don't know how I could to apply these features.

newDialog: function() {
     this.myDialog = new Dialog({
          width: 1000px;
          height: 700px;
          content: function() {
               return { template: myList }
          }
     });
}
this.newDialog.appedTo("#List")

I would appreciate any help.
Thank You.

5 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team May 24, 2021 07:55 AM UTC

Hi Alberto, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “I want to set the border of the dialog component and padding for the dialog content”. 
 
Your requirement can be achieved by adding the styles ‘border’ and ‘padding’ for the class ‘.e-dialog .e-dlg-content’ for dialog content and ‘.e-dialog.e-popup’ for the whole dialog component. We have prepared a shared sample for your reference, 
 
Code Snippet: 
 
<style> 
    .e-dialog .e-dlg-content { 
        padding: 20px; 
        border: 3px solid yellow; 
    } 
    .e-dialog.e-popup { 
        border: 3px solid red; 
        padding: 20px; 
    } 
</style> 
 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


AM Alberto Monteverdi May 25, 2021 01:42 AM UTC

Hi Revanth,
I tried your solution with the following result:


<style> 
    .e-dialog .e-dlg-content { 
        padding: 20px; ---> THIS DOESN'T WORKT
        border: 3px solid yellow; ---> THIS WORKS
    } 
    .e-dialog.e-popup { 
        border: 3px solid red; ---> THIS WORKS
        padding: 20px; --->THIS WORKS
    } 
</style>

I'm not able to set the padding of the content.
Any idea ?
Thank You for help.

RK Revanth Krishnan Syncfusion Team May 25, 2021 11:52 AM UTC

Hi Alberto, 
 
 
Good day to you. 
 
 
We have further validated your query and the padding not set to the content of the dialog can be resolved by adding the padding and border styles to the class ‘.e-dialog .e-dlg-header-content + .e-dlg-content’ instead of ‘.e-dialog .e-dlg-content’. We have modified the already shared sample for your reference, 
 
Code Snippet: 
 
<style> 
    .e-dialog .e-dlg-header-content + .e-dlg-content { 
        padding: 50px; 
        border: 3px solid yellow; 
    } 
    . . . 
</style> 
 
 
Please check the above code snippet and the sample and let us know if it resolves the issue. 
 
Regards, 
Revanth 


AM Alberto Monteverdi May 26, 2021 03:30 AM UTC

Hi Revanth,
I'm sorry but this way for me display neither the border nor the padding.
I have no header and no footer in the dialog, only the content in template
assigned to the dialog created dynamically.
I don't have: <ejs-dialog ... :content ...></ejs-dialog>
but instead:
newDialog: function() {
     this.myDialog = new Dialog({
          width: 1000px;
          height: 700px;
          content: function() {
               return { template: myList }
          }
     });
}
this.newDialog.appedTo("#List")

I don't know if it is pointless but it is so.
Kind Regards.

RK Revanth Krishnan Syncfusion Team May 26, 2021 12:20 PM UTC

Hi Alberto, 
 
 
We have further validated your query and your requirement to set the padding and the border to the dialog content when rendered dynamically can be achieved by setting the padding and border styles to the class ‘.e-dialog .e-dlg-content’, also the content inside the template can be customized using its own class. We have prepared a sample for your reference based on the shared code snippet, 
 
Code Snippet: 
 
<template> 
  <div> 
    <ejs-button id="modalBtn" v-on:click.native="btnClick" 
      >Open Dialog</ejs-button 
    > 
    <div 
      id="list" 
      class="control-section;" 
      style="height: 500px; position: relative" 
    ></div> 
  </div> 
</template> 
<style> 
/* This will set the padding and border for the dialog content wrapper element. */ 
.e-dialog .e-dlg-content { 
  padding: 100px; 
  border: 2px solid red; 
} 
 
/* This is to set the border for the contents in the template */ 
.dialogContent { 
  border: 2px solid yellow; 
} 
body { 
  height: 500px; 
} 
</style> 
<script> 
import Vue from "vue"; 
import { DialogPlugin } from "@syncfusion/ej2-vue-popups"; 
import { Dialog } from "@syncfusion/ej2-popups"; 
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 
 
Vue.use(DialogPlugin); 
Vue.use(ButtonPlugin); 
let myDialog; 
var contentTemplateVue = Vue.component("demo2", { 
  template: 
    '<div class="dialogContent"><div> <span class="dialogText">Greetings Nancy! When will you share me the source files of the project?</span></div></div>', 
  data() { 
    return { 
      data: {}, 
    }; 
  }, 
}); 
 
export default { 
  data: function () { 
    return {}; 
  }, 
  mounted: function () {}, 
  methods: { 
    btnClick: function () { 
      this.myDialog = new Dialog({ 
        width: "1000px", 
        height: "700px", 
        content: function () { 
          return { template: contentTemplateVue }; 
        }, 
      }); 
      this.myDialog.appendTo("#list"); 
    }, 
  }, 
}; 
</script> 
 
 
Please check the above code snippet and the sample and let us know if it resolves the issue. 
 
Regards, 
Revanth 


Marked as answer
Loader.
Up arrow icon