When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
Related
I have a situation where a toolbar item in CKEditor5 opens a ContextualBalloon which contains an iframe.
In my current understanding, the only way to hide the balloon is to remove the iframe view i.e.
this.balloon.remove(this.colorPickerIframeView)
However this removes the iframe view from the DOM, meaning that the next time I open the balloon view the iframe is reloaded.
I'd rather not have to reload the iframe every time, is there any way around that?
If you want to only hide the ContextualBalloon's view you can try to use this.balloon.view.hide()
I use Packery.js with ability to drag element. Inside the container I have <select> tag.
When I click anywhere on the container, drag event starts. Also on child elements. This prevents drop down from opening. Example under this link:
http://jsfiddle.net/Tschareck/tXdqw/1/
How can I override dragging, and instead open dropdown, when I click on it?
The trick is to use handle.
Answer to this question:
https://github.com/desandro/draggabilly/issues/37
Using the following code, how can I keep the div open and not hidden once the mouse roll off the trigger, until another trigger is rolled over?
I am using this code on http://griffithsandpartners.com.gridhosted.co.uk/services-3/ the Customer wants a rollover action on the services button, but as they have a lot of text with some of them, you can't scroll down to view it without coming off the trigger, and then it's hidden.
They don't want a click to open.
Really appreciate your help here.
One way would be is that you remove the onmouseout of all pop-up-triggers and you set a onmouseout=document.getElementById('ALL-THE-POP-UP-BOX').style.display = 'none'; to the div with the class="postcontent clearfix"
like so:
<div class="postcontent clearfix" onmouseout=document.getElementById('ALL-THE-POP-UP-BOX').style.display = 'none';>
So when the mouse leaves the pop-up-triggers it wont hide the pop-up-box but if the mouse leaves the postcontent clearfix div it will hide all displayed pop-up-box.
Note: you have to hide all pop-up-box on pop-up-trigger mouseover so that only the current pop-up-box will be displayed.
Hope this helps.
I have a little menu that should expand to reveal the HTML below, which is hidden at present.
Following jQuery:
$('.mobileMenu').click(function(e) {
$(this).toggleClass('arrowDown').next().slideToggle('slow');
});
This piece of code works great on this page (click the "hide" feature on the left col)
However I need to utilise the same feature with my menu for "mobile width".
If you resize your browser down to 320 or so and go here you'll see the menu is just +menu (bit smashy at the mo but working). Click it, and the menu does expand to show the links, the first being "shop online" but for some reason they are hidden/not showing. Ideally the green navigation div should expand
The rest of your menu items need display: block , at the moment only the top item has it.
We are using a Telerik Rad ComboBox to render a drop down. The issue is by default it renders a div and<ul><li> for the drop down list. We tried setting the RenderingMode to "Simple" BUT for some reason the RenderingMode property is not taking. We want the Simple property because it is SUPPOSED TO ouput:
<select><option></option></select>
instead it is still rendering
<ul> <li>.
On mobile devices we want the list to pop up the device's default select option viewer.
We found that there is a property for the ComboBox to set RenderingMode="Simple", HOWEVER, it does not seem to be switching out our RadComboBox to elements, it is keeping the default. I checked the HTML output in Firebug and nothing has changed. The RadComboBox is inside a RadGrid that is triggered when "Add new record" selected.
Any reasons why setting the RenderingMode to Simple doesn't work???
EDIT
I see it rendering the select in Firebug and the style is pushed way left -9999 and the position if fixed, I overwrote the CSS so that those came into view BUT the values are not taking or inputting into our RadGrid when we click save. It does not seem the items have the same values.
EDIT 2
Image 1. Even though we have RenderingMode="Simple" it still creates the 'ul li' version.
Image 2. It creates the HTML but according to the documentation the 'ul li' is supposed to be gone and the droplist is supposed to show up in place of it. Instead, as you can see in Firebug, it inputs BOTH.
Image 3. Shows both input types when I take the -9999px or the position fixed from the CSS can see both actually are rendered on the page
Image 4. Is the Code example. Very simple .Net using the RadComboBox with the RenderingMode specified but not working correctly.