Completed
Last Updated: 26 Oct 2022 14:33 by ADMIN
Release R3 2022 SP1
Marco Piumi
Created on: 14 Sep 2022 08:48
Category: ComboBox
Type: Bug Report
8
RadComboBox Bootstrap Lightweight skin not loading in version 2022.3.913

RadComboBox Bootstrap Lightweight skin is not loading in version 2022.3.913

Workarounds provided by Admin:

Option 1

Use RadStyleSheetManager to load the correct stylesheet from Telerik.Web.UI.Skins assembly, as per the instructions in Skin registration with RadStyleSheetManager:

<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager">
    <StyleSheets>
            <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.BootstrapLite.ComboBOx.Bootstrap.css" Assembly="Telerik.Web.UI.Skins" />
    </StyleSheets>
</telerik:RadStyleSheetManager>

Option 2

Link the correct stylesheet manually on the page in one of the following ways:

Attached Files:
6 comments
ADMIN
Doncho
Posted on: 26 Sep 2022 12:48

Thank you for this clarification, Mark!

I am glad to know you have managed to fix the problem.

Please do not hesitate to contact us in case any assistance is needed.

Kind regards,
Doncho
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.

Mark
Posted on: 19 Sep 2022 15:10

Doncho,

FYI, As best I can tell I can tell, i am NOT using lightweight render mode.  Here is my Combo Box .aspx definition:

<telerik:RadComboBox ID="RadComboBox1" runat="server" DataTextField="FolderName" Width="95%" CausesValidation="false" DataValueField="FolderId" 
        EmptyMessage="Select a Folder" AllowCustomText="false" EnableScreenBoundaryDetection="false" BorderColor="Black" BorderWidth="1px" 
        style="border-radius:5px;" ZIndex="100000">
        <Items>
            <telerik:RadComboBoxItem/>
        </Items>
        <ItemTemplate>
            <telerik:RadTreeView ID="rtFolders" EnableNodeTextHtmlEncoding="true" ShowLineImages="false"
                runat="server"
                CausesValidation="false"
                Style="min-height: 200px; overflow: hidden;"
                AppendDataBoundItems="True"
                OnClientNodeClicking="nodeFolderClicking" />
        </ItemTemplate>
    </telerik:RadComboBox>

This is the first combobox that is shown in my video, (not the second that was in a modal popup window).  

I was ONLY able to fix the issue when I added the standard ComboBox css to the page.  The fix did NOT work for me when I added the lightweight version. 

    
ADMIN
Doncho
Posted on: 19 Sep 2022 07:06

Thank you for the detailed video, Mark!

Yes, it is the same problem as the one originally reported in this thread.

Until our next release, I would recommend using the workarounds suggested in my previous comment.

The issue is only replicable in Lightweight render mode but not in Classic. Based on the ComboBox appearance in the provided screencast it seems that the Combo is in Lightweight render mode in your case as well. You can find more about the RenderModes here:

By using the StyleSheetReference you shared, the ComboBox Bootstrap styles for Classic RenderMode are loaded on the page. This might be partially fixing the look of the control, but these styles are designed to be used with the Classic mode rendering hence this could lead to some other appearance issues.

Kind regards,
Doncho
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.

Mark
Posted on: 16 Sep 2022 15:00

This issue affects both the bootstrap lightweight and normal bootstrap skins.  

 

this is fixing the issue for me currently. i put this in my master page.

 

    <telerik:RadStyleSheetManager runat="server" ID="radStyleSheetManager1" EnableStyleSheetCombine="true" >
        <StyleSheets>
                <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.Bootstrap.ComboBox.Bootstrap.css" Assembly="Telerik.Web.UI.Skins" />
        </StyleSheets>
    </telerik:RadStyleSheetManager>
Mark
Posted on: 16 Sep 2022 14:34

I believe this is the same issue that i am now experiencing after upgrading to the 20220.3.913.45 build.

https://www.youtube.com/watch?v=_v-VtQkVfbk

ADMIN
Doncho
Posted on: 14 Sep 2022 09:11

Hi,

The stylesheet holding the RadComboBox styles for Bootstrap skin in Lightweight RenderMode is not loaded due to a wrong file name.

As a temporary workaround you can load the needed stylesheet manually on the page:

Option 1

Use RadStyleSheetManager to load the correct stylesheet from Telerik.Web.UI.Skins assembly, as per the instructions in Skin registration with RadStyleSheetManager:

<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager">
    <StyleSheets>
            <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.BootstrapLite.ComboBOx.Bootstrap.css" Assembly="Telerik.Web.UI.Skins" />
    </StyleSheets>
</telerik:RadStyleSheetManager>

Option 2

Link the correct stylesheet manually on the page in one of the following ways:

Kind regards,
Doncho
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.

Attached Files: