Dashboard layout is not responsive

[Htet Lin]

I am using <ejs-dashboardlayout> and  <e-content-template >. Please help me to check my codes. when i run my page is not responsive thanks.

 <div class=" control-section">

          <ejs-dashboardlayout id="HeaderLayout" columns="12" allowResizing="false"  >

            <e-content-template >

                <div  class="e-panel" data-row="0" data-col="0" data-sizeX="3" data-sizeY="1">

                    <div class="e-panel-container">

                        <div id="Inpatient">

                            <page id="Title">IN PATIENTS</page>

                            <br />

                            <span>@Html.Raw(ViewBag.InPatient)</span>

                            <br />

                            <mat-icon _ngcontent-c21="" id="icon" class="large material-icons" role="img" aria-hidden="true">local_hotel</mat-icon>

                        </div>

                    </div>

                </div>

            </e-content-template>

            <e-content-template>

                <div class="e-panel" data-row="0" data-col="3" data-sizeX="3" data-sizeY="1">

                    <div class="e-panel-container">

                        <div id="ADMISSIONS">

                            <page id="Title">

                                ADMISSIONS

                            </page>

                            <br />

                            <span><span>@Html.Raw(ViewBag.Admissions)</span></span>

                        </div>

                        <div id="DISCHARGES">

                            <page id="Title">

                                DISCHARGES

                            </page>

                            <br />

                            <span><span>@Html.Raw(ViewBag.Discharges)</span></span>

                        </div>

                    </div>

                </div>

            </e-content-template>

            <e-content-template>

                <div  class="e-panel" data-row="0" data-col="6" data-sizeX="3" data-sizeY="1">

                    <div class="e-panel-container">

                        <div id="subactute">

                            <page id="Title">SUB ACUTE</page>

                            <br />

                            <span><span>@Html.Raw(ViewBag.SubAcute)</span></span>

                            <br />

                            <mat-icon _ngcontent-c21="" id="icon" class="mat-icon material-icons" role="img" aria-hidden="true">local_hospital</mat-icon>

                        </div>

                    </div>

                </div>

            </e-content-template>

            <e-content-template>

                <div class="e-panel" data-row="0" data-col="9" data-sizeX="3" data-sizeY="1">

                    <div class="e-panel-container">

                        <div id="mdro">

                            <page id="Title">MDRO</page>

                            <br />

                            <span><span>@Html.Raw(ViewBag.Mdro)</span></span>

                            <br />

                            <mat-icon _ngcontent-c21="" class="mat-icon material-icons" id="icon" role="img" aria-hidden="true">security</mat-icon>

                        </div>

                    </div>

                </div>

            </e-content-template>

        </ejs-dashboardlayout>

   </div>

<style>

 #HeaderLayout .e-panel .e-panel-container {

            vertical-align: middle;

            font-weight: 400;

            font-size: 15px;

            text-align: justify;

            text-align: center;                    

            color:ghostwhite;

            /*padding:10px;*/

            border-radius:5px;

            

        }

     #Inpatient{

            

            font-weight: 400;

            font-size: 18px;

            text-align: center;

            vertical-align: middle;               

            background: rgb(2, 136, 209);

            color:ghostwhite;          

            border-radius:5px;   

            height:100%;

        }

      #subactute{

            

            font-weight: 400;

            font-size: 18px;

            text-align: center;

            vertical-align: middle;               

            background: rgb(0, 96, 100);

            color:ghostwhite;          

            border-radius:5px;   

            height:100%;

        }

 #mdro{

            

            font-weight: 400;

            font-size: 18px;

            text-align: center;

            vertical-align: middle;               

            background: rgb(93, 64, 55);

            color:ghostwhite;          

            border-radius:5px;   

           height:100%;

        }

     #ADMISSIONS{

           font-size: 18px;

           color: white;

           border-bottom: rgb(74, 20, 140);

           background-color: rgb(74, 20, 140);

           border-radius:5px;

          

           text-align: center;

           width:50%;

           height:100%;

           float:left;

           border-radius:5px;

           display: inline-block;

            max-width: 250px;

            padding: 30px;

            word-break: break-all; 

            

        }

       #DISCHARGES{

           font-size: 18px;

           color: white;

           border-bottom: rgb(56, 142, 60);

           background-color: rgb(56, 142, 60);

           border-radius:5px;         

           text-align: center;          

            height:100%;

           border-radius:5px;           

           padding: 30px;

           word-break: break-all; 

           

        }

   #icon

        {           

            font-size: 55px;

            width:100%;

            height:100%;   

            

        }

</style>

[Keerthana Rajendran]

Hi Lin, 

 

Good day to you. 

 

We have checked your reported query that, page is not responsive. We suspect that your requirement is, the div element is not adapted to the dashboard layout panel. We have checked your attached code block; in that you had set font-size for div element in pixel. We suggest you to set the CSS style in percentage or use the responsive CSS styles rather than pixel.  

 

For your reference, we have prepared a sample. Refer the sample link below. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication2-1930680838.zip 

 

 

If we misunderstood your requirement, can you please share the additional details regarding your requirement it will helpful for us to resolve your issue at earlier. 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana. 

 

[Htet Lin]

Thanks for your reply.

I am modified my codes with  reference your simple code.

