1. Home
  2. Forum
  3. Blazor
  4. Tabs placed inside splitter

Tabs placed inside splitter

Hello. I'm using the tabs component  with the overflow mode pop-up inside a splitter with 2 panels. For myexample the tabs are placed inside the right panel. Whenever I collapse the left panel the tabs still remain in the same state (by that I mean even though they have the space to fit them without overflow and pop-up they are displayed like they were before the collapse)
Hope this makes sense and is explicit enough. Would be nice if the tabs are displayed in full if they have enough space.
Looking forward to hearing from you.
Thanks,
Mihai

14 Replies
AK Alagumeena Kalaiselvan Syncfusion Team May 27, 2020 03:15 PM UTC

Hi Mihai, 

Thanks for contacting Syncfusion support. 

We have checked your reported case “Need to display Tab in full, if they have enough space” and we can replicate this issue at our end. So, we considered this as defect and logged the defect report for that which can be tracked from the below link. 

We will include this fix and it is available in our upcoming patch release which may Scheduled on second week of June, 2020. 

Regards 
Alagumeena.K 


AK Alagumeena Kalaiselvan Syncfusion Team June 10, 2020 02:48 PM UTC

Hi Mihai, 

Thanks for your patience. 

We are glad to announce that your reported issue has been fixed and included in weekly release version 18.1.0.56. So, we suggest you to update the NuGet packages to resolve this issue in your end. 

Kindly get back to us, if you need any further assistance. 

Regards 
Alagumeena.K 


MC Mihai Calugar June 23, 2020 08:56 AM UTC

Hello. I've updated the Syncfusion version on my project to version 18.1.0.58 and this bug is still reproducing. Not sure if there is something wrong that I am doing but no matter what action I perform on the splitter (resize or expand/collapse) the tabs remain in the same state. I've attached 2 images with the current behavior I have on my application.

Before collapse of the right panel:

Empty



After collapse of the right panel

Empty



AK Alagumeena Kalaiselvan Syncfusion Team June 24, 2020 09:43 AM UTC

Hi Mihai, 

Thanks for your update. 

We have validated your reported case with specified version 18.1.0.58 but the Tab state maintained properly while resizing, expanding and collapsing splitter panels. We suspect that you may not refresh the Tabs during splitter panes resizing, expanding and collapsing. So, please ensure whether you have refresh the Tab at sample end and refer the below code for that. 

<SfSplitter Height="200px" Width="800px"> 
    <SplitterEvents Collapsed="OnCollapsed" Expanded="OnExpanded" Resizing="OnResizing"></SplitterEvents> 
    <SplitterPanes> 
        <SplitterPane Size="600px"> 
            <ContentTemplate> 
                <SfTab @ref="TabObj" OverflowMode="OverflowMode.Popup"> 
                    <TabItems> 
                        <TabItem Content="HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language."> 
                            <ChildContent> 
                                <TabHeader Text="HTML"></TabHeader> 
                            </ChildContent> 
                         </TabItem> 
                        ... 
                    </TabItems> 
                </SfTab> 
            </ContentTemplate> 
        </SplitterPane> 
        <SplitterPane> 
            <ContentTemplate> 
                <div> 
                    <div class="content"> 
                        <h3 class="h3">Schedule </h3> 
                        The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently 
                    </div> 
                </div> 
            </ContentTemplate> 
        </SplitterPane> 
    </SplitterPanes> 
</SfSplitter> 
 
@code{ 
    SfTab TabObj; 
 
    private void OnExpanded(Syncfusion.Blazor.Layouts.ExpandedEventArgs args) 
    { 
        TabObj.Refresh();      // To Refresh Tab while expanding splitter pane  
    } 
 
    private void OnCollapsed(Syncfusion.Blazor.Layouts.ExpandedEventArgs args) 
    { 
        TabObj.Refresh();    // To Refresh Tab while collapsing splitter pane 
    } 
 
    private void OnResizing(Syncfusion.Blazor.Layouts.ResizingEventArgs args) 
    { 
        TabObj.Refresh();   // To Refresh Tab while resizing splitter pane 
    } 
} 

