Following the recent update of Google Chrome, Sencha Touch experiences spinning issues

Since updating my Google Chrome to the latest version (v29.0.1547.57 m), I've noticed some issues with parts of my Sencha Touch app spinning. The Sencha Touch version I am using is v2.2.1.

For example, when using Ext.Msg.alert, I can see the title but not the message.

Ext.Msg.alert('Refreshing Session', 'test', null);

Additionally, all the buttons in Ext.navigation.View have shifted to the left side, even though I explicitly set align: 'right'.

Furthermore, the title of Ext.navigation.View is blank, even after it has been set.

I haven't made any changes to my code. Everything was working perfectly fine with the previous version of Google Chrome, v28.0.1500.95, and is still working.

javascriptcssgoogle-chromesencha-touchsencha-touch-2.2

Answer №1

Dealing with issues is common in development, but this workaround shared on the Sencha forum proved to be effective for me:

The key was to replace the st-box mixin and recompile the CSS file.

@mixin st-box($important: no) {
@if $important == important {
    display: flex !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
} @else {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
}
}

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

Dealing with a React problem: alert 'Anticipated server HTML to include a corresponding <header> in <div>' while utilizing server-side rendering and Express

Trying to implement SSR with react in a personal project has been quite challenging lately. Numerous errors are popping up in the console, starting with the warning mentioned in the title, and then defaulting to CSR. NextJS is not being used; only express, ...

javascriptreactjsexpressserver-side-renderinghydration

Combining Images and Navigation in Next.js using Tailwind CSS

I am facing an issue where the image from a particular section overlaps with the Navbar dropdown on mobile devices. Adding z-50 to the navbar did not solve the problem as expected. What I want is for the image to remain below the dropdown menu when it is ...

javascriptcssnext.jstailwind-css

Error: Brackets missing in the argument list

app.get("/editMBTI", editMBTIFunc(req, res) { // ensuring MongoClient is accessible in all EJS Files // app.locals.MongoClient= MongoClient; MongoClient.connect(url, function (err, client) { assert.equal(null, err); console.log( ...

javascriptnode.jsmongodb

Tips for creating a radio button that appears consistent across Firefox, Chrome, and IE11

I am looking to create a set of Radio buttons that will display consistently across Chrome, Firefox, and IE 11. My current solution appears to work well in Firefox, but in Chrome, there is a blue box around the buttons, and in IE 11, it seems that the colo ...

htmlcssinternet-explorerradio-button

Encountering a Circular JSON stringify error on Nest.js without a useful stack trace

My application is being plagued by this critical error in production: /usr/src/app/node_modules/@nestjs/common/services/console-logger.service.js:137 ? `${this.colorize('Object:', logLevel)}\n${JSON.stringify(message, (key, value ...

javascripttypescriptnestjs

Developing a custom edit template with Infragistics through coding

Currently, our team utilizes the Infragistics grid without binding datasets until runtime. Instead, we set up the grid settings in code as per the preference of our senior developer. While effective, this method can seem a bit lengthy. I am interested in ...

.netasp.netjavascriptinfragistics

Adapt vanilla JavaScript code to be compatible with Node.js, MongoDB, and Express framework

In the midst of working on a blog project for my class, I find myself faced with the challenge of integrating Nodejs, Mongo, and Express into our existing setup. Up until now, we have been gradually transitioning to using Express in our application develop ...

javascriptnode.jsmongodbexpressroutes

Implement a ListView that expands and displays items when each spinner item is clicked

As a novice in the realm of android development, I have encountered numerous challenges while attempting to integrate a List View within Spinner Items. Every time I make an attempt, it either displays errors or exhibits all the list view (array items) simu ...

javascriptjavaandroidhtmljscript

Mastering the art of CSS horizontal centering: achieving perfect alignment with floating elements

Struggling to center a button among floating elements? Look no further! button { float:left; } header { overflow: hidden; background: #222; } header a, header label { display: block; padding: 20px; color: #fff; text-decoration: none; ...

htmlcss

Encountering challenges when using selenium webdriver to translate web pages from various languages to English

My challenge involves converting various links in different languages to English using Selenium JAVA after the page has loaded. Currently, this can be done manually by right-clicking on the page and selecting the "translate to English" option once it loads ...

javaseleniumgoogle-chromeselenium-chromedriver

How can pagination be implemented with a line chart in Chart.js?

I'm dealing with a large amount of data - around 10,000 rows that I need to display in a line chart. I'm looking for a pagination system where users can click on an arrow to show the next 20 data points, and so on. Currently, my app crashes when ...

javascriptreactjschartschart.js

Update the appearance based on the dimensions of the parent container with Bootstrap

Here's the situation I'm facing on my webpage: <div id="myDiv"> <p>A</p> <p>B</p> </div> If 'myDiv' is narrower than width X, display A & B vertically. Otherwise, display A and B horizo ...

htmlcssbootstrap-4

How to apply class binding within a v-for loop in Vue.js

When using Vuejs3, I am currently iterating through an array of objects: <div v-for="ligne in lignes" :key="ligne.id" :class="{ 'border-b-2':isSelected }" :id="`ligne_${ligne.id}`" > ...

javascriptvue.jsvuejs3v-for

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

Swapping out standard social media icons for personalized images

I'm interested in learning how to customize my social media icons with my own images. Instead of using the standard Facebook Like button or Twitter follow button, I want to use my own images while retaining the same functionality. Websites like Buzz ...

htmlcsswordpresssocial-mediasocial-media-like

How can we best organize a VueJS application to accommodate this specific logic?

I am currently working on an app that needs to display data fetched from multiple sources based on a condition. The issue I am facing is that the process of fetching, organizing, and returning the data varies depending on the source, sometimes even requiri ...

javascriptvue.jsvue-component

Enhancing the shadow effects on ThreeJS using buffergeometry

I'm currently working on a project where I have loaded a .gltf model in ThreeJS with a keyframe animation that alters the shape of the object (it's a point level animation). Everything seems to be functioning correctly, except for the fact that t ...

javascriptthree.jsshadow

JavaScript alert causing disruption to Ajax requests

Currently, I am utilizing JQuery Ajax to retrieve a script from the server. $.ajax({ url: src, type: "GET", dataType: "script", timeout: transaction_timeout }).done(function(){}) .fail(function() { alert("Error in server");}) .always(funct ...

javascriptjqueryajaxjsonalert

Flask template fails to render following a redirect

I have embarked on creating a simple CARTO application using a combination of Vue JS and Flask. If you wish to explore the entire code, it can be accessed from this github repository. Here's how the application is designed to function: The user m ...

javascriptpythonvue.jsflask

What is the process for extracting the value of a checkbox generated through JavaScript?

I recently came across a helpful post on Stack Overflow that provided sample code demonstrating how to display multiple list of checkboxes dynamically on a dropdown list. The function in the code was exactly what I needed for my webpage. However, I encount ...

javascripthtml