We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dashboard layout is not responsive

Thread ID:

Created:

Updated:

Platform:

Replies:

148712 Oct 31,2019 10:15 AM UTC Nov 6,2019 11:44 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DashboardLayout
Htet Lin
Asked On October 31, 2019 10:15 AM UTC

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 [Syncfusion]
Replied On November 1, 2019 10:07 AM UTC

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. 
 
 
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
Replied On November 4, 2019 09:03 AM UTC

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 [Syncfusion]
Replied On November 5, 2019 10:59 AM UTC

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. 
 
 
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
Replied On November 6, 2019 07:27 AM UTC

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 [Syncfusion]
Replied On November 6, 2019 11:44 AM UTC

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. 
 
Please let us know, if you need further assistance. 
 
 
Regards, 
Keerthana 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon