Filter with material skin inside RadPanelBar - no buttons

[Beth]

Hello,

When I change the skin of a RadFilter to "Material", the button images disappear only if the RadFilter is nested within a RadPanelBar. The Lightweight render mode is applied system-wide along with the skin via web.config. I have attached an image showing the issue. Any ideas what I am doing wrong? The button images appear when I take the RadFilter out of the RadPanelBar. Here is a snippet.

 

<telerik:RadPanelBar ID="pbrAdvSearch" runat="server" Width="100%" ExpandMode="MultipleExpandedItems"
                   RenderMode="Lightweight">
                   <Items>
        <telerik:RadPanelItem Expanded="True" Text="Categories">
                           <ContentTemplate>
                               <p>
                                   To search by category, click the <strong>Add Category</strong> button. Search for multiple categories by clicking this button again. If your multi-category search requires all categories to exist, select <strong>AND</strong>; otherwise, select <strong>OR</strong>.
                               </p>
                               <br />
                               <telerik:RadFilter RenderMode="Lightweight" runat="server" ID="rfCategories"
                                   ExpressionPreviewPosition="Bottom" ShowApplyButton="true" AddExpressionToolTip="Add a Category">
                                   <FieldEditors>
                                       <customEditors:TreeFieldEditor FieldName="Category" DataTextField="CategoryDesc"
                                           DataValueField="CategoryID" DataFieldID="CategoryID" DataFieldParentID="Parent" />
                                   </FieldEditors>
                               </telerik:RadFilter>
                           </ContentTemplate>
                       </telerik:RadPanelItem>
                   </Items>
               </telerik:RadPanelBar>

 

[Eyup]

Hello Beth,

 

I've prepared a sample RadPanelBar web site using the provided code to test this behavior. The RadFIlter icons are loaded on my side both when the filter is inside or outside the panel bar. You can download and run the attached web site using the following steps to verify that it works as expected on your side, too:

1. Open Visual Studio
2. File menu
3. Open option
4. Select Web site and target the web site folder.
5. Include a Bin folder with the Telerik dll assemblies.

 

Regards,
Eyup
Progress Telerik

[Beth]

I discovered that I was able to see the button images again if I modified the font-family for the buttons, which was being set to "Material icons". I had to do this:

 

.RadPanelBar_Material .p-icon::before {
    font-family: inherit !important;
}

[Eyup]

Hi Beth,

 

I'm glad the issue is now resolved and thank you for sharing your solution with our community.

 

Regards,
Eyup
Progress Telerik