xdsoft_datetimepicker in modal window opens below viewport - javascript

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',
});

Related

Select2 scrolling within a modal

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.

Pop up doesn't close even after clicking save button

I have an issue with my code:
If i do not select any value in my drop down button, it will show a pop up with the message "please select value". After selecting a value, the pop up will not close and even after saving the data it is still showing.
Give me some suggestions to close the pop up while selecting the right value in my drop down.
Here my code
error_notify('Please Select City', 'error');
$('#orgCity').addClass('errorcolor');
You need to create a close pop up function in which you can hide pop up by their id or class name and trigger them with your selection from drop down.

SlideToggle closes when Filter is chosen

Info:
I've added a button on my homepage, which triggers a div to expand. The div shows 3 different filters, which you can choose.
The problem is:
After choosing the first filter, the div closes again. To choose the 2nd and 3rd filter, you got to press the button again to expand the div. And the problem happens again when clicking on the 2nd filter.
Question:
How can I prevent closing of my div, while choosing filters?
My code:
$(document).ready(function() {
if($(window).width()<768) $("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});

Can't click or select an item from javascript dropdown menu using VBA

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.

jQuery Tooltip - close tooltip dialog without hiding the textbox

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

Categories