If i have many events for a day then the height of month view is increased but the vertical scroll-bar is not displayed because of which i am unable to see all events, Scroll-bar is displayed correctly in Week view.
jquery fullcalendar scrollbar in basic month view.
please modify below class in fullcalendar.css file
.fc-view {
width: 100%;
height: 550px;
position: absolute;
bottom:0;
overflow-y: scroll;
}
Related
I have an app built using Vuetify.
One of the pages is used for orders and I want the user to be able to print it.
The problem is that if I have scroll in the page, only the first page shows with a scrollbar:
How can I make it display all other pages for print?
UPDATE
I have a .scroll-y class on the main section, if I use this css for print:
#media print{
body,
html {
height: 5000px !important;
}
.scroll-y {
height: 100% !important;
}
}
it works, but obviously i don't want a set height of 5000px for every print,
I can use js to calculate the height and set it but I'm wondering if there is a better/easier way?
You have to change CSS, adding something like this:
#media print {
body {
overflow: auto;
height: auto;
}
.scroll-y {
height: auto;
overflow: visible;
}
}
So .scroll-y occupied all space needed, and body will grow up to right printed size.
Of course you must adds html elements for printing page break, preview print of your view on typical print size (i.e. A4) and adding where need an breakup print element as
<div class="print-break-page"></div>
with css:
.print-break-page {
page-break-after: always;
}
You have to change the overflow and the height of the main section (the body on my example):
#media print {
body {
overflow: auto;
height: auto;
}
}
Link to the demo on codepen:
https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100 (you can export it form there)
Thanks to #Ander and #g.annunziata for pointing me in the right direction, the final setup that worked for me was:
body,
.scroll-y {
overflow: visible !important;
height: auto !important;
}
I have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have
.noscroll { // add to body when the lightwindow shows to prevent body scrolling
overflow: hidden !important;
}
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.
Thanks
You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here
To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following
.lightwindow {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
Hope this helps.
I've implemented a simple left-pull burger menu in a mobile webpage that lives inside an iframe. However, it's behaving strangely on iPhones. We are using Bootstrap for the general page layout and stuff.
Using WeInRe I've noticed the following behaviour: in an iframe with 320px in fixed width, if I add, say, left: 50px to the body of the page inside it, this body moves 50px to the left just fine, but also starts to display 370px in width, instead of 320px as before.
The problem is worse: as the correct left value is a percentage, the body gets that bigger width, and after that the left is recalculated, making the menu larger than the viewport.
What the hell is happening here? Is this some sort of known bug of Mobile Safari?
Unfortunately, there's no public available code for this issue yet...
This is the relevant code:
.offcanvas {
left: 0;
position: relative;
}
.offcanvas.active {
left: 75%;
overflow: hidden;
}
.sidebar {
position: fixed;
background-color: #5c008a;
top: 0;
left: -75%;
width: 75%;
height: 100%;
}
.offcanvas.active .sidebar {
left: 0;
}
$('[data-toggle="offcanvas"]').click(function() {
$('.offcanvas').toggleClass('active');
});
<body class="offcanvas">
[...]
<div class="sidebar">[...]</div>
[...]
</body>
Here's a sample, based on a series of side menus from a tutorial (click the left or right push options).
Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
I have a .big-container (width: 100%; height: 100%; overflow: hidden;) and in this a .container (width: 982px; height: 100%; overflow: hidden;).
I'd like to set it up so that when somebody clicks the .big-container (background) where there is no content (.content), to drop fx. www.google.hu
Here is the picture: (Gray parts to click)
How to do that? (Maybe with jQuery).
with jQuery..
$(".big-contaner").click(function(event){
event.stopPropagation();
// do something
});
you need event.stopPropagation() for custom (different from .big-container) click event managment inside child elements such as .content etc