Is it possible to make the value of the 'height' tag the same as the 'width' of the table? The width changes on different screens so I think the height tag should be filled with a piece of jQuery code? I would lik to do this in order to make an exact square (and also all the td's squares).
Thanks.
Jan
You need to set the Aspect Ratio.
From doc:
The following example will initialize a calendar who's width is twice
its height:
$('#calendar').fullCalendar({
aspectRatio: 2
});
So, in your case:
$('#calendar').fullCalendar({
aspectRatio: 1
});
aspectRatio is one of those properties that already have setters, so you can define it after initializing the calendar:
$('#calendar').fullCalendar('option', 'aspectRatio', 1);
Related
I have this Mat dialog box in Angular and I understand I should pass in the styles for width and height alongside that object but I can't manage to figure out how, it keeps throwing errors. Or is there any other way to set width and height? Thank you
let dialogRef = this.dialog.open(GroupChooseComponent, {data: {variant} });
You can add width or height like this according to latest version of Angular Material.
let dialogRef = this.dialog.open(GroupChooseComponent, {
width: '500px',
height: '500px'
});
solution 1
you can't change the height or width because the library fixes the size based on { lg, sm, md }
that's my code ( in my project ), it works for me, you can follow the similar like that
this.modalRef = this.modalService.open(UploadUserComponent, { size: 'lg' });
Solution 2
You can create individual css file to customize the style width or height like you want.
I followed the tutorial on creating a popup for an add-on in Firefox, and it worked great.
The issue I'm having now is that the popup it creates doesn't change size to fit the content I add to it. Instead, it adds scroll bars.
So, how do I change the size of a Firefox Add-on SDK popup to show all content?
You do have to deal with that yourself.
If you already know the desired size when creating the panel, you can pass the height and width as properties of the object to the Panel() constructor.
After a panel is created, its size can be changed by setting the height and width properties on it.
height and width values are numbers in pixels.
See https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel for a full documentation of how to use panels.
Though the tutorial and docs never say it, the height and width of a panel always defaults to the same small size.
To change it you can use the height and width parameters for the panel class.
If you want it to change automatically you can use this code:
//index.js
var panel = require("sdk/panel").Panel({
height: 200, //choose your default
width: 200,
contentURL: data.url("popup.html"),
contentScriptFile: data.url("auto_resize_popup.js")
});
panel.port.on("resize", function (size) {
console.log(size);
panel.resize(size.width, size.height);
});
...
//auto_resize_popup.js
var content = document.body;
var size = {};
size.width = content.offsetWidth + 2; //2 extra pixels get rid of scroll bars
size.height = content.offsetHeight + 2;
self.port.emit("resize", size);
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'm having some problems with the resize of the Google Maps JavaScript API v3. If I set the CSS "parameters" right on load (just in the documentation) the map will show 100% height and width - no problem. But when I try to get the same result by clicking on a link it's not showing the whole map.
I have tested both css() and toggleClass() in jQuery on this event. toggleClass() makes the map goes invisible (hides the map completely rather than makes it full screen) with this code:
// jQuery
$('#weather-map').toggleClass('test');
// CSS
#weather-map.test {
height : 100%;
width : 100%;
top : 0;
left : 0;
position : absolute;
z-index : 200;
}
css() works (the map goes full screen) but the image above shows how the map renders upon full screen:
$('#weather-map').css({
'height' : '100%',
'width' : '100%',
'top' : '0',
'left' : '0',
'position' : 'absolute',
'z-index' : '200'
});
I wonder now, why does it act like this? Have I missed something or is this method not the right one to toggle full screen of the map?
Thanks in advance.
It's just because of how Google's mapping Javascript works. It renders based on the container's size, and doesn't add any kind of handler to re-render in case the container gets re-sized thereafter. I imagine that in your example above, you'd have to just call the map initialization code a second time to render the map again in your resized div.
I want to fit fullCalendar into a specified div space giving it a fluid effect but find it hard to do. I even tried using the aspect ratio but not getting any luck.... below is what I did so far
$(window).resize(function() {
var ratio = $(window).width()/$(window).height();
$('.resize').html('<div>ratio:'+ratio+'</div>');
calendar.fullCalendar('option', 'aspectRatio', ratio);
});
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.
you'll need to set the height property dynamically:
http://arshaw.com/fullcalendar/docs/display/height/