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

Luxon: retrieve an array of time offsets and time zones (similar to what can be done in moment-timezone)

Currently, I am using the moment-timezone library to retrieve raw information for a specific timezone and then incorporating it directly into my downstream code. const zone = moment.tz.zone('Europe/London'); This data contains: { "name":"Eu ...

javascriptmomentjsluxon

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

javascriptjquerycsshtml

What is the reason onbeforeunload does not fire requests in Safari browser?

Is there a way to ensure that data is saved to the database when a user interacts with the page and also when they refresh it? I have tried using onbeforeunload event, but Safari does not wait for the server request to finish before reloading the page, c ...

javascriptvue.js

Achieving Height Diversity in Floating HTML Divs

I have a unique set of dynamically generated divs inside a container div with different heights. <div id="container"> <div id='d1'>Varying content...</div> <div id='d2'>Varying content...</div> < ...

htmlcss

Using a Javascript library within an Angular component: A comprehensive guide

I've been working on a Web-Client project that involves visualizing sensor data such as velocity and acceleration within a coordinate system. In order to display this coordinate system, I decided to use the graph.js library from https://github.com/dhu ...

javascriptangulartypescript

Determining special characters within a string using VueJS

As a newcomer to VueJS, I am currently developing an application that requires a signup and login system. My goal is to inform the user if they have entered a special character such as /[&^$*_+~.()\'\"!\-:@]/. In order to achieve th ...

javascriptvue.jsvuejs2

Organizing entries based on the quantity of attached documents

I am currently working with mongodb and mongoose. I have a situation where users can create ratings and reviews for products. I want to retrieve the review of the product that has received the highest number of votes. Is this achievable in mongo? The data ...

javascriptnode.jsmongodbsortingmongoose

Achieving priority for style.php over style.css

Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...

phphtmlcsswordpress

retrieve the value of a specific key from an array

How can I extract key-value pairs from an array in JavaScript where the data is structured like this? jsonData = [ {"dimensions":[5.9,3.9,4.4,3.1,4.8],"icon":0,"curves": [false,false,false,false,false],"id":"p1","color":"0x000000"}, {"dimensio ...

javascriptjqueryarraysjson

Issue with loading function in FullCalendar React integration

Currently experimenting with FullCalendar v5 for React and exploring the Resource Timeline view feature. Facing an issue with the "loading" function - the idea is to monitor the state of FullCalendar and, if it's in a loading state, display a Spinner ...

htmlcssreactjsfullcalendarfullcalendar-5

Delete the final comma in a JSON file using JavaScript so that it can be utilized by a Vue application

Using Axios in my Vue app, I am consuming a JSON file. The field "country" contains trailing commas which are creating issues. Here is the structure of the JSON: "country": "spain,france," .... "country": " ...

javascriptvue.jsvuejs2

Show the loading icon once to indicate that the page is waiting for an AJAX call

I am currently setting up a table that is refreshed with new data every 4 seconds using AJAX. During the initial page load, I would like to show a loading message while waiting for the AJAX to complete. Currently, I have successfully displayed the loading ...

javascriptphpajax

Retrieve the response status using a promise

There is a promise in my code that sometimes results in an error response (either 400 or 403, depending on the user). I am trying to handle this situation by catching the response and implementing a conditional logic to execute different functions based on ...

javascriptreactjstypescriptsharepoint

XML and numerous, distinct DIV elements

Is it possible to display content from an XML file in a DIV upon clicking, without using IDs and involving multiple DIVs? For instance, when clicking on the first link in the following code snippet, the content from an XML file should only appear in the r ...

javascriptxmlajax

Issue with Angular: PDF rendering delayed until window resize

Recently, I encountered an issue with rendering a PDF in Chrome while using an AJAX call with Angular. Strangely, the PDF would only show up in the browser if I resized the window or opened the console. Surprisingly, everything worked fine in Firefox. Jav ...

javascriptangularjsgoogle-chromepdfangular-ui-router

Is there a way to eliminate unnecessary chunks from MUI in NextJS?

I recently created a single page and noticed that there is a significant amount of unused JavaScript in my codebase. Specifically, I am using MUI and React icons. Any suggestions on how to efficiently manage this issue? To address the problem, I attempte ...

javascriptperformanceoptimizationnext.jsfrontend

Retrieve data from REST call to populate Material dropdown menu

I am looking to dynamically populate a dropdown menu with data retrieved from a Rest API. I attempted the following code: <Select id="country-helper"> {array.map((element) => ( <MenuItem value={element.code}>{element.country}& ...

javascriptreactjstypescript

Harmonizing database with AJAX-powered webpage

When using ajax calls to update data on a web page, what is the most effective way to synchronize changes with a database? For example, if I have a comment form that needs to work asynchronously. I write JS code to submit the form data to the database, but ...

javascriptajax

Enhance your cloud functions by updating data

Recently, I encountered an issue with a function I wrote that interacts with the Real Time Database. Every time I attempted to write data to a specific node, it would add the complete dataset and then promptly delete everything except one entry. It appear ...

javascriptnode.jsfirebase-realtime-databasegoogle-cloud-functions

Angular 2 - The constructor of a class cannot be called without using 'new' keyword

Currently, I am working on integrating the angular2-odata library into my project. This is the code snippet I have: @Injectable() class MyODataConfig extends ODataConfiguration { baseUrl = "http://localhost:54872/odata/"; } bootst ...

javascriptangularodata