You can get the above sample using the following link. 

Kindly check with shared sample and get back to us, if this issue may still persist. 

Regards 
Alagumeena.K  


MC Mihai Calugar replied to Alagumeena Kalaiselvan July 6, 2020 09:44 AM UTC

Hi Mihai, 

Thanks for your update. 

We have validated your reported case with specified version 18.1.0.58 but the Tab state maintained properly while resizing, expanding and collapsing splitter panels. We suspect that you may not refresh the Tabs during splitter panes resizing, expanding and collapsing. So, please ensure whether you have refresh the Tab at sample end and refer the below code for that. 

<SfSplitter Height="200px" Width="800px"> 
    <SplitterEvents Collapsed="OnCollapsed" Expanded="OnExpanded" Resizing="OnResizing"></SplitterEvents> 
    <SplitterPanes> 
        <SplitterPane Size="600px"> 
            <ContentTemplate> 
                <SfTab @ref="TabObj" OverflowMode="OverflowMode.Popup"> 
                    <TabItems> 
                        <TabItem Content="HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology, used by most websites to create visually engaging web pages, user interfaces for web applications, and user interfaces for many mobile applications.[1] Web browsers can read HTML files and render them into visible or audible web pages. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language."> 
                            <ChildContent> 
                                <TabHeader Text="HTML"></TabHeader> 
                            </ChildContent> 
                         </TabItem> 
                        ... 
                    </TabItems> 
                </SfTab> 
            </ContentTemplate> 
        </SplitterPane> 
        <SplitterPane> 
            <ContentTemplate> 
                <div> 
                    <div class="content"> 
                        <h3 class="h3">Schedule </h3> 
                        The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently 
                    </div> 
                </div> 
            </ContentTemplate> 
        </SplitterPane> 
    </SplitterPanes> 
</SfSplitter> 
 
@code{ 
    SfTab TabObj; 
 
    private void OnExpanded(Syncfusion.Blazor.Layouts.ExpandedEventArgs args) 
    { 
        TabObj.Refresh();      // To Refresh Tab while expanding splitter pane  
    } 
 
    private void OnCollapsed(Syncfusion.Blazor.Layouts.ExpandedEventArgs args) 
    { 
        TabObj.Refresh();    // To Refresh Tab while collapsing splitter pane 
    } 
 
    private void OnResizing(Syncfusion.Blazor.Layouts.ResizingEventArgs args) 
    { 
        TabObj.Refresh();   // To Refresh Tab while resizing splitter pane 
    } 
} 

You can get the above sample using the following link. 

Kindly check with shared sample and get back to us, if this issue may still persist. 

Regards 
Alagumeena.K  


Hello. 
The solution mentioned worked for one case but there still is a problem when selecting a tab which is placed in the pop-up overflow. I'll attach an archive with a video of the behavior which is not working.

Looking forward to hearing from you.
Thanks,
Mihai

Attachment: ScreenRecorderProject3_afa50f3e.7z

AK Alagumeena Kalaiselvan Syncfusion Team July 7, 2020 01:36 PM UTC

Hi Mihai, 
 
Sorry for the inconvenience caused. 
 
We have checked your reported issue with shared video demo and we could replicate the Tab layout issue at our end. So, we considered this as defect and logged the defect report for that. Also, you can track the issue status by the following link. 
 
We will fix and ensure with possible cases to avoid this kind of inconvenience in future and it will be available in our upcoming patch release on 2nd week of July, 2020. 
 
Regards 
Alagumeena.K 


NC Nicu Comiati July 13, 2020 12:19 PM UTC

Hi!

I am working with Mihai on the same project. We have been using this fix for some time now but we recently upgraded to v18.2.0.44 and we noticed that adding the Collapsed and Expanded events triggers a weird bug. When we collapse a panel, it keeps collapsing and expanding indefinitely. The callback method also keeps being called over and over again. 
Is this a bug on the new version or are we doing something wrong? The example is the same one that you provided here.

Regards,
Nicu

