Frame not updating when AccordionItem it updated

Hello,

I am having an issue with the frame not working when the AccordionItem is updated. I have an accordion filled with sfListViews. There is a frame surrounding each listview to make the corners round. When an item gets deleted out of the listView, the listview height is updated correctly with a converter, but the bottom of the frame seems to disappear. When I hot reload, it fixes the frame.

Things that I have tried/ruled out.
1. It is not the accordionItem underneath it that is affecting it.
2. It is not the layout it is inside that is affecting it.
3. I have tried dynamically setting the height of the frame with a converter. This does not work, it still drops the bottom off.
4. I have tried setting a constant height for the frame. The frame will stay the same height and look correct, but I need the height to dynamically change according to the height of the listview.

I have included pictures of before and after deleting an item in the accordionItems sflistview. The bordercolor is set to blue to more easily see the frame.

Thanks

Attachment: FrameIssue_efe205a1.zip

1 Reply

LN Lakshmi Natarajan Syncfusion Team February 15, 2021 06:55 PM UTC

Hi Spencer, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “Frame not updating when AccordionItem it updated” from our side. We would like to inform you that you can achieve your requirement by adding Grid as parent with RowDefinition as Auto to resize the SfBorder or Frame. We have prepared a sample to achieve your requirement and you can download from the following link, 
 
Load Grid in the Accordion.Content with RowDefinition as Auto to resize based on the collection updates. 
<syncfusion:SfAccordion x:Name="OuterAccordion" ExpandMode="SingleOrNone" DynamicSizeMode="Content" Margin="5" BindableLayout.ItemsSource="{Binding Info}"> 
    <BindableLayout.ItemTemplate> 
        <DataTemplate> 
            <syncfusion:AccordionItem x:Name="AccordionItem"> 
                <syncfusion:AccordionItem.Header> 
                    <Grid HeightRequest="50" RowSpacing="0"> 
                        <Label Text="{Binding Name}" VerticalOptions="Center" HorizontalOptions="StartAndExpand"/> 
                    </Grid> 
                </syncfusion:AccordionItem.Header> 
                <syncfusion:AccordionItem.Content> 
                <Grid RowDefinitions="Auto"> 
                    <border:SfBorder BorderColor="Blue" CornerRadius="5" BorderWidth="2"> 
                        <--sflistview--> 
                    </border:SfBorder> 
                   </Grid> 
                </syncfusion:AccordionItem.Content> 
            </syncfusion:AccordionItem> 
        </DataTemplate> 
    </BindableLayout.ItemTemplate> 
</syncfusion:SfAccordion> 
 
Also, you can manually add border for the SfListView by customizing the Margin. Please refer to the following code snippets for more reference, 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarajan 
 


Loader.
Up arrow icon