How to set non pixels position?
I try this
var stack = { "dir1": "down", "dir2": "right", "firstpos1": 50, "firstpos2": 50 };
But I this it is bad because of different screen resolution.
Necroposting, but may help to other searchers. My solution without js recalculations:
js:
new PNotify({
...
addclass: 'pnotify-center'
});
css:
.pnotify-center {
right: calc(50% - 150px) !important;
}
there's a similar question with an answer here. As per the first example in the stacks documentation, you can center the initial position of the notification by setting the top/left css propreties in before_open. You also need to reposition the notification everytime the window is resized.
function get_center_pos(width, top) {
// top is empty when creating a new notification and is set when recentering
if (!top) {
top = 30;
// this part is needed to avoid notification stacking on top of each other
$('.ui-pnotify').each(function() {
top += $(this).outerHeight() + 20;
});
}
return {
"top": top,
"left": ($(window).width() / 2) - (width / 2)
}
}
$(document).ready(function() {
new PNotify({
title: "this is center",
text: "blablabla",
opacity: 0.90,
type: "info",
width: "390px",
before_open: function(PNotify) {
PNotify.get().css(get_center_pos(PNotify.get().width()));
}
});
$(window).resize(function() {
$(".ui-pnotify").each(function() {
$(this).css(get_center_pos($(this).width(), $(this).position().top))
});
});
});
When hovering over the outer nodes of graph in Cytoscape.js, the qTip dialog is not displayed.
Is there anyway to display the qTip bubbles upon hovering on an outer node? I can have the qtip popup on nodes in the upper half but not much along the sides of the graph. Especially towards the bottom half.
cy.elements('node').qtip({
id: function() {
return this.data('id');
},
content: function() {
return this.data('name') + '<br /><em>$' + this.data('weight') + '</em>';
},
position: {
my: 'bottom right',
viewport: $(etl_cyto_div),
adjust: {
cyViewport: true,
method: 'flip none'
}
},
show: {
cyBgOnly: false
},
hide: {
cyBgOnly: false,
cyViewport: true,
delay: 100
},
style: {
classes: 'qtip-tipsy',
tip: {
width: 16,
height: 8
}
}
});
I suspect your options may be causing the issue. Because this extension is a relatively thin wrapper around qtip, you just use the qTip API and options.
Try leaving options.position.adjust.method default
Try a more permissive options.position.adjust.method; see qtip docs
adjust.cyViewport is expensive (especially on touch) and can be buggy depending on the version of qtip used.
Try all defaults and see if you can reproduce your issue with the events you want. If not, then the issue is due to the set options. If so, please file your example code in an issue
I've got Uncaught ReferenceError: options is not defined.
Here is the code:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').qtip({
content: {
title: {
text: 'text',
button: 'close'
},
text: 'asfaf'
},
hide: {
fixed: true,
delay: 300
},
position: {
my: 'left center',
at: 'right center',
target: 'event'
}
});
});
You can also visit http://jsfiddle.net/H4aTZ/2/ .
Apparently there is a problem regarding the title and position working together. Probably they are going to release a update soon.
Meanwhile, if you use nightly version it actually works :)
http://qtip2.com/v/nightly/
I am using select2 plugin inside a jquery dialog but in does not work. When dropping down, the focus moves to the input control but immediately get out from it,not allowing me to type anything.
This is the HTML:
<div id="asignar_servicio" title="Asignar servicios a usuarios">
<input type="hidden" class="bigdrop" id="a_per_id" />
</div>
And this is the javascript code:
$( "#asignar_servicio" ).dialog({
autoOpen: false,
height: 500,
width: 450,
modal: true,
buttons: {
"Cancelar": function () {
$('#asignar_servicio').dialog('close');
}
}
});
$("#a_per_id").select2({
placeholder: "Busque un funcionario",
width: 400,
minimumInputLength: 4,
ajax: {
url: "#Url.Action("Search", "Personal")",
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 10,
};
},
results: function (data, page) {
return { results: data.results };
}
}
}).on("change", function (e) {
var texto = $('lista_personal_text').val().replace(/ /g, '');
if (texto != '')
texto += ',';
texto += e.added.text;
var ids = $('lista_personal_id').val().replace(/ /g, '');
if (ids != '')
ids += ',';
ids += e.added.id;
});
I have this same code in other page and it works.
Any help will be appreciated,
thanks
Jaime
jstuardo's link is good, but there's a lot to sift through on that page. Here's the code you need:
$.ui.dialog.prototype._allowInteraction = function(e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};
Just add it next to wherever you are setting the select2 drop down.
An easy way:
$.ui.dialog.prototype._allowInteraction = function (e) {
return true;
};
add this after whereever you set select2
Or try this from:
Select2 doesn't work when embedded in a bootstrap modal
Remove tabindex="-1" from the modal div
I have found this workaround. https://github.com/ivaynberg/select2/issues/1246
Cheers
Jame
There's a new version of the fix for select2 4.0 from the github issue thread about this problem:
if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(e) {
if ($(e.target).closest('.select2-dropdown').length) return true;
return ui_dialog_interaction.apply(this, arguments);
};
}
Just run this before any modal dialogs that will have select2 in them are created.
JSFiddle of this fix in action
The best solution I found was just making the dialog not be a modal dialog by removing modal:true. Once you do this the page will function as desired.
After a while of battling with this I found another option that allows you to keep the dialog as a modal. If you modify the css for select2 to something like the following:
.select2-drop {
z-index: 1013;
}
.select2-results {
z-index: 999;
}
.select2-result {
z-index: 1010;
}
keep in mind that this works however if you open a lot of dialogs on the same page it will eventually exceed the z-index specified, however in my use case these numbers got the job done.
Not enough reputation to comment on a previous post, but I wanted to add this bit of code:
$('#dialogDiv').dialog({
title: "Create Dialog",
height: 410,
width: 530,
resizable: false,
draggable: false,
closeOnEscape: false,
//in order for select2 search to work "modal: true" cannot be present.
//modal: true,
position: "center",
open: function () { },
close: function () { $(this).dialog("distroy").remove(); }
});
$("#displaySelectTwo")select2();
Updating to the newer version of JQuery and Select2 is not an option in our application at this time. (using JQueryUI v1.8 and Select2 v1)
Add this after your select2() declaration.
$.ui.dialog.prototype._allowInteraction = function (e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-dropdown').length;
};
I've used the following fix with success:
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var that = this;
$(document).on('focusin.modal', function (e) {
if ($(e.target).hasClass('select2-input')) {
return true;
}
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus();
}
});
}
I could fix this by removing the option: 'modal: true' from the dialog options.
It worked fine.
For anyone stumpling upon this with Select2 v4.0.12
I was using the Select2 option dropdownParent
i set the dropDownParent value, and still had the issue.
dropdownParent: $("#ReportFilterDialog")
What fixed it for me, was setting the value to, to select the outer layer of the modal dialog:
dropdownParent: $("#ReportFilterDialog").parent()
I have a searchfield:
this.searchField = new Ext.form.Search({
placeHolder: 'Search by lastname',
});
which works fine but I want to add a listener to the x in the box so that it not only clears what is written on the searchfield but also clears the filter I'm doing on the stores.
I'm not sure what the name of it is so I don't know how to query it to add the listener.
I'm using Sencha Touch 1.1
Sencha Touch 2.x
this.searchField.on('clearicontap', function() {
alert('cleared');
}, this);
Sencha Touch 1.x
this.searchField = new Ext.form.Search({
placeHolder: 'Search by lastname',
onClearIconTap: function() {
if (!this.disabled) {
this.setValue('');
alert('cleared');
}
}
});
Or we can rewrite it to be more like 2.x:
Somewhere in initialization of app we override Ext.form.Text component and add 'clearicontap' event:
Ext.override('Ext.form.Text', {
initComponent: function() {
this.callOverridden(arguments);
this.addEvents('clearicontap');
},
onClearIconTap: function() {
if (!this.disabled) {
this.setValue('');
this.fireEvent('clearicontap');
}
}
});
Now we can use it as in 2.x:
this.searchField.on('clearicontap', function() {
alert('cleared');
}, this);
All things above are not tested, sorry for errors if they exist.
NOTE: If anyone tries to add this inside a toolbar, there is a bug in Sencha 1.1 that will cause it to render incorrectly and the clearIcon appears outside of the textfield. In order to fix this simply addi the following code to the application.css file
.x-toolbar .x-field-clear-container {
min-height: 0;
position: absolute;
top: 2px;
bottom: 1px;
right: 5px;
font-size: 0.8em;
border-radius:20px;
}
.x-toolbar .x-input-search, .x-field-select, .x-field-clearable {
padding-right:1em;
}
You have to code like this
this.searchField = new Ext.form.Search({
placeHolder: 'Search by lastname',
listeners:{
onClearIconTap: function() {
if (!this.disabled) {
this.setValue('');
alert('cleared');
}
}
}
});
I hope this will work for you...
thanks
naresh