Layout issues when setting tabs to be on the left ( HeaderPlacement="HeaderPosition.Left")

Question

Hi,When i set the tab headers to be on the left it messes up the layout of everything in each tab.So if you put the Counter component in a tab and set HeaderPlacement="HeaderPosition.Left" it comes out like this.But if you set the tabs to be on top then it comes out correctly like this. This also goes down the render tree into other nested tab components.It seems as if display: flex is applied. But also other css that renders incorrectly.

Satheesh Kumar Balasubramanian · Accepted Answer

Hi Fergus, 

  

Thanks for your update. 

  

We have validated your reported problem and suggest you to use below CSS for aligning the RTE content. We have prepared a sample for your reference which can be downloaded from the following link. 





Code snippet:  










    .e-richtexteditor .e-rte-content .e-content, .e-richtexteditor .e-source-content .e-content { 

        display: block !important; 
    } 
  



Sample: https://www.syncfusion.com/downloads/support/forum/159210/ze/Blazor_sample-1258052692 

  




Kindly try the above solution and let us know if you need further assistance. 
  


Regards, 

Satheesh Kumar B

Balasubramanian Sattanathan · Answer

Hi Fergus, 

Greetings from Syncfusion Support. 

We have analyzed your reported problem and let you know that the problem has been occurred due to the overridden CSS. So we would suggest you to use the below CSS. We have prepared a sample for your reference that can be downloaded from the below link. 





.e-tab.e-vertical-tab .e-content .e-item.e-active { 
    display: block !important; 
} 

Sample: https://www.syncfusion.com/downloads/support/forum/159210/ze/Blazor_sample(headerPlacement)-2078622361.zip 

Kindly try the above solution and let us know if you need further assistance. 

Regards, 
Balasubramanian S

Fergus · Answer

Hi,That css worked for the counter component. But if there is a Rich Text Editor nested in the tab then the content from that  is aligned horizontally as per screenshot below. When it should be like the image at the bottom. Also the rich text editor is in a sftab with the tabs at the top which is nested inside the sftab with tabs on left. And it still comes out wrong. Thanks