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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Fill the content panel height, with the dynamic list view component

Thread ID:

Created:

Updated:

Platform:

Replies:

146328 Jul 31,2019 02:07 PM UTC Feb 21,2020 07:47 PM UTC Angular - EJ 2 8
loading
Tags: Tab
Emanuele
Asked On July 31, 2019 02:07 PM UTC

As can be seen from the title I have a problem with the height of the child ListView component respect to the parent Tab component. I find myself having the listview smaller than the tab panel. I used the heightAdjustMode property (as logical as it is) but I didn't get positive results, so I was wondering if there was a solution that didn't involve inheriting a property from the child by the parent.

I thank you already now,

Emanuele

Arun Palaniyandi [Syncfusion]
Replied On August 1, 2019 10:00 AM UTC

Hi Emanuele, 
 
Greetings from Syncfusion.  
 
 
Based on your scenario we have tried to replicate this issue, but we are unable to replicate it. We have checked our Tab by setting the heightAdjustMode property also ,but still no issues. The dynamically loaded list view fills the total height of the Tab with no problem and it also loaded in the initial render too. We suggest also suggest you to set heightAdjustMode as auto. 
 
 
Hence we suggest you to share you the below details to validate further from our side. 
  1. If possible please share your code snippets ?
  2. Check whether you faced any consoled errors. If so please share the details.
  3. Share us the issue reproducing image or video.
 
 
Please let us know if you need further assistance. 
 
Regards, 
Arun P. 


Emanuele
Replied On August 2, 2019 09:07 AM UTC


Good morning below I report the various code parties related to my problem.

CODE:
-app.html-
<div id="mainLayout"> <ejs-splitter #splitterInstance (created)='onCreated()' width='100%' enablePersistence="true"> <e-panes> <e-pane left_region size="20%"> <ng-template #content> <div class="content"> <app-left-tab></app-left-tab> </div> </ng-template> </e-pane> .... </ejs-splitter> </div>

-app.scss-

div[region="left"] {
  background:blue;
}

div[right_region] {
  background: blue;
}

#mainLayout {
  height: calc(100vh - 50px);
}

app-header{
  height: 50px;
}

.vertical_splitter.e-splitter.e-splitter-vertical {
  border:none;
}

-left-tab.html-
<ejs-tab id="element" heightAdjustMode='Auto' overflowMode='Popup' width='auto'> <ejs-tab id="element"> <e-tabitems> <e-tabitem [header]='headerText[0]'> <ng-template #content> <app-vehicle-list></app-vehicle-list> </ng-template> </e-tabitem>
....

-vehicle-list.htm-
ejs-listview id='List' [dataSource]='vehicles | async' [template]='win_template' [showHeader]='true' [enableVirtualization]='true' class="e-list-template" (select)="onItemSelected($event)"> <ng-template #win_template let-dataSource=""> <div class="e-list-wrapper"> <div class="e-card"> <div class="e-card-header"> <div class="e-card-header-image"><img src="{{getVehicleIcon(dataSource)}}" /></div> <div class="e-card-header-caption"> <div class="e-card-header-title">{{dataSource.Name}}</div> <div class="e-card-header-sub-title">{{dataSource.Plate}}</div> </div> </div> <div class="e-card-content">{{dataSource.Plate}}</div> </div> </div> </ng-template> </ejs-listview>

-vehicle-list.scss-
@import "../../theme-base.scss";

.e-list-wrapper {
   .e-card {
      .e-card-header {
         padding: 2px;

         .e-card-header-image {
            height: 48px;
            width: 48px;

            img {
               height: inherit;
               width: inherit;
            }
         }
      }
   }

   .e-active & {
      background-color: $selectionColor;
   }
}


Arun Palaniyandi [Syncfusion]
Replied On August 6, 2019 12:27 PM UTC

Hi Emanuele,  

Thanks for your update. 

We have prepared a sample based on your shared code snippets, and we can see that the Listview is not fully shown inside the Tab. Hence we suspect that this issue due to the Splitter does not have any static height as its child components are rendered in them. We have three possibility to overcome this issue. 

  1. Set a static height to the parent splitter component.
 
  1. Set a static height to the child Tab component.
 
  1. Set the heightAdjustMode property as content, so that the Tab adjusts according to the Listview and the Splitter adjusts according to the Tab.
 
Please check the above details and let us know if you need any further assistance. 
 
Regards, 
Arun P. 


Emanuele
Replied On August 27, 2019 09:39 AM UTC

Hi Emanuele,  

Thanks for your update. 

We have prepared a sample based on your shared code snippets, and we can see that the Listview is not fully shown inside the Tab. Hence we suspect that this issue due to the Splitter does not have any static height as its child components are rendered in them. We have three possibility to overcome this issue. 

  1. Set a static height to the parent splitter component.
 
  1. Set a static height to the child Tab component.
 
  1. Set the heightAdjustMode property as content, so that the Tab adjusts according to the Listview and the Splitter adjusts according to the Tab.
 
Please check the above details and let us know if you need any further assistance. 
 
Regards, 
Arun P. 


Hi, I tested all three methods and the only "working" method is to statically set the height, but the problem is that I have a dynamic load and therefore unusable. Can you help me?

Hareesh Balasubramanian [Syncfusion]
Replied On August 28, 2019 12:43 PM UTC

Hi Emanuele,  
  
Thanks for your update.    
  
We are regret for inconvenienced cause, we could not able to understand your requirement clearly in last post update. Kindly share us more details based on your requirement like demo images/video or issue reproducing sample with clear steps. We are awaiting to help you better service at our end. 
 
Regards, 
Hareesh 


Fabio
Replied On August 28, 2019 04:53 PM UTC

Let me chime in to give some more information (we work togheter)

we have a list that need virtualization (this is maybe the key aspect that wasn't clear just by the question but was evident in the code (enableVirtualization) )

But let me try to explain our needs:

We need to create a SPA where we want a virtualized list to be on the left side, inside a nested splitter
This is our required layout



The list we are talking about is the one on the left containing a list of cards.

Since we may have lot of items, we want that list to be virtualized.
The problem is that if we don't specify an explicit height for the listview, the listview fill correctly the splitter, but if you scroll items, you'll soon find that the virtualization fails, see below:



We can't/don't want to specify static heights of elements because it depends on the browser size and layout management will be complicated because we have other components that take space and so the list height would be a formula that would take into considerations other components

So the question is: how can we have a list that fill into a splitter and works with virtualization too?
We are in the process of evaluating your control suite so this is very important for us

Thanks
Fabio

Hareesh Balasubramanian [Syncfusion]
Replied On September 4, 2019 05:17 PM UTC

Hi Emanuele, 

Thanks for being patience. 

Listview virtualization is completely based on listening to the ‘scroll’ event of the Listview element or the window scroll event.  
If we set height to Listview, it will listen to its element scroll event and virtualization will happen from there.  

If you don’t set the height, then listview will listen to the window scroll event.  

This is the basic architecture listview virtualization.  
You can read more about architecture in the below thread.  

But we can solve this using assigning height using “vh” using which is % relative height to viewport. In the below sample we have set the Listview to “90vh” height and update the computed height in “actionBegin” event. Now we don’t have to set a static height instead it will be 90% to the viewport.  

Please let us know if you have any concerns. 

Regards, 
Hareesh 


adrian garcia
Replied On February 21, 2020 07:47 PM UTC

hi fabio i like your template.
i have gps company too on Mexico.
you can showme you template?



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