This is a migrated thread and some comments may be shown as answers.

Want to add a button inline with the kendo tab

3 Answers 493 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Sonali
Top achievements
Rank 1
Veteran
Sonali asked on 19 May 2020, 07:07 AM

I have created a kendo tabstrip with 2 tabs. I want to add buttons inline with the tabs and to their extreme right. I have attached a screenshot of the functionality I want to achieve.

I tried using the css display:flex property, but the buttons are still not in line with the tabs.

3 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 20 May 2020, 05:30 PM

Hello Sonali,

The TabStrip does not support custom buttons, so a possible approach to add such would be appending them with jQuery: https://dojo.telerik.com/iZEZIZUX

Note that modifying the Html structure of the widgets like this is not recommended. The TabStrip hasn't been tested in such scenarios, so it could lead to potential glitches and/or unexpected behavior in certain cases.

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Sonali
Top achievements
Rank 1
Veteran
answered on 21 May 2020, 12:41 PM

Hi Ivan

The method which you are using is actually appending the buttons to the k-tabstrip-items. I don't want this. I just want to show those buttons in the same line where the tab name appears, and even if I collapse the tabs, these buttons should not shift towards the side of the tab name.

I was thinking if we can reduce the size of just the tab name container, then there won't be any conflict in creating any buttons there in the same line.

0
Ivan Danchev
Telerik team
answered on 22 May 2020, 02:18 PM

Hi Sonali,

If you don't want to append the buttons to the TabStrip, consider wrapping the TabStrip in a container (a div element) and positioning the buttons within that div through CSS so that they are displayed over the TabStrip. This way they would appear over the TabStrip, without being part of its Html structure.

Regards,
Ivan Danchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TabStrip
Asked by
Sonali
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Sonali
Top achievements
Rank 1
Veteran
Share this question
or