I am using a select2 dropdown within a modal pop up window.
On mobile, when I select the select2 input, and attempt to scroll, the window does not scroll down. This means that, on mobile, if I click on the select2 box when it is in the bottom half of the screen, the keyboard sits over the input which cannot be seen.
This is my form, on desktop. The first textarea is a select2 input.
In this example I have clicked on my select2 box that is just below the radio buttons, the keyboard shows, and it is impossible to scroll down to see the input box.
Here I have added the below code, which has allowed scrolling as desired, but shows how the "Please enter 2 or more characters" tooltip does not scroll, as it is absolutely positioned.
$('.js-example-basic-multiple').on('select2:open', function (e) {
const evt = "scroll.select2";
$(e.target).parents().off(evt);
$(window).off(evt);
});
Is there a way to have scrolling that doesn't have the tooltip element floating? Is there a better alternative? I'm just trying to have a nicely formatted dropdown from a small dataset that I have on page in code.
Related
As the title suggests, I've found the ClassName of the button I want to click (I think, because the innertext on that ClassName array # gives me the correct text shown on button). Problem is, I'm clicking it but it does nothing.
This is my best attempt, among dozens, but it's not doing anything.
For Each i In IE.document.getElementById("typeSelector")
If i.innerText = "Revenue" Then
i.Click
i.FireEvent ("onchange")
'This click and fireEvent are activated but do nothing.
End If
Next i
'These next ones are Hail Mary's stacked on top of each other to see if I get a reaction out of that damn box. Nada.
Debug.Print IE.document.getElementsByClassName("chzn-single chzn-default")(0).innerText 'Prints "Select an option". I thought clicking this would at least open the drop down menu but still, nothing.
Debug.Print IE.document.getElementById("typeSelector_chzn_o_14").innerText 'Prints "Revenue". This is the option within the dropdown menu, shown after clicking the menu when manually done.
IE.document.getElementsByClassName("chzn-single chzn-default")(0).Click
IE.document.getElementById("typeSelector_chzn_o_14").Click
To summarize, I've tried activating the option based on index, clicking the box, clicking the box then clicking the "Revenue" option. The website remains completely unmoved. Should be noted that a succesful click would not update the website, simply highlight the "Revenue" option in the menu, and open up a Date input box.
In the body there is one button, on click of which a modal window pops up. There are 2 xdsoft_datetimepickers in the modal-dialog. The last datetimepicker opens beyond the screen and the last few rows in the calendar are not visible.
The calendar opens up on click of the the input field to which it is associated in the modal-dialog.
On adding overflow-y:auto to body.modal-open we can scroll down to see the calendar.
The inbuilt property of the datepicker is it will appear below the input field if there is enough space otherwise above it.
But in my case it always appears below the input field thereby, hiding the last few rows.
You can set the "pickerPosition" option value is 'top-right',code is
$('#datetimepicker').datetimepicker({
#this is other option
...
pickerPosition: 'top-right',
});
I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.
Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.
I trying to close any open jQuery tooltips which are open.
When I use $(".selector").tooltip("close"), nothing happens.
When I use $(".selector").tooltip().remove(), it removes the tooltip but the textbox also disappears.
Is there a way to just remove only the tooltip dialog?
NOTE: If a user select the text in a textbox and drags the mouse, the tooltip window remains open, that is why I am trying to force-close it.
My believe is that you are removing the element. I will suggest to hide the tooltip with its option hide.
$('#element').tooltip('hide');
https://api.jqueryui.com/tooltip/#option-hide
Can also use the option close if you actually wants to hide/close the tooltip instead of removing it.
$('#element').tooltip( "close" );
https://api.jqueryui.com/tooltip/#option-close
I have a div which hides a select box. When a user clicks on the div it disappears and shows the select box. Then when the user clicks away from the select i want the div to show again and essentially cover it up.
so, to hide the div I have the following:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\';"
When the user has touched the select and clicks away I have the following which covers the select again:
<select name="g_name" onchange="this.form.submit();" onblur="document.getElementById(\'infoi'.$div_i.'\').style.display = \'block\';" style=width:170px;>
for this to work as i want it to though, the user has to actually click the select, even without selecting anything, for it to gain focus and therefore the onblur will turn the div back on.
So, I try the following to hide the div and set the focus on the select:
onclick="document.getElementById(\'infoi'.$div_i.'\').style.display = \'none\'; document.getElementById(\'g_name\').focus();"
Bit it simply does not work, any ideas?
I have a working example of what I think you are after here http://jsfiddle.net/Znct3/10/
looking at your code you were applying focus to an element with an ID of g_name but your select only has a name of g_name