Please refer to the following image:
I'm trying to move the tableTools buttons (Copy, Excel, CSV) down a little bit so that it looks like the buttons are at the same level as the Search Box... I've tried all kinds of sDom parameters without success.
Here's my current initialisation code:
$(document).ready(function () {
$('#myTable').dataTable({
"bSort": false,
"bPaginate": false,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "../../Scripts/swf/copy_csv_xls.swf",
"aButtons": ["copy",
{
"sExtends": "xls",
"sButtonText": "Excel",
"sFileName": "*.xls"
},
"csv"]
}
});
});
Just removed tableTools positioning... and it is working now.
Related
I'm having trouble showing a modal with Ember. I've followed the cookbook but when I click the button for the modal, it only shows the overlay and not the modal itself.
Here's my gist: https://gist.github.com/sunocean-sand/e11111cea44274417012
I appreciate your help!
I've got a similar implementation in one of my apps. Try changing your routes/application.js to the code below. I believe your problem is that you're not using Bootstrap's Programmatic API.
export default Ember.Route.extend({
actions: {
openModal: function(modal) {
this.render(modal, {
into: 'application',
outlet: 'modal'
});
return Ember.run.schedule('afterRender', function() {
Ember.$('.modal').modal('show');
});
},
closeModal: function() {
Ember.$('.modal').modal('hide');
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
I've tried everything I can think of to get the tooltip by the hovered-over event. But for whatever reason it just appears every time in the top left corner of my browser window.
Here is my javascript:
$(document).ready(function(){
var tooltip = $('<div/>').qtip({
id:'myCalendar',
prerender:true,
content:{
text:' ',
title:{
button:true,
},
},
position:{
my:'center left',
at:'center right',
target:'mouse',
viewport:$('#myCalendar'),
adjust:{
mouse:false,
scroll:false,
},
},
show:false,
hide:false,
style:'qtip-light',}).qtip('api');
$('#myCalendar').fullCalendar({
editable:true,
eventMouseout:function(e,j,v){
tooltip.hide();
},
eventMouseover:function(e,j,v){
var event = '<h3>'+e.title+'</h3>';
tooltip.set({'content.text':event,}).reposition(e).show(e);
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I'm using all of the same javascript and css linked from this example on jsfiddle:
http://jsfiddle.net/craga89/N78hs/
Can someone spot where I'm going wrong?
I couldn't ever get the code above to work, so I decided to go a different route and use the render event instead. Now it works exactly as I wanted by putting the qtip in the middle of the right side of each fullcalendar event on mouse over.
$(document).ready(function(){
$('#myCalendar').fullCalendar({
editable:true,
eventRender:function(event,element,view){
element.qtip({
content:{
text:'<h3>'+event.title+'</h3>',
},
position:{
my:'center left',
at:'center right'
},
show:'mouseover',
});
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I still don't know why using this code works as expected. Note: I didn't change any of the stylesheets or javascript included with either fullcalendar or qtip, just something about how the code above was implemented improperly.
I'm able to create a jquery ui dialog using the following:
$("#dialogs .add_entry").dialog
({
height: 500,
width: 750,
autoOpen: false,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
modal: true
});
<div id="dialogs">
<div class="add_entry">Test</div>
</div>
But when I later use $("#dialogs .add_entry").dialog("open"); to open the dialog nothing happens (No js errors). I think it is selector related, switching the autoOpen to true shows the dialog. Has anyone come across this?
$(function(){
$element = $("#dialogs .add_entry");
$element.dialog({
height:500,
width:750,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
autoOpen:false,
modal: true
});
$element.dialog("open");
});
This works if placed BEFORE the element. Does not work after. Also does not work with out variable, does not work without wrapper function... what a buggy function.
Try this:
$("#dialogs > .add_entry")
OR
$("#dialogs").children(".add_entry")
I am using a jqGrid that has allot of columns to it.
I added the view option (when clicking on a row and then on the 'view' button, in the bottom left corner of the grid, it opens a model with all the info for that row.
I see that the model has some css style:
overflow-hidden
Therefor if i have allot of columns to show after a certain height that i gave it when creating the grid, they get hidden.
How can i make that dialog box be:
overflow-auto
If possible i want only the inside div to scroll and leave the header of the dialog and the buttons on bottom there all the time.
How can i do this?
myGrid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, del: false, search: false, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{},
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
I tried this:
$('#viewmod'+myGridId).css({overflow: 'auto'});
But it didnt work...
You tried the way described here and here.
Found the answer for this.
When declaring the view options add the dataheight option...
{ dataheight: 250, jqModal: false, closeOnEscape: true} // view options
I have the following code, which generates a basic layout for my app:
tabpanel = new Ext.TabPanel({
fullscreen: false,
ui : 'dark',
sortable : false,
tabBarDock: 'bottom',
cardSwitchAnimation: 'flip',
items: [{
title: 'Tab 1',
html : '1',
cls : 'card1',
icon : 'tab1'
}]
});
lists.views.Viewport = Ext.extend(Ext.Panel,{
fullscreen: true,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: "top",
title: 'title'
}],
items: [tabpanel],
initComponent: function() {
this.tabpanel.add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
},
});
This doesn't work, probably due to the fact that the TabPanel that is inside the Viewport Panel cannot be pointed to like this. I've searched through the sencha documentation but I can't find how to add the
new lists.views.ItemLists()
to the tabpanel, which in turn is inside the
lists.views.Viewport
Also, there will be other stuff I want to declare before my viewport (or even after it) that I want to add to specific other panels I might add later. What is the best way to achieve this?
Any ideas on how to do this?
Thanks!
If you take the this. off the reference to the tabpanel in the Viewport's initComponent method then it should work because the tabpanel variable is global.
Alternatively, you can access the Viewport's items via the items property, for example,
initComponent: function(){
this.items.get(0).add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
}
Hope this helps
Stuart