But still is not responsive.

I share my source codes.Please help me to check.

I also want to know what difference between e-content-template and e-dashboardlayout-panels .Thanks.

Regards,

Htet Lin

Attachment: Testing_Application_1_b8ca1a32.rar

[Keerthana Rajendran]

Hi Lin, 

 

Good day to you 

 

Query 1 – Panel is not responsive. 

 

We have checked your attached sample. We have sorted out the issue. In Index.cshtml page, dashboard layout component is not referred properly in your shared sample. Refer the below code snippet to render the dashboard layout. 

 

  <ejs-dashboardlayout id="defaultLayout" columns="5" created="onCreated"> 

        <e-content-template> 

            <div id="one" class="e-panel" data-row="0" data-col="0" data-sizeX="5" data-sizeY="1"> 

                <span id="close" class="e-template-icon e-clear-icon"></span> 

                <div class="e-panel-container"> 

                    <div id="line" style="width:100%;height:100%"> 

                        <ejs-chart id="lineContainer" title="Inflation Rate in Percentage" width="100%" height="100%"> 

                        </ejs-chart> 

                    </div> 

                </div> 

            </div> 

        </e-content-template> 

    </ejs-dashboardlayout> 

 

You are using local data source for grid component, so we were unable to run the attached sample. For your reference, we have prepared a simple sample. In that sample, we have rendered chart component inside the dashboard layout panel using both e-content-template and e-dashboardlayout-panels. 

 

Refer the sample link below: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1344247866.zip 

 

Query 2 – Difference between e-content-template and e-dashboardlayout-panels. 

 

e-dashboardlayout-panels: 

 

Using e-dashboardlayout-panels, tab will allow to define the panel properties through this tag and generate the panel elements dynamically and place then within the layout based on the provided panel properties (row,col, sizeX, sizeY).  

 

e-content-template: 

 

Whereas using content template, the panels will be sorted out from the child content placed within the content template, using the e-panel class and the panel properties will be obtained from the data attributes been added to these panel elements. Here this child element will act as panel element and the content and header templates of these panels will be sorted using the elements containing the e-panel-header and e-panel-content classes within each panel element 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana 

[Htet Lin]

Thank for your reply.

In my simple codes ,Please help me to check  Views>DashBoard>Index.cshtml.

That page i already applied Dashboard layout.

Best Regards,

Htet Lin

[Keerthana Rajendran]

Hi Lin,  

 

Good day to you.  

 

We have checked your Index.cshtml file and sorted out the issue, in that page you have render two dashboard layout. In first dashboard layout, it is not necessary to define each content-template tag for each panel. Since single content-template tag is enough for dashboard layout component to render multiple panels. 

 

Refer the below code snippet. 

 

<ejs-dashboardlayout id="HeaderLayout" columns="12" allowResizing="false">   

  <e-content-template> 

        <div class="e-panel" data-row="0" data-col="0" data-sizeX="3" data-sizeY="1"> 

            <div class="e-panel-container"> 

                <div id="Inpatient"> 

                    <page id="Title">IN PATIENTS</page> 

                    <br /> 

                    <br /> 

                    <mat-icon _ngcontent-c21="" id="icon" class="large material-icons" role="img" aria-hidden="true">local_hotel</mat-icon> 

                </div> 

            </div> 

        </div> 

  .   .   .   .  . . 

    </e-content-template> 

</ejs-dashboardlayout> 

 

In second dashboard layout, dashboard layout panel element and its property (sizeX, sizeY, row, col) is not specified. So, the error occurs because it doesn’t create a dashboard layout panel. If you are using e-content-template, it is mandatory to refresh the inner components (like chart) during created() event for dashboard layout. Or else you have use e-dashboard-panels property to define the panels and its inner components. In that case, there is no need for calling the refresh() method. 

 

Refer the below code snippet for e-content-template. 

<ejs-dashboardlayout id="DetailLayout" columns="5" allowResizing="false" created="onCreated"> 

    <e-content-template> 

        <div class="e-panel" data-row="0" data-col="0" data-sizeX="3" data-sizeY="1"> 

            <div class="e-panel-container"> 

                <ejs-chart id="lineContainer" title="Inflation Rate in Percentage" width="100%" height="100%"> 

            .  .   .  .  .  .  

                </ejs-chart> 

                </div> 

            </div> 

    </e-content-template> 

</ejs-dashboardlayout> 

 

Refer the code snippet for e-dashboardlayout-panels. Inside the content div you have to render the chart component. 

<ejs-dashboardlayout id="DetailLayout1" columns="5" allowResizing="false" created="onCreated"> 

    <e-dashboardlayout-panels> 

        <e-dashboardlayout-panel row="0" col="0" sizeX="3" sizeY="2" content="#line"> 

        </e-dashboardlayout-panel> 

    </e-dashboardlayout-panels> 

</ejs-dashboardlayout> 

<div id="line"> 

    <ejs-chart id="lineContainer1" title="Inflation Rate in Percentage" width="100%" height="100%"> 

     .  .  .   .  . 

    </ejs-chart> 

</div> 

 

For your reference, we have prepared a sample based on your index page. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication2123038999.zip 

 

Please let us know, if you need further assistance. 

 

 

Regards, 

Keerthana