When you have a button inside a MultiSelect Footer template (for example), it is different visualized compared to the same button outside of the component. This comes from the k-list-container that is applied when a button is inside a toolbar.
-------ADMIN EDIT---------
A possible workaround for the scenario is to use custom styles as shown below:
<div class="row">
<div class="col-2">
<TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
Icon="k-icon k-i-add"
Primary="true">
New Value
</TelerikButton>
</div>
<div class="col-10">
<TelerikMultiSelect Data="@(
new List<SelectListItem>()
{
{ new SelectListItem { Text = "Text 1", Value = "Value1" } },
{ new SelectListItem { Text = "Text 2", Value = "Value2" } },
{ new SelectListItem { Text = "Text 3", Value = "Value3" } },
{ new SelectListItem { Text = "Text 4", Value = "Value4" } }
})"
FilterOperator="StringFilterOperator.Contains"
Filterable="true"
TItem="SelectListItem"
TValue="string"
TextField="Text"
ValueField="Value">
<FooterTemplate>
<TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
Class="my-nested-button"
Icon="k-icon k-i-add"
Primary="true">
New Value
</TelerikButton>
</FooterTemplate>
</TelerikMultiSelect>
</div>
</div>
@code{
public class SelectListItem
{
public string Value { get; set; }
public string Text { get; set; }
}
}
<style>
.k-list-container .k-button.my-nested-button {
background-color: #ff6358;
align-items: flex-start;
align-self: flex-start;
}
.k-list-container .k-button-primary.my-nested-button,
.k-list-container .k-button.k-primary.my-nested-button {
/*copy the colors from the basic button*/
border-color: #ff6358;
color: #ffffff;
background-color: #ff6358;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.04));
/*change the flex alignment form the parent container*/
align-items: flex-start;
align-self: flex-start;
}
</style>