Select2 not follow the select when in bootstrap modal scroll - modal-dialog

I have a bootstrap modal dialog scrolling opened. And select2 inside. When I'm scroll down and open the select, the select box isn't follow the select parent.
Image
before scroll
after scroll

I was looking for the same question and I did not find any useful answers so I have made my own.
Probably is not the best, but it solved my problem.
I created an event triggered when scrolling inside the "modal" that attach the select2 items to its parents, which are then in its new positions.
$('#exampleModal').on('scroll', function (event) {
$(this).find(".select2").each(function () {
$(this).select2({ dropdownParent: $(this).parent() });
});
});
https://jsfiddle.net/CrlsFR/oxfL8abt/

Related

How to create a modal popup on click event in a javascript ag-grid cell

Can please anyone help me with the solution I am looking for? I am trying to create a modal popup in a javascript ag-grid which will popup on click of the cell. This modal contains some of the column fields from grif itself and in addition to this I want to store a few more fields and store the object return from this modal into a grid cell. I am not sure whether I can achieve this or not.
Add cellEditor for the column in columnDefs and inside editor add :-
getPopupPosition() {
return 'over'; //"under"
}
isPopup() {
return true;
}

Modal: how to make it accessible for keyboard navigation?

I'm developing an app using Angular and Semantic-UI. It should be accessible even for people who use keyboards for navigate the app.
I'm experiencing some problems with modal:
$(".my-modal").modal({
autofocus: true
});
$(function() {
$("#open").click(function(){
$(".my-modal").modal('show');
});
});
Here is the full code of my sample: http://jsfiddle.net/s6o0tdp7
As you can see when you open the modal the focus move on the first button. I would like to have focus on the entire modal, at the begin of the modal container, so users can move with tab button to go to the other sections of the modal that lay below.
Besides the modal should prevent users from going to elements of the page that is under the modal.
How to get these two behaviours?

Wicket Modal Window, any way to close it if i click outside of the modal window?

As the title says, i am working using wicket 6 and it would be very useful if the modal window was to close when i clicked outside of the bounds of the modal window, anyone have any idea on how i might go about this?
Try by adding this JS to your page:
$(function() {
$('.wicket-mask-dark').click(function() {
$('.w_close').click();
});
});

GWT DialogBox auto resize

I have an application with some pop-ups, for which I'm using GWT DialogBox.
The content of the pop-ups can change so I need to adapt the size of the pop-up to the content.
I was initially setting the height of the pop-up on creation, but then the content would show outside it if bigger.
Removing the setHeight, the pop-up actually adapts itself to the content, but I'm having problems centering the pop-up.
When the content changes I call popup.center(), but it is not really being centered as when I set manually the height.
I think it's a timing problem, because I have added a listener to center the popup when the window is resized and in this case the pop-up is being properly centered.
Any ideas?
UPDATE: think I found the issue. The content of the pop-up includes a table. The ResizeEvent is fired BEFORE the content of the table is shown, so on centring is actually considering the size of an empty table.
I tried to add a LoadingStateChangeHandler to fire a ResizeEvent when the status is LOADED, but it's still firing too early.
The problem is that the new size of the widget hasn't been calculated when you call popup.center().
Most people use this as a solution:
// <- popup content changes here
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
public void execute() {
popup.center();
}
});

Titanium - Hide keyboard

I am a beginner in Titanium Studio. I can able to hide the keyboard when a button is selected. It works,
okBtn.addEventListener("click", function(e) { textField.blur(); });
But, how can I hide the keyboard when I tap/click on the mapView? I tried this code, Doesn't work,
mapview.addEventListener("click", function(e) { textField.blur(); });
mapview.addEventListener("singletap", function(e) { textField.blur(); });
So, how can I make it work? Thanks in advance.
The MapView only supports click events on annotations. That is why the click event is not firing in your use case.
(Note: The following JIRA ticket will clear up the documentation so that this is apparent: http://jira.appcelerator.org/browse/TIMOB-4777 )
To be able to hide the keyboard when the user wants to interact with the map, you need to get a bit creative. Overlay a transparent view on the map view when the text field is focused, and hide it whenever the text field is blurred or the overlay is touched.
Does that make sense? It's a bit of a hack, to be sure, and I imagine it might be a bit disconcerting for your users. If you can explain the desired UX a bit more, I can probably provide a more desirable solution.