I have a JQuery UI dialog with two columns of form elements. I'm using CSS float: left to create the columns. The problem is the dialog only shows a single column. What am I missing?
http://jsfiddle.net/CV9RG/1/
You columns has float:left it means if they don't have enough space on the parent to stay side by side they break in a new line. You can set a width for the dialog to auto and fixed for your columns to make it fit:
$('#mydialog').dialog({
modal: true,
resizable: false,
autoOpen: false,
dialogClass: 'no-close',
width : 'auto'
})
and CSS :
.select-col { float: left;width:250px}
See this demo http://jsfiddle.net/CV9RG/11/
Related
Is it a possible to keep grid's horizontal scrollbar (not a window scroll) called by
autowidth: true,
shrinkToFit: false,
After column resized
cmTemplate: { compact: true, autoResizable: true },
Here is jsfiddle.
Steps:
Move left border of result window to right to get grid's scrool (see pix1), then
double click the column border line - scroll bar become a lost.
My real table is too wide, so I need to save grid's scrollbar.
Has found an answer by using the following option
autoResizing: { adjustGridWidth: false},
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!
var myWindow = Ext.create('Ext.window.Window', {
header: false,
style: 'background-color: transparent; border: false',
bodyStyle: 'background-color: transparent; background-image: url(graphics/ss_message.png); background-size: 100% 100%;',
id: 'ss_banner',
width: 250,
height: component.getBox().height,
border: false,
bodyBorder: false,
frame: false,
cls: 'noPanelBorder',
});
I'm using the window xtype because I can't seem to make a container/panel appear, even if I add renderTo: Ext.getBody(), it doesn't work.
The window appears as such:
I've also tried to use css I'm rather unsure on which properties to use.
Removing window border
If you really want to remove borders of a window, you can use following configuration:
var myWindow = Ext.create('Ext.window.Window', {
// ...
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
// Show automatically
autoShow: true,
// Disable resizing, if you want
resizable: false,
});
Here is a working fiddle of removing window borders
Showing a panel
However, if you don't want to use any of the window functionality and could do with a container or a panel, you should use them. All you should need is the renderTo configuration you mentioned, to render the panel to the body or to any other element. I don't know why this configuration does not work for you, it works perfectly in the fiddle below.
You can try adding a unique class to the panel via cls configuration property and search for it in the rendered HTML code. It is possible it is rendered correctly and just not visible for some reason.
Here is a working fiddle of rendering panel to element
EDIT:
If you need to display only image, there is an image component in ExtJS, Ext.Img. You can work with this component the same way I described for the panel.
This works for me:
var myWindow = Ext.create('Ext.window.Window', {
// What shows the 'border' is actually just the background of the window
// shown via padding (+ 1px of actual border)
style: 'padding: 0; border-width: 0;',
});
Currently elements(divs) are placed as on the left side of an image.
Is there a way for them to be ordered without spare space between them (as in right side of an image)?
Here's my ui-sortable settings:
vm.sortableOptions = {
'ui-floating': 'auto',
connectWith: '.connected-columns',
placeholder: 'board-issue-placeholder'
}
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.