Creating a Kendo Menu within an Ext JS Panel

Currently, I am experimenting with combining ExtJS and Kendo UI - a unique mix that is taking me off the usual path ;)

I have managed to render a Kendo Menu onto an Ext JS (4.2.1) generated Ext.form.Panel

In case you want to check it out, here's a Fiddle link: http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/

The issue I'm facing is that the drop-down items (upon hover) are restricted to be drawn only within the boundaries of the Ext JS Panel. Is there any way to make these dropdown items appear 'in front' of everything else? I did try tweaking some of the classes like z-order, but to no avail.

javascriptjquerycsskendo-uiextjs4.2

Answer №1

This issue does not revolve around the z-index, but rather the parent element's use of overflow: hidden. If you have a relative container with the CSS property overflow: hidden, it will always behave in this way. One simple solution for the kendo menu at the moment is to set all parent elements' overflow to visible:

.x-panel,
.x-panel-body {
    overflow: visible;
}

As shown here: http://jsfiddle.net/5e6Lgtaj/2/

However, it is important to note that if you intend to utilize scrollbars or actually hide overflow within these elements, it may present a problem.

Another option would be to append the menu to the body element, but this could come with additional challenges such as losing styling (due to being moved from its original container with crucial classes), requiring JavaScript functions to maintain its correct position, and ultimately creating more issues than it solves.

This is an example of how this alternative approach might appear: http://jsfiddle.net/5e6Lgtaj/3/

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

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

javascriptphphtmlcss

The delete_node() function in jstree does not seem to be removing nodes

In my attempt to create a custom context menu for different nodes, I've managed to display different labels for clicks on folders or files. However, I am facing some challenges when trying to delete them. Take a look at my code snippet. Due to diffic ...

javascriptjqueryjstree

SharePoint 2013 only allows the first AJAX request to work successfully, except when in Edit Mode

I am facing a challenge of making two AJAX requests simultaneously on a SharePoint page. One request originates from the current site, while the other comes from a team site. When I use different URLs (/events) and (/travel), each one works fine when use ...

javascriptjqueryajaxsharepointsharepoint-2013

What is the best way to make a span's background color stretch to 100% width?

Is there a way to make the background of a span element stretch to the full width of its parent container? Just to Clarify I understand that using divs is an option, but it feels more like a workaround than a genuine solution to the issue. (di ...

htmlcss

What is the relationship between $.when, apply(), and $.done() within the scope of this function?

I recently received this function from a helpful SO user that allows for returning a variable number of jQuery $.get() requests. The initial part seems pretty straightforward, but I am struggling to understand how $.when(), apply(), and $.done() are inte ...

javascriptjqueryajaxjquery-deferred

Assign tags using a variable within a loop

Consider the scenario where I need to generate a list of li elements: {map(listItems, (obj,i) => <li key={i}> <a target="_blank" href={obj.itemName === 'view_detail' ? `event/${id}` : ''} > <i c ...

javascriptreactjs

Asking only to re-answer incorrectly answered questions in an array using JavaScript prompts and loops. How can this be achieved without asking to repeat the entire loop?

Goals : To require the user to input the displayed words in the designated fields. To validate if the typed words are an exact match to those requested. If correct, proceed to the next word. If incorrect, prompt the user to retype the wrongly entered word ...

javascriptarraysloops

Position the caret after adding a new element in a content-editable div

I have a contenteditable div that contains various elements. My goal is to automatically create a new paragraph tag right after the element where the cursor is positioned when the user presses the enter key. Currently, I am able to insert the paragraph tag ...

javascriptjqueryhtmlfocuscontenteditable

Ways to activate a function onInit in Angular version 9

Currently, I have a function that is activated by clicking a button: export class ExhibitorDetailsComponent implements OnInit { @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow openInfo(marker: MapMarker, content) { this.in ...

javascriptangular

WebStorm 6 does not recognize the post method in Node.js Express

I recently started learning about node.js and decided to experiment with the express module in my application. Everything was going well until I attempted to use the app.post method. I am developing my app on WebStorm 6.0.2 and it doesn't seem to reco ...

javascriptnode.jsexpresswebstorm

Retrieve the hidden input values from a div using jQuery

Currently, I am in the midst of a project using CakePHP with jQuery and AJAX. Within this project, I have a div that is being repeated in a PHP loop. Here is what the div looks like: <div class="heart"> <input type="hidden" i ...

jqueryhtml

JavaScript namespace problems

Although I am using a namespace, the function name is getting mixed up. When I call nwFunc.callMe() or $.Test1.callTest(), it ends up executing _testFunction() from the doOneThing instead of the expected _testFunction() in the $.Test1 API. How can I correc ...

javascriptjquery

ReactJS - What makes ReactJS unique compared to other technologies?

Hey there! I'm currently trying to figure out why this specific code snippet was successful while my previous one wasn't. I've included both snippets below: SUCCESSFUL CODE: handleInputChange = (e) => { let { value } = e.target; ...

javascriptreactjsreact-redux

Achieve horizontal wrapping of div elements

Currently, I am developing a blog where search results for articles will be displayed within divs. The design of the website is completely horizontal, meaning that articles scroll horizontally. Creating a single line of divs is straightforward, but it&apo ...

javascripthtmlcss

Can VueJS support multiple v-slots in a component?

I recently set up vee-validate v3.0 for validation in my project and everything was going smoothly until I tried to style my elements. Despite following the documentation on styling and making changes to the vee-validate config, I encountered a new issue - ...

javascriptvue.jsvee-validate

Iterating through a nested array in order to dynamically generate elements using JavaScript/jQuery

Seeking assistance with a specific issue I am facing. Despite extensive research on this platform, I have not found a solution to my problem. Recently, I successfully used jQuery each to loop over objects. However, I am currently struggling to iterate thro ...

javascripthtmljqueryarraysloops

When the page loads, should the information be transmitted in JSON format or should PHP be responsible for formatting it?

I'm considering whether it would be more server-efficient and effective to send data to the user in JSON format upon page load, with JavaScript handling the conversion into readable information. For instance, when a user visits my index page, instead ...

phpjavascriptjqueryajaxcookies

Form elements change when focused on text boxes

I am attempting to replicate the materialize style for input boxes where the label moves up and decreases in font size with animation when the text box is clicked. Although I have managed to achieve this effect, there seems to be a slight issue. When clic ...

javascriptjqueryhtmlcss

Struggling to retrieve information from MongoDB database for the web application

As someone new to the realm of MongoDB, I have been working on a web application that requires data storage. To handle this, I set up an HTTP server using Node.js on localhost:3000. Additionally, I created a virtual development environment using Vagrant an ...

javascriptnode.jsmongodbmongoosedatabase

Retrieving cached data using $http in AngularJS

When making a request to an API using $http in AngularJS, I am receiving cached results. Below is the AngularJS code snippet: $scope.validate = function(){ var encodedUserNameAndPassword = Base64.encode($scope.username + ':' + $scope.passwo ...

javascriptangularjs