I've got a datatable that is responsive, except for the header. The table is initialized according to the code below:
$('.datatable-objects').DataTable({
autoWidth: false,
responsive: true,
scrollX: true,
dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
language: {
search: '<span>Filter:</span> _INPUT_',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
}
});
// Add placeholder to the datatable filter option
$('.dataTables_filter input[type=search]').attr('placeholder','Type to filter...');
// Enable Select2 select for the length option
$('.dataTables_length select').select2({
minimumResultsForSearch: Infinity,
width: 'auto'
});
$('.dataTables_scrollHeadInner').css({"width":"100%"});
$('.datatable-objects').css({"width":"100%"});
$('.datatable-objects').on( 'draw.dt', function () {
$('.dataTables_scrollHeadInner').css({"width":"100%"});
$('.datatable-objects').css({"width":"100%"});
});
});
I need the css hacks at the end in order to make it resize appropriately on window resize. Otherwise, there is a hard size put in the width property and resizing is not working correctly.
I'm not clear on why I need to add this, while in other examples I see there is no need. Anybody a suggestion?
Let's say you have the "tbl-principal" table, then you just need to add as follows:
$('#tbl-principal').dataTable().fnAdjustColumnSizing();
Remarks: if you need to resie on window resize, the code of above needs to be putted on $(window) resize function.
In my case, I´m doing a show/hide div, so... i just put the code on my function...
And that's it... It's working!
Related
I was trying to use JQuery UI Sortable plugin for multiple tables. The idea was to grab and drop elements in cells of a table, by connecting all <td> tags with this plugin.
It looks like this: https://jsfiddle.net/Lhm3z0bw/3/
By changing zoom with mouse wheel controls, we can actually grab the elements already placed in the table.
However, when the scale is changing, moving them makes a shift on the current grabbed element.
I tried adding some functions from the JQuery UI API for resetting positions for the element or updating the helper, but there's no good results on it.
$(".sortableCards").sortable({
connectWith: ".sortableCards",
containment: "window",
scroll: false,
placeholder: "sortable-placeholder",
items: ".card1",
forcePlaceholderSize: false,
sort: function(evt,ui) {
//////////
// Maybe some fix needed here ?
//////////
}
receive: function(event, ui) {
if ($(ui.sender).hasClass('cards')) {
if ($(this).find('.card1').length > 2) {
$(ui.sender).sortable('cancel');
} else {
ui.item.clone().appendTo($(ui.sender));
}
}
}
});
Here is another linked question with the same issue : How to get JqueryUI Sortable working with Zoom/Scale - mouse movements
I'm trying to get the height of a div in angularjs, but it only returns the initial value and never updates:
vm.summaryHeight = $(".history-log-container").height();
console.log(vm.summaryHeight);//returns 0 and then never logs again.
How can I get the height of this div as it updates?
I tried this:
link: function ($scope, element, attrs) {
//console.log(element.height());
$scope.$watch(function(){
return element.height();
}, function(oldVal, newVal){
//returns the initial values then nothing else
console.log(arguments);
})
}
As others have said, the value will be taken once unless you specify otherwise. Try something like;
$(document).resize(function(){
// Your code here
});
If your window size changing affects the height of the target element then whenever the document is resized the value will be retaken. This might also work if you were to target the element rather than the document;
$('.history-log-container').resize(function(){
// Your code here
});
But you'd have to check that out- I just usually have all my window responsive sizings within the one document resizing function.
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}
I am using Jquery UI like this:
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
});
$('.ui-multiselect').css('width', '100px');
What I'd like to do is set the .ui-multiselect for only the #companyType div. Something like this:
$('#companyType.ui-multiselect').css('width', '100px');
Is there a way to do this?
Thank you!
Try this code with minWidth option. It is the minimum width of the entire widget in pixels. Setting to “auto” will disable, and the default is: 225
$("#companyType").multiselect({
multiple: false,
header: "Type",
noneSelectedText: "Type",
selectedList: 1
minWidth:100
});
not sure what version you use, but v1.5 includes a new "classes" parameter that you can set for styling your multiselect element.
Have a look here on how to use it :
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
it says
Additional class(es) to apply to BOTH the button and menu for further
customization. Separate multiple classes
with a space. You’ll need to scope your CSS to differentiate between the button/menu:
Example
$("#companyType").multiselect({
classes : "myClass"
});
then in the css file use:
/* button */
.ui-multiselect.myClass {}
/* menu */
.ui-multiselect-menu.myClass {}
If you want to set that particular css rule for only elements with class .ui-multiselect contained in the div #companyType I think jquery ui has no influence in it.
Try this:
$('#companyType .ui-multiselect').css('width', '100px');
This will set width = 100px to all elements contained in #companyType that have a class 'ui-multiselect'
Another simple method for adding width to the multiselect list box is like these
It is easy than adding another class or inline styling
$('#companyType .ui-multiselect').width(200);
This will set a with of 200 px to the specified list box
For the reference, if you want to a percentage for the width (e.g 100%) apply it within resize event of the window.
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', '100%');
});
You can also assign it to another element's width dynamically:
$(window).resize(function () {
$('#companyType .ui-multiselect').css('width', $('#anotherElement').css('width'));
});
I've been experimenting with using a UI Dialog window to display an existing form (page with the form and no layout). I'm not sure if I'm doing this the right way but it seems to work fine minus a couple of pieces of bad behavior. This is the behavior right now:
The dialog window with no conent opens (very small/empty)
About a half second later the content loads and the window expands insantly (looks bad visually)
Even though the window width expands when the content is loaded, the title bar does not adjust to the new width and remains very small width wise. Although if resizeable is set to 'true' the title will expand. It's just not responding with a width adjustment when the content from the hidden div is loaded.
How could I go about not displaying the dialog until the content is finished loading into the dialog, and how could I force the dialog title to width adjust right after the content is finished loading?
<A HREF="javascript:newItem('foo')">CREATE NEW FOO ITEM<A>
<script type="text/javascript">
newItem= function(type) {
$("#form_load").load(
'/items/new', {item_type: type}).dialog({
modal:true,
draggable: true,
resizable: false,
width:'auto',
height:'auto',
title: 'Some title',
position: [150, 150]
});
};
</script>
Thanks!
You're going to want to call the dialog after the content is loading.
You can do this by using $.load's callback method.
<script type="text/javascript">
newItem = function(type) {
$("#form_load").hide().load(
'/items/new',
{item_type: type},
function (data) {
$(this).dialog({
modal : true,
draggable : true,
resizable : false,
width : 'auto',
height : 'auto',
title : 'Some title',
position : [100, 100]
});
}
});
}
</script>
You may also want to include a hide/show toggle so the #form_load container isn't displayed until the content is loaded.
See jQuery's $.load docs here: http://api.jquery.com/load/
UPDATE: Added .hide() so content isn't shown until dialog is created.