The appearance of the kendo-ui mobile loader seems to be out of

My kendo-mobile-loader appears to be broken, even though I haven't made any changes to the CSS. It was installed fresh via bower install kendo-ui-core, and no other CSS libraries are being used. The issue is occurring while using it with angularjs

It currently looks like this:

The files included are:

styles/kendo.common.core.min.css

styles/kendo.flat.mobile.min.css

I reported this as a bug on Github, but was directed here, so it seems this behavior may be specific to my setup... I have tested it in various browsers such as Google Chrome, Firefox, and IE 11, and the issue persists across all of them.

According to the official documentation, they claim that including just this file should resolve the issue: 

/styles/kendo.mobile.flat.min.css
, however, it does not seem to work...

javascripthtmlcssangularjskendo-ui

Answer №1

After much troubleshooting, I finally discovered the root of the issue. kendo.mobile.*.min.css is necessary, but you also must "activate" it in your JavaScript code.

<link rel="stylesheet" href="kendo.mobile.flat.min.css">

<script>
  new kendo.mobile.Application(document.body, { skin: 'flat' });
</script>

Alternatively, for Angular:

<kendo-mobile-application k-skin="'flat'">
    ...
    ...
</kendo-mobile-application>

Unfortunately, this flat theme looks quite different from the original web version. I ended up restyling it using resources like Kendo Flat Themes and the Mobile Theme Builder.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most efficient method to use JavaScript to conceal unnecessary options?

I'm working with an HTML select element that has multiple options, and I need to be able to hide and show specific options as needed. Here's an example of my HTML code: <select> <option value="0">A</option> <option value="1" ...

javascriptjqueryhtml

Form-group in a state of collapse

I am trying to figure out how to create a form-group row with multiple columns and collapse each column separately. The issue I'm facing is that the "div class="collapse" needs to be above the "div class="form group row," making it challenging to tag ...

htmlcssbootstrap-4

Ensure that variables are accessible to asynchronous calls without the use of closures

As a newcomer to the world of javascript, I've been trying to navigate the realm of nested functions. Let's explore the following two examples: // example 1 var x = 45; function apple(){ var y = 60; setTimeout(function(){ console ...

javascriptnode.js

Is Riot.js the best choice for server-side rendering and routing?

Currently, I am using Node along with Riot.js and the Grapnel routing library. I have successfully set up routing on the client side, but I am facing difficulty in making it work on the server side. The functioning of my client router is straightforward. ...

javascriptnode.jsriot.js

Struggling to generate a div using my JS/jQuery code

Currently working on a post-it web application to improve my skills in JavaScript and jQuery. I've encountered a few errors that have me stumped. Although I'm new to StackOverflow, I often use it as a helpful resource. You can find the code here ...

javascriptjquerycsshtml

Utilizing Protractor's functionality with the keyboard shortcut CTRL + END

For my angular end-to-end testing, I am utilizing protractor. When attempting to input keys into an element, I follow this syntax: browser.actions().keyDown(protractor.Key.CONTROL).sendKeys('end').perform(); Unfortunately, this method is not pr ...

javascriptprotractore2e-testing

Determining the readiness of a node.js express server for use

Is there a way to automatically start a browser on the same machine as soon as a Node Express server is up and running? I'm looking for a method to check if the server is ready without having to wait an excessive amount of time. It would be ideal to h ...

javascriptnode.jsexpress

What strategies can I use to eliminate nested loops while constructing a navigation?

I am working with a JSON file that contains data for a navigation panel consisting of links. A brief snippet of the file is shown below: [ { "category": "Pages", "links": [ { "url": "#", "cap ...

javascriptjquery

Uppercase the initial letter in a term to indicate a standard condition

I'm struggling to override the CSS in material UI. Even though I tried capitalizing both words, it only changes on selected and hover states, Is there a way to change it in the normal state as well? I've tried debugging but can't seem to fin ...

javascripthtmlcssreactjsmaterial-ui

Will the current scrollbar position be preserved when using location.reload()?

The question is essentially the title. I am currently exploring JavaScript and jQuery as a beginner, trying to understand how they work together. On my webpage, there's a button that triggers a post request using jQuery. When this request is complet ...

javascriptjquery

The input field becomes uneditable or non-editable when utilized in a directive alongside an ion-toggle

Link to Codepen demo This is the template code for my directive: <ion-toggle class="cw-alerttimebutton" ng-model="targetobject.isEnabled" ng-checked="targetobject.isEnabled"> <input type="text" ng-model="targetobject.time" value= ...

angularjsionic-framework

Updating a function in jQuery UI after dynamically loading content through AJAX

I've been on a quest for days now, searching high and low for an answer to my dilemma. While I've managed to solve most of the issues that arose after adding AJAX calls to my code, there's one piece that still eludes me. Just to provide som ...

javascriptajaxjquery

What is the process for changing an image on a webpage based on a dropdown list selection?

When I came across the site , I was impressed by their feature that allows users to select their currency. By changing the currency, the symbol beside the amount entered also changes accordingly. I am interested in incorporating a similar feature on my we ...

javascriptcssajaxdynamic

How to use HTML and CSS to resize images from a tileset

I need to resize an image that I am pulling from a tile set, originally sized at 50px x 50px. Is there a way to enlarge this image without adjusting the background size property? Perhaps by placing the image into a div and resizing the div instead? img.ti ...

htmlcssimageresize

Error 107 occurred while attempting to parse JSON data using the AJAX technique with the REST API

I've encountered an issue while attempting to utilize the Parse REST API for sending push notifications. Every time I make an AJAX call, I receive an invalid JSON error in the response and a status code of 400. Below is my request: $.ajax({ url: & ...

javascriptjqueryajaxjsonparse-platform

Choose a particular character in a text that corresponds with a regular expression in Javascript

I am looking to replace the symbols < and > within the text. I have constructed a regular expression as follows: (<span[^>]+class\s*=\s*("|')subValue\2[^>]*>)[^<]*(<\/span>)|(<br(\/*)>) This ...

javascriptregex

A guide on changing state in React Native

Currently, I am in the process of developing a lightweight project with React Native, and I have come across some challenges that I am finding difficult to overcome. :( On one of the pages in my project, I have included a pair of buttons - one labeled Yes ...

javascriptiosreactjsreact-nativemobile

No Angularjs redirection without the "onload" event

In my search for a solution, I came across this answer but it did not quite fit my needs: Pass onload event through redirect The issue I'm facing is that I want the AngularJS section of my application to reload something when the user is redirected ...

javascriptangularjshttp-redirect

Tips to prevent flex from automatically adjusting based on text length: ensure the table remains a consistent size regardless of the length of the text within it

Is there a way to adjust the alignment of this code snippet? <div class="d-flex justify-content-between"> <span>Total Items: @Model.Count </span> <div class="d-flex flex-row align-items-center" ...

css

Vertical menu causing problem with smooth scrolling link effect

Currently, I am facing an issue with a template and trying to resolve it. The problem lies with the highlighting effect on the navigation menu, which only seems to work on a reduced browser height. When I resize the window to full screen and scroll down to ...

javascripthtmlcssbootstrap-4smooth-scrolling