[Bug] ContentHtmlAttributes for TabStrip

1 Answer 80 Views
TabStrip
Nils
Top achievements
Rank 1
Veteran
Iron
Nils asked on 28 Feb 2022, 02:25 PM

Hey guys,

I got the problem that "ContentHtmlAttributes" are not applied when loading with "LoadContentFrom".

Same problem as in this thread, but that one is old and was posted in community forum. 

 

My TabStrip:

@(Html.Kendo().TabStrip()
	  .Name("tabStripNav")
	  .Items(x =>
	  {
		  x.Add()
		   .Text("Header 1")
		   .ContentHtmlAttributes(new { style = "background-color: red !important;" })
		   .LoadContentFrom("Action1", "Controller", new{itemId = Model.Id});
		  x.Add()
		   .Text("Header 2")
		   .LoadContentFrom("Action2", "Controller", new{itemId = Model.Id});
		  x.Add()
		   .Text("Header 3")
		   .LoadContentFrom("Action3", "Controller", new{itemId = Model.Id});
	  })
	)

Am I doing anything wrong here?

Best regards

Nils

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 03 Mar 2022, 11:02 AM

Hello Nils,

 

Thank you for writing to us.

Yeah, I am afraid this property is only supported when the .Content() approach is used. The same is true for the Menu component as well:
https://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/NavigationItemBuilder#contenthtmlattributessystemobject

The styling you would like to apply can also be done with regular CSS rules as a workaround:

new { style = "background-color: red !important;" }
If you share more context about the specific scenario, I can help you prepare an actual sample.

 

Regards,
Eyup
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nils
Top achievements
Rank 1
Veteran
Iron
commented on 04 Mar 2022, 11:06 AM

Hey Eyup,

thanks for the response, to bad its not supported.


What i'm trying to accomplish is, to give every tab a different fixed height.

My original problem is that the website shrinks while switching tabs, thus scrolling towards the top and back down again when the loading of the contents finishes.

For example, my entire website has a height of 3000px. 2000px come from the content of the tab. When lazy-loading the content of the tabs, the old content disappears, decreasing the total height of the website to just 1000px. But since the website is now smaller than he screen, it scrolls towards the top. When the ajax call finishes and the new content is being displayed, it scrolls back down again. I want to prevent the scrolling around by setting a fixed height for each of the tabs.

Do you know a better solution to this problem?

Regards,

Nils

Eyup
Telerik team
commented on 09 Mar 2022, 09:16 AM

Hi Nils,

As per this description, wouldn't the CSS min-height property work perfectly for this case?
https://www.w3schools.com/cssref/pr_dim_min-height.asp

An alternative idea would be to use either .Events(e=>e.ContentLoad()) event of the TabStrip:
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/events/contentload

Or the Show event to explicitly set the height depending on the selected Tab:
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/events/show

Tags
TabStrip
Asked by
Nils
Top achievements
Rank 1
Veteran
Iron
Answers by
Eyup
Telerik team
Share this question
or