Apply inline style to a component

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Duplicated

Last Updated: 05 Oct 2022 16:45 by Chris

Michael

Created on: 29 Feb 2020 08:46

Category: UI for Blazor

Type: Feature Request

Apply inline style to a component

Hi,

Firstly, love what you're doing with your Blazor components. I'd like to be able to add custom style to your components. For example

<TelerikTextBox Style="margin-left: 20px" />

Now of course we should be using a class for this and I know your components have a Class parameter, however what I'd like to do is something like this

<TelerikTextBox Style="@CssHelper.Margin.Top(20)" />

where the style is generated at runtime. I'm experimenting with such an approach to apply all styles, however I can't do so with a lot of your controls. Having said that, I've noticed that your animation container does have something along these lines with its ParentInlineStyle parameter.

        <TelerikAnimationContainer @ref="@AnimationContainer" 
                                   Top="-72px" Left="calc(100% - 280px)" Width="300px" 
                                   AnimationType="AnimationType.SlideDown" 
                                   Class="k-popup" 
                                   ParentInlineStyle="@Style">

So just wondering if this is something you're looking at doing?

thanks

Michael.

Duplicated

This item is a duplicate of an already existing item. You can find the original item here:

Component-specific CSS classes and ability to set classes per instance

8 comments

Chris

Posted on: 05 Oct 2022 16:45

We did some more experimentation and we can leverage the classes to control the styles for our needs. Please dis-regard my prior request. Thanks for the helpful feedback.

ADMIN

Hristian Stefanov

Posted on: 05 Oct 2022 14:25

Hi Chris,

For now, things like the ID or the Class parameters of a component can be used for custom styles. Exposing a Style property is possible, but this makes the developer write plain strings, which is error prone instead of CSS, which also allows reusability, minifaction, etc.

Can you provide a concrete reason why you need to use inline styles instead of styles from a class?

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Chris

Posted on: 28 Sep 2022 17:54

We have a critical need for this support as well. (AVEVA licensed customer).

ADMIN

Marin Bratanov

Posted on: 07 Dec 2020 08:52

Hello everyone,

In our next release (scheduled for end of January 2021), all components will have a Class parameter (and PopupClass where applicable), so adding styles to them will be done through classes. Adding more parameter or even attribute splatting will bring a performance penalty with relatively little value. Thus, I am marking this as a duplicate of the other feature that would let you achieve styling per component: https://feedback.telerik.com/blazor/1433654-component-specific-css-classes-and-ability-to-set-classes-per-instance.

Regards,
Marin Bratanov
Progress Telerik

Michael

Posted on: 09 Mar 2020 21:51

Thanks for the clarification Marin. Cheers, Michael!

ADMIN

Marin Bratanov

Posted on: 09 Mar 2020 07:47

Hi Michael,

The "unplanned" status means we believe the idea has merit, but we can't say when exactly it will be available. It is usually the next stage after "pending review" (the default status) which indicates we need to take a closer look at the concept and see how it fits the product.

At the moment, a class is the only way. You can Follow the implementation of a Style parameter in this page, and you can review (and join) the discussion about attribute splatting here: https://feedback.telerik.com/blazor/1416978-support-arbitrary-attributes so you can see the problems they pose for complex entities like our components (as opposed to the plain element wrappers from the framework).

Regards,
Marin Bratanov
Progress Telerik

UI for Blazor

Michael

Posted on: 08 Mar 2020 22:36

Hi Marin,

I see the status has been changed to unplanned, which is fair enough I guess. However I'm curious as to the reasoning? Or if there is a suggested workaround, other than using a class? One option could be to use the @attributes parameter however because the underlying Telerik components do not expose a style property, this will not work. The Microsoft Blazor components all seem to support style, I guess because they are essentially wrappers for the native element, but given these 'framework' components support the use of the style property, I would have assumed that all Blazor components should do the same? Any advice, guidance or recommendations would be appreciated.

Thanks
Michael.

ADMIN

Marin Bratanov

Posted on: 02 Mar 2020 10:40

Hello Michael,

Thank you for the kind words!

I moved this idea to our public Feedback Portal so the community can Vote and comment on it, which will let us gauge its popularity and, in turn, to prioritize it accordingly. Here's a link for you: https://feedback.telerik.com/blazor/1455888-apply-inline-style-to-a-component. You can click the Follow button on that page to get email notifications for status changes.

Regards,
Marin Bratanov
Progress Telerik

UI for Blazor