Won't Fix
Last Updated: 16 Dec 2022 12:55 by ADMIN
John
Created on: 09 Dec 2022 22:12
Category: Kendo UI for jQuery
Type: Bug Report
0
dark theme has bug

Apparently the dark theme we are using adds the glass.png to tabs.  Great.  Looks good.  However it also seems to be applying to the area inside the tab as well.
It's a little hard to see on most of our popups with tabs but it's visible through gaps in the controls.  I have removed the top layer in this image so you can see it.  Underneath is the html for one of the pages affected so you can see we aren't setting them up incorrectly.  This is the kendo black theme.


@using DispatchCrude.Models;
@model OriginEditModel

@* NOTE: This script section must be at the top of the page for the pop-up to function properly. It cannot be moved to the bottom of the page. *@
<div>
    @Html.HiddenFor(x => x.ID)
    <ul class="gridErrors NullValidator"></ul>
    @(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Items(tabstrip =>
        {
            tabstrip.Add().Text("General").Selected(true).Content(@<text>
                <div class="popup-editor-container">
                    <div class="popup-editor-column-sm">
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.TimeZoneID).IsRequired()
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.TimeZoneID, new { htmlAttributes = new { style = "width:120px; height:30px;" } })
                        </div>
                    </div>
                    <div class="popup-editor-column-sm">
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.RegionID).IsRequired()
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.RegionID)
                        </div>

                        <script>
                            function filterDestination() {
                                var dataItem = getGridEditRowModel();
                                let shipperIds = (dataItem.Products != null) ? dataItem.Products.map(x => x.ID).join(',') : -1;
                                let productIds = (dataItem.Shippers != null) ? dataItem.Shippers.map(x => x.ID).join(',') : -1;

                                return {
                                    "regionid": dataItem.RegionID || -1,
                                    "terminalid": dataItem.TerminalID || -1,
                                    "productids": (shipperIds != '') ? shipperIds : '-1',
                                    "shipperids": (productIds != '') ? productIds : '-1'
                                }
                            }
                        </script>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.PreferredDestinationID, new { table = "GetPreferredDestinations", controller = "origins", filter = "filterDestination()" })
                        </div>

                    </div>
                </div>
                </text>);
            tabstrip.Add().Text("Oil Field").Content(@<text>
                <div class="popup-editor-container">
                    <div class="popup-editor-column-sm">

                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.LeaseName).IsRequired()
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.LeaseName)
                        </div>
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.LegalDescription)
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.LegalDescription)
                        </div>

                    </div>
                </div>
                </text>);
            tabstrip.Add().Text("GPS").Content(@<text>
                <div>
                    <div class="popup-editor-column-lg">
                        <div class="popup-editor-label">
                            @Html.LabelFor(model => model.GeoFenceRadiusMeters)
                        </div>
                        <div class="popup-editor-field">
                            @Html.EditorFor(model => model.GeoFenceRadiusMeters, new { htmlAttributes = new { style = "" } })
                        </div>
                    </div>
                </div>
                </text>);
        })
    )
</div>
<script>
    $("#RegionID,#TerminalID").on("change", function () { refreshDestinations(); });
</script>

1 comment
ADMIN
Magdalena
Posted on: 16 Dec 2022 12:55

Hello John,

Thank you for the provided resources. I have tested the behavior on our site and have found the following workaround:

.k-state-active.k-content {
    background-image: none;
}

I would like to apologize for any inconvenience caused. Please note, that the Less themes will be deprecated with the Kendo UI R1 2023 release so I highly recommend migrating to some of our Sass Themes. You can find more detailed information about migrating from Less to Sass Theme in this article.

Regards,
Magdalena
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/.