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

[Emanuele]

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]

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. 

 

Sample: https://stackblitz.com/edit/angular-nrsrt8-eptmzr?file=app.component.html 

 

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]

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]

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.

Demo: https://stackblitz.com/edit/angular-nrsrt8-3rrbv8?file=app.component.html 

 

2. Set a static height to the child Tab component.

Demo: https://stackblitz.com/edit/angular-nrsrt8-dxozwl?file=lefttab.component.ts 

 

3. Set the heightAdjustMode property as content, so that the Tab adjusts according to the Listview and the Splitter adjusts according to the Tab.

Demo: https://stackblitz.com/edit/angular-nrsrt8-szfpew?file=app.component.html 

 

Please check the above details and let us know if you need any further assistance. 

 

Regards, 

Arun P. 

[Emanuele]

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.

Demo: https://stackblitz.com/edit/angular-nrsrt8-3rrbv8?file=app.component.html 

 

2. Set a static height to the child Tab component.

Demo: https://stackblitz.com/edit/angular-nrsrt8-dxozwl?file=lefttab.component.ts 

 

3. Set the heightAdjustMode property as content, so that the Tab adjusts according to the Listview and the Splitter adjusts according to the Tab.

Demo: https://stackblitz.com/edit/angular-nrsrt8-szfpew?file=app.component.html 

 

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]

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 Angela]

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]

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.  

Window scroll: https://stackblitz.com/edit/angular-nrsrt8-kuyrxc?file=applist.component.ts 

This is the basic architecture listview virtualization.  

You can read more about architecture in the below thread.  

https://www.syncfusion.com/feedback/7313/allow-listview-virtualization-to-work-with-ancestor-container-scrolling 

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.  

Sample: https://stackblitz.com/edit/angular-nrsrt8-yipgyh?file=applist.component.ts (Please open in new window) 

Please let us know if you have any concerns. 

Regards, 

Hareesh 

[adrian garcia]

hi fabio i like your template.
i have gps company too on Mexico.

you can showme you template?