I have a FullCalendar with a TimeGridWeek view.
Each time slot has a height of about 20 pixels.
When I change the slotDuration from 00:30:00 to 00:15:00, the height of each slot stay the same. I would like it to change to about 10 pixels so that the overal height of the calendar stays the same.
How do I do that?
Here's an example of what I want to achieve:
There's no support for this in fullCalendar (perhaps you could make a feature request to get it integrated). This is a bit of a workaround, and there's no guarantee that some situation might not break it, but in the simplest case you can do something like this in your CSS:
.fc-slats td {
height: 10px !important;
font-size: 8px !important;
}
Demo: https://codepen.io/ADyson82/pen/KjJXMv
Related
I try to do a carousel with Swiper.js but even after following a tutorial, I can't have 3 frames display. I end up with 3 plus a part of another one.
I think I must have a margin somewhere but can't find it
Here's the codepen to show what I mean : https://codepen.io/MakeThisWork/pen/jOKjPpK
I tried to change the width of my elements, to change the margin or the padding, but nothing seems to work
I've also tried to change slidesPerView to 2.9 (not enough) and 3.1 (too much)
Even this post, didn't help: Swiper JS - show part of next slide
The first thing, you don't need to set the slidesPerView to 2.9, you can keep it as 3 and it will work.
The second and the important part, is the problem here, all the problem is the border of the slides, the border property increases the width and height of the element, and when increasing the slide size, everything works wrong in your swiper.
You can handle that by just adding box-sizing to your slide set to border-box like that:
.swiper-slide {
border: 2px solid green;
height: 90% !important;
box-sizing: border-box;
}
Or just remove your border and put background for example.
I created a RadioGroup and it turned out 79 pixels tall, even though I tried setting the height to "fit to content" or "fill parent". There is lots of space between the two options, so I would like it to be shorter but it is ignoring the height option. Any ideas?
Thanks for any pointers or suggestions.
You can reduce the padding between the items with:
.app-RadioGroup-Item {
padding: 0px;
}
Although I suggest 2 or 4px (it's currently 8px).
If you want to mess with the actual size of the items, you can style the input element, something like:
.app-RadioGroup-Item input {
height: 12px;
width: 12px;
}
Note you'd probably want to tweak more than just the height and width, and this doesn't look very good. I'd suggest sticking to only styling the padding if that's enough for you.
There is a similar question here, but it pertains to ionic 1 where the ion-item still has ion-content. In ionic-2 there is not ionic-content. I've tried changing the height/padding/margin of the actual ion-item, and the class item-inner and can't seem to get a uniform "skinny-ing" of the ion-items.
Question: How do I make the ion-items in an ion-list skinnier/smaller/not as tall in ionic 2? Ps. this is using ionic 2 beta 10
I found that the main issue with this is in the app.ios.css file native to ionic that the .item class that gets assigned to the ion-item element gets a min-height assigned to it of 4.4 rem. I'm not sure where that value came from or why it's 4.4. So, in my .scss file pertaining to the list, I just added:
.item {
min-height: 3rem; /* <- this can be whatever you need */
}
This made it so any changes that I made to the margins( I ended up changing the margin to 0 8px 0 0 respectively ) of the inner elements actually changed the height of the list item because they weren't bumping up against a min-height setting. See other answer for where to change the margin.
Without changing the min-height of the list item, any changes to the margins of the inner elements didn't do anything (at least for me ).
Change the top-bottom padding on <ion-label>. The default is this:
ion-label {
margin: 13px 8px 13px 0;
}
Following this link:
http://stuff.dan.cx/js/filepicker/google/
a demo of a google picker, one can see that the picker iframe here has a minimum size 566 * 350, even when the browser is resized to dimensions even smaller.
I want this iframe to be always in proportion to the browser being resized, i.e., responsive.
Can anyone help me with where and what change do I need to make this happen? Sorry but I do not know a lot about CSS...
I solved it by adding these global styles to the page which made the picker spread on the entire page and shrink when the page shrinks dynamically
.picker {
height: 100% !important;
width: 100% !important;
top: 0 !important;
}
I have this code: http://jsfiddle.net/VV9qJ/ but for some reason I cannot seem to fix the little pixel errors caused by the images. Basically you'll notice that some of the images have a pixel or two white gap around some of them whilst some do not, especially when you resize the browser window. Each browser renders the white gaps slightly differently as well.
My layout must not have any gaps and all content must be tight up against each other, including the browser window.
Is there a fool-proof method of ensuring the images remain tight up against one another at all times across different browsers? jQuery perhaps? I've done loads of Googling but found nothing on this.
Still haven't found a fix for this. I find it hard to believe that a solution isn't out there, can anyone help at all?
Unless I'm not understanding what's wrong, I can't seem to reproduce the problem with the white gaps, but it sounds like it could be a margin or padding problem.
div.smallLink {
display: inline-block;
font-size: 100%;
margin: 0;
padding: 0;
width: 50%;
}
You might also have to set margin and padding on img tags within .smallLink to 0.
Add following code under your groupoflink div
letter-spacing: -4px;
http://jsfiddle.net/VV9qJ/11/
Your problem is the width:100% on the div with the class content ..
while the div bearing the class banner is also set to 100% width occupies the complete 100% of the space,but when your subdividing the 100% into 50% + 50% what's happening is that its dividing the 100% width say - 500 into 250 + 250 for you sub divisions.But the division happens properly only when the width taken by its parent( since its dynamic) is an EVEN NUMBER.. i.e, 2(n) ..
else,the 50% division doesnt happen properly,say 501 was the space available which means the div's with 100% width will take up the complete space which is 501 -- but the child div's with 50% width will get 250px and 250px leaving behind that `1px gap that your noticing!!..
To remove the white space give a background-color so that you can overlook the 1px white space that creeps up!!
This isnt the best method to overcome this -- there should be a css way which i'm unable to think of right now.. so,here's a JS solution..
function load(){
var largelink = document.getElementById("largelink");
largelink.nextSibling.style.width = largelink.parentNode.offsetWidth-largelink.offsetWidth + "px";
}
window.onload = load;
window.resize = load;
i.e,Parent -- if 501 and the 1st child with 50% will be 250 hence the second child will be 501-250 + "px"
Edited only 1 set of your HTML ( you should do the same for the rest ) -- changed to get the id of the parent( 15 its 501 ) and the largelin ( if its 501 - this would be 250 )
<div id="largeLink" class="largeLink">
Havnt tested it.. hope it works..