I want to remove the header of a child window using TIDESDK. I don't know how to use xml settings for a child window. I was successful in creating tiapp.xml file for the parent. Now, I am trying to use the Ti.UI.UserWindow APIs to remove the borders but to no avail.
Here is my unsuccessful piece of code:
var window1 = Ti.UI.createWindow('app://src/filename.html');
window1.setUsingChrome(false);
window1.setSize(400,200);
window1.setTransparency(0.5);
Every other property is accurately getting applied but the 'setUsingChrome' property shows no effect. Can someone advice how to use this property or to create a tiapp.xml file for tidesdk so as to remove the header from the CHILD window
YESSss....found out finally, but realized after finding that it was kind of silly not to try this earlier.
var window1 = Ti.UI.createWindow({
url: 'app://src/client/notifications/notifications.html',
title: "Reminders",
width: 400,
height: 200,
maximizable: false,
minimizable: false,
closeable: false,
resizable: false,
fullscreen: false,
maximized: false,
minimized: false,
usingChrome: false,
topMost: true,
visible: true,
transparentBackground: false,
});
Setting either the transparentBackground property or usingChrome property removes the header and the borders(if present).
Related
Ref: https://atomiks.github.io/tippyjs/
The z-index seems not be working when specifying interactive:true (then it falls behind other elements) although I specify the #main_container. How can I get it "on front of everything" with interactive:true?
delegate( '#main_container', {
target: '[data-tippy-content]', allowHTML: true,
interactive: true, placement: 'right', theme: 'light', zIndex: 99999
} );
see also here: https://github.com/projectje/bookmark for the above code. I made a temporary workaround by placing a BR behind every first character so that it will not flow over other boxes. But this is really a short-term workaround.
The tippy is appended to the reference element's parent by default when interactive — this can cause it to be clipped if the parent is a "containing block".
To fix use one of these:
Use popperOptions: { strategy: 'fixed' }, or
Specify appendTo: document.body + focus management for keyboard usage
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!
I need to have a calendar in week mode which would take all the width it can take and take all the height it needs to not have scrollbars.
If I keep default settings height: auto, aspectRation: 1.35, I see a vertical scrollbar:
If I change aspectRatio to 1, scrollbar disappears but I see a useless empty area at the bottom:
Is there any way to fix it except guessing the aspectRatio (which is not a case for me as minTime and maxTime are dynamically changed so the conent height changes)?
Edit:
Fullcalendar v2.1.1
http://jsfiddle.net/3E8nk/560/
contentHeight: 'auto',
Solution for old versions?
Kind of hack:ish. Does this work in your environment? I used the code from your other question.
http://jsfiddle.net/3E8nk/558/
contentHeight: '9999',
Adjusting dynamically the height instead of the aspect ratio worked for me:
Asigning the calendar to a variable when initiating:
calendar = $('#calendar').fullCalendar({
height: $(window).height()*0.83,
...
});
And then adjusting height dynamically (after checking that calendar exists already in order to avoid initial error messages):
if(calendar) {
$(window).resize(function() {
var calHeight = $(window).height()*0.83;
$('#calendar').fullCalendar('option', 'height', calHeight);
});
};
The factor *0.83 depends on your page-design.
Hope this helps.
For version 3 and 4 you can try add height: 'parent' to your config.
ref: https://fullcalendar.io/docs/v3/height
Perhaps setting the height to auto would work: It works in Month view for me.
$("#calendar").fullCalendar({
timezone: 'local',
ignoreTimezone: true,
defaultView: 'month',
weekNumbers: false,
slotDuration: "00:15",
allDaySlot: false,
slotEventOverlap: false,
firstDay: '1',
height:'auto',
I have a DataTable with 3 controls; General Search, Pagination, and Info (i.e. 'Showing 1 to 10 of 88 Entries' ). I want to place these controls in the header/footer of a jQuery Dialog window.
DataTables provides an options called sDOM, which lets one specify where to put DataTable's controls. But, I want to put the controls in the header and footer of a modal, which can not be done with sDOM.
The General Search control can be created with fnFilter, which is easy enough.
I think Pagination, and Info will require writing a custom pagination plugin, which I would like to avoid.
This is my current progress on jsFiddle.
$('#modal').dialog({
modal: true,
"height": 570,
"width": 1170,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$(".myDialog").append('<div id="dialogFooter" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><div class="dataTables_info" id="DataTables_Table_X_info"></div></div>');
}
});
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers",
"sDom": 'it<\"F\"p>"',
});
$("#modal").dialog("open");
You are doing it backwards :)
Create the dataTable
Create the modal
Move the autogenerated controls from the dataTable to the footer (or whatever)
forked fiddle -> http://jsfiddle.net/xK3TK/
I Have in the example placed the footer on top and included jQuery UI css (and you have BTW forgotten to close the modal markup </div>)
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers"
//"sDom": 'it<\"F\"p>"',
});
$('#modal').dialog({
modal: true,
"height": 570,
"width": 770,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$("#dataTable_info").detach().appendTo('#dialogFooter');
$("#dataTable_paginate").detach().appendTo('#dialogFooter');
$("#dataTable_length").detach().appendTo('#dialogFooter');
$("#dataTable_filter").detach().appendTo('#dialogFooter');
}
});
$("#modal").dialog("open");
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/