Attachment: 20200713_151634_8a15b05b.zip

AK Alagumeena Kalaiselvan Syncfusion Team July 14, 2020 01:53 PM UTC

Hi Nicu,  
  
Good day to you,  
  
We have validated the reported query. We have tried to replicate the issue and unfortunately we couldn’t reproduce the reported issue as reported in the video demo. We have ensured the issue with the last shared sample using the latest version 18.2.44.

Video Demo: https://www.syncfusion.com/downloads/support/forum/154606/ze/SFSPLI~1-974994469  
  
  
Also, we suspect that the problem occurs due to the following cases.   
    
  
Also, could you please ensure the problem after clearing the browser/NuGet cache or run the application using incognito window of the browser.     
  
Can you please check the above solutions and let us know if you face any difficulties. 
 
Regards 
Alagumeena.K 


NC Nicu Comiati July 15, 2020 10:04 AM UTC

Hi,

We discovered that this bug was an issue on our end and managed to solve it with the help you provided.
Thank you for the help!

VM Vengatesh Maniraj Syncfusion Team replied to Alagumeena Kalaiselvan July 15, 2020 11:28 AM UTC

Hi Mihai, 
 
Sorry for the inconvenience caused. 
 
We have checked your reported issue with shared video demo and we could replicate the Tab layout issue at our end. So, we considered this as defect and logged the defect report for that. Also, you can track the issue status by the following link. 
 
We will fix and ensure with possible cases to avoid this kind of inconvenience in future and it will be available in our upcoming patch release on 2nd week of July, 2020. 
 
Regards 
Alagumeena.K 


Hi Mihai,

 

We are glad to announce that our latest weekly release in the version 18.2.0.45 has been rolled out successfully. In that release, we have fixed the reported issue.  So, we suggest you upgrade our Syncfusion packages to avail of the fix in your end.

 

Please find the links below.

 

NuGet Link: https://www.nuget.org/packages/Syncfusion.Blazor/18.2.0.45

Release notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.45/?type=all#tabs

Feedback: https://www.syncfusion.com/feedback/15816/tab-items-not-properly-shown-when-selecting-a-tab-from-popup-container-which-is

 

Kindly get back to us if you need any further assistance.

 

Regards,

Vengatesh 


NC Nicu Comiati July 15, 2020 12:52 PM UTC

Hi,

Unfortunately this is still reproducing but I found out the issue. Sorry for the false response, I forgot to check all the cases in our app.
The issue does not reproduce in the sample you provided but in our app we set initial collapsed and expanded states for the SplitterPane components.
You should be able to reproduce the bug if you add "Collapsed=false" to each SplitterPane.
Sorry again for the inconvenience.

Regards,
Nicu

AK Alagumeena Kalaiselvan Syncfusion Team July 16, 2020 12:55 PM UTC

Hi Nicu, 

Thanks for your update. 

We have further validated on the reported query and have considered “Splitter bars are flickering after the Collapse/Expand action” as a bug from our end and logged the report for the same. Also, the fix will be included with our weekly patch release which is Scheduled on 28th July 2020. 

You can track the current status of the report, review the proposed resolution timeline and contact us for any further inquiries through this below feedback link. 

Regards 
Alagumeena.K 


NC Nicu Comiati August 10, 2020 09:04 AM UTC

Hello,

Is this going to be fixed? We are still experiencing this issue.

Thanks,
Nicu

VM Vengatesh Maniraj Syncfusion Team August 11, 2020 12:20 PM UTC

Hi Nicu, 

We have validated the reported problem on our source level. Since the Collapsed property in SfSplitter is two-way binding, the reported issue occurs. We suggest you bind the property as @bind-collapsed to resolve the reported issue.  
  
<SfSplitter>  
    <SplitterPanes>  
        <SplitterPane Collapsible="true" @bind-Collapsed = "collapsed">  
        </SplitterPane>  
    </SplitterPanes>  
</SfSplitter>  
@code {  
  private bool collapsed { get; set; } = false;  
}  


Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Vengatesh  


Loader.
Up arrow icon