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
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'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).
When using #media print highcharts seems to ignore with width and height in the screen section and instead use the values from the display section.
This is preventing me from printing my entire web page with the highcharts on it since the charts are not the right size when printed.
See jsfiddle example
#media screen
{
.cont
{
width: 50%;
height: 100%;
}
}
#media print
{
.no-Print{
display: none;
}
.cont
{
width: 5%;
height: 5%;
}
}
It doesn't ignore the styles. It just defines width in pixels for elements inside container. To see this, you can add set container's overflow to hidden:
.cont {
width: 5%;
height: 5%;
overflow: hidden;
border: 1px solid red;
}
(see: http://jsfiddle.net/6WxgG/15/embedded/result/)
AFAIK it's not possible to reasonably resize the chart using only CSS.
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;
}
I write my application on HTML5/CSS3/JavaScript. For my button I create style (all work fine in browser), but when I start my application on iPad my active effect override standart iOS click effect.
How I can override this standart effect?
My style :
<style type="text/css">
.button {
display: inline-block;
width: 150px;
height: 50px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.button:ACTIVE {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015) );
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015' );
}
My Button:
The answer to your problem I believe is very simple.
Add this following CSS code to your button or body tag (to affect the entire document).
body { -webkit-appearance: none; }
This will remove default styles for buttons that iOS places onto certain UI elements.
Hope that helps.
I had the same problem use the button tag and it seems to override.
<button class="button">Link</button>