Difference in tab appearance between Bootstrap 4 and Bootstrap 5

[Dave]

On your Tab demo page for Bootstrap 4 (https://blazor.syncfusion.com/demos/tabs/default-functionalities?theme=bootstrap4) the selected tab is not underlined and the unselected tabs are underlined to create a proper visual appearance. When I look at the Bootstrap 5 demo page (https://blazor.syncfusion.com/demos/tabs/default-functionalities?theme=bootstrap5) all of the tabs are always not underlined. I found the same issue in my own program. Is there a way to get the tab underlining to work like the Bootstrap 4 version? Thank you.

[Nevitha Ravi]

Hi Dave, 

Greetings from Syncfusion support. 

The issue has been resolved in our volume 3 SP release. Could you please check this with latest version? 

Note: In demo also changes reflected, please check this once in private window. 

 

Regards, 

Nevitha 

[Dave]

Works now on Chrome, thanks. However in Safari I still see an issue. When the leftmost tab is selected it looks proper. However when I select a tab further to the right, the newly selected tab is underlined.

[Praveenkumar Narasimhanaidu]

Hi Dave, 

Thanks for your update. 

 

We have validated your reported problem in safari browser using browserstack and unfortunately, we were unable to replicate the issue at our end.  

Image 1: 

 

Image 2: 

 

If the issue persists still at your end, please share following details to further validate and provide you a prompt solution. 

• Issue replicating in our demo site itself or in your local sample?
• Share your synfusion package versions
• Share an image or video reference of the issue
• Browser version and machine details
• Share any issue replicating sample

Regards, 

Praveenkumar 

[Dave]

Using your demo site on an iPhone 7 and Safari browser. When the first tab is active (Twitter) it works properly: the selected tab is not underlined. When another tab is selected (Facebook) all tabs are underlined.

Attachment: IMG_3525_aa255f73.zip

[Satheesh Kumar Balasubramanian]

Hi Dave, 

  

Thanks for your update. 

  

We have validated your reported query "When another tab is selected (Facebook) all tabs are underlined" based on your shared details. We have checked the issue in iPhone 7 Safari browser on browserstack, since currently we do not have availability of mentioned iPhone device. But, we were unable to reproduce the reported issue at our end. Can you please share the below details to validate the issue further and provide solution at earliest? 

• Whether issue is not reproduced in other versions of iPhone?
• Could you replicate the issue in browserstack?
• Share safari browser version
  

 

 

Regards, 

Satheesh Kumar B 

[Dave]

The issue is reproduced on an iPhone 7, iPad 6th Gen, and iPad Air 4th Gen. All running iOS 14.8.1. My understanding is that Safari automatically updates to the version of the OS (i,e.,, Safari v 14 is on the devices). I don't have a browserstack account so will have to rely on your test results with that tool. 

[Satheesh Kumar Balasubramanian]

Hi Dave,

Thanks for your update.

We have validated your reported query "When another tab is selected (Facebook) all tabs are underlined" based on your shared details. We have checked the issue in iPad 6th Gen and iPad Air 4th Gen Safari browser on browserstack, since currently we do not have availability of mentioned iPhone and iPad device. But, we were unable to reproduce the reported issue at our end. We will probably receive the iPad device on Tuesday (November 30, 2021). We will ensure the link in iPad device and will update the further details on November 30, 2021.

Regards,

Satheesh Kumar B

[Dave]

Good news. Updating iOS to 15.0 appears to solve the problem. So Tabs should work correctly on fully updated devices.

[Nevitha Ravi]

Hi Dave, 

Thanks for your update. 

We are happy that your issue has been resolved. Please get back to us if you need further assistance. 

Regards, 

Nevitha