Month and year selection feature in ExtJS 4 catalog

I recently came across an interesting Fiddle that featured a Month and Year picker for apps. After finding this Fiddle here, I noticed that it was built using Extjs 5.0, and it worked perfectly. However, when attempting to switch it to version 4.2.1, the last row of both Months (June, Dec) and Years (2015, 2020) disappeared. This issue persisted even when reverting back to the Extjs 5.0 version.

What adjustments should I make in order to bring back those rows? I attempted altering the dimensions of .x-monthpicker-body without much success.

javascriptcssextjsextjs4

Answer №1

To address the problem, I made a temporary fix by adjusting the .x-monthpicker-body with pixels instead of percentages. There is uncertainty about whether this adjustment will cause issues during zooming in or out.

Answer №2

To solve the issue with Extjs 4, I implemented a quick fix using basic CSS styling.

You can see the result in this demo on Sencha Fiddle.

The CSS code I added is shown below:

.x-monthpicker {
    padding-bottom: 35px;
}

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

Transfer a PHP variable between pages to retrieve the appropriate item from a button

In my project, I have two pages named content.php and pagecontent.php. In content.php, I am fetching product information from a database and displaying it in table format. The table has a grid layout with 2 rows and 3 columns. Each cell contains the descri ...

javascriptphphtmlajax

Every time I attempt to log in, the code keeps generating an error message net::ERR_EMPTY_RESPONSE. If successful, it should redirect to the

The code is producing a net::ERR_EMPTY_RESPONSE error when attempting to log in. The username and password are hardcoded. I simply want the admin to input their credentials on the Employee.html page, and if they match the ones in the main.js file, redirec ...

javascripthtmlnode.jsexpressbody-parser

Setting a port in Next.js: A step-by-step guide

I have one application currently running on port 3000 and I need to run another application on a different port in React Next.js. How can I make this change? In my package.json file, the current scripts section looks like this: "scripts": { & ...

javascriptreactjsnpmportnext.js

The background positioning feature is experiencing some technical issues

Using Jekyll, I have code where the inline background-position changes based on the front-matter position I define: * { box-sizing: border-box; } body{ padding: 0; margin: 0; } .page__hero--overlay { position: relative; margin-bottom: 2em; ...

htmlcsssassjekyll

Incorrect CSS percentage calculations detected on mobile devices

My webpage consists of three large containers, each with an alpha transparent background. While they display correctly on desktop browsers, I'm facing alignment issues on tablets (both iOS and Android) and iPhones where the percentage sum seems to be ...

htmlioscss

How can I access data from a function that is executed within a method in Vue.js?

When working with vuejs and JS scopes, passing a value to a style property inside data can be tricky. The issue arises when trying to access this.data.property: Vue.component ('loader-component', { template: '#loader-template', mo ...

javascriptobjectthisvue.jsvuejs2

What is the best way to bring in styles to a Next.js page?

I am facing an issue with my app where I have a folder called styles containing a file called Home.module.css. Every time I try to include the code in my pages/index.js, I encounter the same error message saying "404 page not found.." import styles from & ...

javascriptreactjsimportnext.js

Developing an npm console application that is "installable" similar to tools like yeoman, gulp, or grunt

Recently dipping my toes into the world of NPM, I've been itching to create a package that functions as a console app (think gulp and grunt). My goal is simple: I want users to be able to run npm install -g mypackage followed by mypackage This sh ...

javascriptnode.jsconsolenpmpackage

Tips for sending an array of "FormData" through ajax and retrieving it in a Laravel controller

# Could you please provide guidance on sending this array to the controller via Ajax request? var dataPanier=[]; function addarray(objser) { dataPanier.push(objser); } $('.target').click(function() { var btn_name=$(this).attr("name"); ...

javascriptjqueryajax

Do JavaScript functions operate synchronously or asynchronously?

Here is the JS code snippet I am working with: <script> first(); second(); </script> I need to ensure that second() will only be executed after first() has completed its execution. Is this the default behavior or do I need to make any modific ...

javascript

Rearranging columns in Bootstrap 4 beta across multiple containers

Sorry for any language issues in my English. This shows my regular grid: ------------------------------- | A | B | C | ------------------------------- | D (horizontal menu) | ------------------------------- Is it possible to d ...

javascriptbootstrap-4

Angular directive that verifies the presence of a specific number of child li elements

Currently, I have a basic ul that utilizes ng-repeats to display li elements fetched from an external source via a promise. There is also a search input present which filters these elements, and I want the ul to be hidden when there are no more elements th ...

javascriptangularjsattributespromisedirective

I encountered an error while attempting to lint my code because ESLint was not configured to ignore the

Trying to set up eslint in a Next.js project, here is the file structure: .eslintignore .eslintrc.js .next .prettierrc .stylelintrc.js components forms modals modules node_modules In my .eslintignore file, I have added node_modules/*. When running eslint ...

javascriptnode.jsnext.jseslinteslintignore

I'm wondering why my .focus() function is causing the cursor to move to the start of my contenteditable div?

I am currently developing a website for writing books, primarily using php. I have implemented a jQuery function that, upon clicking the "New Chapter" button, triggers an AJAX function along with various other JS/jQuery events. One of these events is inten ...

javascripthtmljquery

Guide to utilizing element reference with material UI components in Angular

I am facing difficulty in accessing the reference of an element. My intention is to wrap the material UI elements within a div and set the opacity: 0 so that it remains hidden in the HTML, allowing me to handle the value in my component.ts file. The main g ...

javascripthtmlangular

Vite/React/Express is restricting access to fetch due to the CORS policy

Currently, I'm utilizing Vite alongside React/Express for my application. The app initiated with npm run dev and is accessible at http://localhost:5173, while the backend operates on http://localhost:5000 during this phase. However, every time I attem ...

javascriptreactjsnode.jsexpressvite

Get the PDF document via FTP by utilizing an XMLHttpRequest and a generic handler

Attempting to download a PDF file from an FTP server using a JQuery Ajax request. The reference used was found at . Below is the Jquery ajax call being made: $.ajax({ xhr: function () { var xhr = new window.XMLHtt ...

javascriptc#jqueryasp.netajax

Since updating my background-image, the header images have mysteriously vanished

Currently, I am in the process of building a webpage and want to create a default navigation bar that will be consistent across all pages. Below is the code snippet from the file where I wish to include my navigation bar: <html> <head> < ...

phpcssnavigationincludedefault

Unveiling the Secrets of Extracting and Eliminating Duplicate Nested Values within an Array using Node

Looking for a way to effectively aggregate (de-duping) and sum nested data using map/reduce/lodash, or any other method. Whether it's ES6/ES7 or not doesn't matter. The simplest and cleanest solution is preferred. Thank you. Here is an example a ...

javascriptnode.js

apply a course to the designated element

Alright, I have this piece of code that deals with session and page requests. // Let's start our session session_start(); // Now let's check if there is a page request if (isset($_GET['page'])) { // If there is a requested page, we ...

phpjavascriptjquery