Value Template width

Question

Hi.One of my columns in the QueryBuilder is using a ValueTemplate that contains a custom component. When it is rendered, the columns delete button appears on top of the component. This looks to be due to the fact the QB component adds a style attribute, with a width of 200px, to the div that contains the value input. It does this for all value inputs, not just those using the ValueTemplate.

How can I override that inline style? CSS doesn't have a parent selector so I can't do it from my ValueTemplate. Ideally the width would have been set using a CSS class and the ValueTemplate would expose a Class property that lets us insert our own classes, that could override the default CSS.

YuvanShankar Arunagiri · Answer

Hi Lee,We can
reproduce your reported issue at our end. So, we have confirmed this as an
issue and logged a bug report for this. You can track its status from
the below feedback link. Feedback
link: https://www.syncfusion.com/feedback/35199/provides-the-unique-class-name-for-value-template-for-css-customization-in-queryThe fix
will be available in our upcoming patch release which is scheduled on June 8th,
2022.Regards,YuvanShankar
A

Lee · Answer

Awesome!  Thanks for the quick response and turnaround.  I look forward to getting the update in June.

YuvanShankar Arunagiri · Answer

Hi Lee,As
promised, we will include this fix in our
upcoming patch release which is scheduled on June 8th, 2022. You can
track its status from the below feedback link. Feedback
Link:  https://www.syncfusion.com/feedback/35199/provides-the-unique-class-name-for-value-template-for-css-customization-in-queryRegards,YuvanShankar A

Lee · Answer

Just checking on the status of this.  I don't see a new release yet.  Also get an error when clicking the feedback link stating that it's not associated with my account.

YuvanShankar Arunagiri · Answer

Hi Lee,We
have added your account to access the feedback portal. Kindly clear your cache
and try log off and login with your Syncfusion credentials once again.
Please let us know if still issue persist. Due to
some technical glitches at our end the fix was not came in last week patch
release, now we will resolve the issue and the fix will be available for this
week patch release, which was schedule on June 15th, 2022. We appreciate your patience until then.Regards,YuvanShankar

YuvanShankar Arunagiri · Answer

Hi Lee,Thanks for the patience.We are glad to announce that our weekly patch release (20.1.0.60) is rolled out. We have included the fix for this issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. (20.1.0.60).Feedback link: https://www.syncfusion.com/feedback/35199/provides-the-unique-class-name-for-value-template-for-css-customization-in-query Please use the below mentioned CSS class for value template customization. Could you please check the above code and get back to us if you need further assistance on this.Regards,YuvanShankar A

Lee · Answer

Thanks for the update, however this looks like it will apply to ALL value templates. I see that the inline style width of 200px is still there, so how can I selectively override that? I don't want all value templates to be the same width, only ones that need the extra space.

I would have expected something like adding a CSSClass property to the ValueTemplate component where I can inject my custom class when needed. And let's face it, inline styles are inflexible so pulling that out into a separate style like the one that you created (e-template-value) would make a lot of sense as well.

YuvanShankar Arunagiri · Answer

Hi Lee,We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet.[Index.razor]: @using Syncfusion.Blazor.QueryBuilder @using Syncfusion.Blazor.DropDowns

@code{ public string DefaultValue = "Cash"; public List DataSource; public class ExpenseData { public string Category { get; set; } public string PaymentMode { get; set; } public string Description { get; set; } public int Amount { get; set; } } protected override void OnInitialized() { DataSource = new List() { new ExpenseData() {Category= "Food", PaymentMode="Credit Card", Description="Boiled peanuts", Amount=100 }, new ExpenseData() {Category= "Food", PaymentMode="Debit Card", Description="Boiled peanuts", Amount=200 }, new ExpenseData() {Category= "Food", PaymentMode="Cash", Description="Confederate cush", Amount=300 }, new ExpenseData() {Category= "Transportation", PaymentMode="Cash", Description="Public and other transportation", Amount=150 }, new ExpenseData() {Category= "Transportation", PaymentMode="Debit Card", Description="Public and other transportation", Amount=250 } }; } public class ItemFields { public string Id { get; set; } } public List Items = new List() { new ItemFields(){ Id= "Cash" }, new ItemFields(){ Id= "Debit Card" }, new ItemFields(){ Id= "Credit Card" }, new ItemFields(){ Id= "Net Banking" } }; public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args, RuleModel Rule) { Rule.Value = args.Value; } List Rules = new List() { new RuleModel { Label="PaymentMode", Field="PaymentMode", Type="String", Operator="equal", Value="Debit Card" }, new RuleModel { Label="Category", Field="Category", Type="String", Operator="equal", Value="Food" } }; } Could you please check the above code and get back to us, if you need any further assistance on this. Regards,YuvanShankar A