I am currently building a calendar and timeline view with fullcalendar v5.
My customers want to have a month view where they can overlook the whole month at once, no scroll bars. I know you can set the contentHeight to auto, but there is no option for width.
My slotDuration is 1 day. This is a non-negotiable.
I'd like to do this responsively and not hardcode column widths in pixels.
Does anyone have a suggestion?
You can try width as one of the following values :
width: fit-content;/*Will give width upto the content of calender can fit completely*/
width: max-content;/*Will give width upto the max-content of calender*/
width: 100%;/*Will give the full container width to calender*/
width: 100vw;/*Will give the full view-port width to the calender*/
Use this so that padding don't create extra space and lead to overflow :
*{
box-sizing: border-box;
}
Related
I am wondering if there is a way that the ag-grid can have a min height when using domLayout = true ? When there are no rows it will show the spinner but it does not look good because the height of the grid is so short. I have tried some css min-height on the container and the style of the grid being style="width: 100%; height: 100% but that did not make a difference.
Anyone come across this and able to get a min height so the grid is not so short when there are a small amount of records?
Thank you
I recently had a similar issue. I forced a min-height by using the following CSS:
.ag-center-cols-clipper,
.ag-center-cols-container {
min-height: 300px !important;
}
Note that if you are using pinned columns, or other advanced features, you may need to override more styles.
I'm trying a more fluid design.
I want specific divs to be a percentage of the overall body. I also want to set fluid / liquid padding within each div.
<body>
<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>
</body>
CSS:
body {
margin-top: 85px;
min-height: 100%;
}
.image {
content: image_url('something.jpg');
width: 100%;
height: auto;
}
/*I'm assuming the padding I'm setting is a percentage of the .fourty
div not the overall body. Granted, width is 100%.*/
.fourty{
padding: 4% 8%;
min-height: 40%;
width: 100%;
}
.sixty{
padding: 4% 8%;
min-height: 60%;
width: 100%;
}
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
How do I correct / achieve this? I'm open to a JS solution, but would be more interested as to how to accomplish this in CSS.
As far as CSS goes, there are no styles that you can apply to make an element's height equal to a certain percentage of the total document (body) height.
CSS does, however, offer you options to style an element's heights to a certain percentage of the viewport height (using VH units), but since this does not achieve your goal, I'll leave you with a javascript answer that does.
Relevant javascript functions:
function getDocumentHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight);
};
function setDivHeight(target, percentage) {
var desiredHeight = getDocumentHeight() * (percentage/100)
target.style.height = desiredHeight + 'px';
};
To set the height initially and on viewport resizes:
var targetDiv = document.getElementById('target');
setDivHeight(targetDiv);
window.addEventListener('resize', setDivHeight.bind(null, targetDiv))
The problem I'm having is that the percentage height does not seem to take effect for these divs. It seems to just be an auto height based off the contents of the div.
That is correct. The reason is that your code is in violation of the spec.
From the W3C height property definition:
percentage Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's
containing block. If the height of the containing block is not
specified explicitly and this element is not absolutely positioned, the value computes to 'auto'.
auto The height depends on the values of other properties.
In other words, if you're going to use percentage values, you'll need to use the height property from top to bottom.
From the browser's perspective, min-height (and max-height) don't adhere to this rule and, therefore, as the spec says, they compute to auto.
DEMO (with your code, revised)
Read more here: Working with the CSS height property and percentage values
As an aside, I think its safe to say that the height definition is thoroughly obsolete. It hasn't been updated since 1998 (CSS2) and there are many ways for establishing the height of a box. Confining percentage heights to only the height property doesn't make much sense anymore.
Firefox seems to agree. Recent versions now accept flex heights, as well. See examples here:
Height is not correct in flexbox items in Chrome
Chrome / Safari not filling 100% height of flex parent
Flexbox in Chrome--How to limit size of nested elements?
I want to load in a bunch of random images (of varying widths and heights) to a column. The column will have a fixed width, and the height will have to be cropped off proportionally to keep the image in it's original height to width ratio. (similar to how Pinterest structures their boards.)
Anyone know how this could be accomplished with Javascript or JQuery?
You can just use css:
img.autosize {
width: 500px; /*Specify your width here*/
height: auto;
}
This will keep the images in your site to a fixed width (use max-width in case you don't want all of them to be the exact same width) and the height will adjust itself accordingly to maintain aspect ratio.
Of course, if you want to use javascript or jQuery, you can set the css properties in your script. This is just a hassle-free way to do it.
This has to be the most simple case of css issue. But I could nt find a solution to this problem..
I have a main div which has min-height of certain value. Ive given the min-height in in % so there is no outer div and it will not show the min-height. if I give min - height in px , it will show up.
but I am trying to get the min-height to be 50% of window height and it could vary in each devices, so giving height in px is not an option for me... if I give jquery.css() function, and keep it document.ready() function, when the page starts loading, it will have zero height and it will come down to height that Ive specified and that doesnt look good in website..
Case 1 : http://jsfiddle.net/pT56y/
FIDDLE EXAMPLE
case 2 : http://jsfiddle.net/pT56y/2/
Is there a proper way to deal with this issue?
in order to use a percentage height, the parent must have a set height (either in pixels or %):
body,html{
height: 100%;
}
.container-fluid{
background:#000000;
width:100px;
min-height:50%;
}
Fiddle
I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?
I figured it out by myself. Posting my answer -
When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised
Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});
Galleria needs a height to initialise correctly. You can do this either via CSS or JS.
If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to be 100%. See below.
**JS:**
Galleria.run('#galleria', {
responsive:true,
showCounter:true,
thumbnails:false,
trueFullscreen:true,
});
**CSS:**
#galleria{
width:100%;
height: 100%;
position: fixed;
z-index: 9999;
top:0px;
bottom: 0px;
}
body,html{
height:100%;
width:100%;
}
The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).
height:1.5 would result in (w=2, h=3)
To keep it responsive you can use max-width rather than width when styling the container.
If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.