I make the application ionic 3 and use the library chortjsfor sharing graphs. Since the width of the mimic screen is not large and I do not want to fit in all the 12 months I want to scroll. I do this:
<ion-scroll padding scrollX="true" style="width: 100%; height: 100%">
<canvas id="myChartDiogram" width="500" height="500"></canvas>
</ion-scroll>
But the scroll does not work. What am I doing wrong?
try this way
<ion-scroll padding scrollX="true" style="width:100vh;height:100vh;overflow-x: scroll" >
<canvas id="myChartDiogram" width="500" height="500"></canvas>
</ion-scroll>
Related
I am using below code
<ion-scroll zooming="true" direction="xy" style="width: 100%;height:100%" delegate-handle="zoom-pane" class="zoom-pane" min-zoom="1" scrollbar-x="false" scrollbar-y="false" overflow-scroll="false">
<iframe id="rframe"
ng-src="{{rm._iframe}}"
style="height: 100%;width: 100%;",
name="r_container">
</iframe>
</ion-scroll>
But on rendering I am not able to zoom in content of iframe. What's the issue here
I put two images side by side on one page under the header as col-50. The issue is I want both images the full 50% width without any padding around any edges. I can't seem to figure it out with CSS
<div class="col col-50 row-no-padding">
<img src="img/facebook.jpg" style="width:100%; display: inline-block">
</div>
<div class="col col-50 row-no-padding">
<img src="img/twitter.jpg" style="width:100%; display: inline-block">
</div>
The above worked in my browser (ionic serve) but did not work on my device.
the problem is images are considered to be inline, as a result any white space is considered as space, try this:
<!-- both images should be in-line to have it working -->
<img style="width:50%; display: inline-block" src="the_image_source"/>
<img style="width:50%; display: inline-block;" src="the_image_source/>
you can also isolate the css if you wish
img{
style: inline-block;
width: 50%;
}
You could just use :
no-padding
to the col div
<ion-row>
<ion-col col-6 no-padding></ion-col>
<ion-col col-6 no-padding></ion-col>
</ion-row>
See Ionic Documentation for Grid
Hope this helps.
I have created a jssor slider, that scales well but kind of flickers when displayed on an iPhone 4S both in landscape and portrait but is fine on an iPad. I suspect it's hitting the limit of scaling or some such issue.
Also any idea on how to centre the slider vertically.
The URL is www.anamacdonald.co.nz/2.html
Please place your slider in the wrapper below,
<div style="position: fixed; display: table; width: 100%; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div id="slider1_container" ...></div>
</div>
</div>
Or you can use $('#slider1_container').css("top", top); to set top of slider1_container to change position manually while window resize.
I made a website that has a jquery slider with left and right arrows that move to the next slide (webpage). All of the content is contained in one webpage and uses hashes.
http://www.ilandeistudio.com
It needed to have different full screen backgrounds for each page (hash) so I used a CSS technique that puts full screen backgrounds in DIVs which I found here (CSS Technique 1)
http://css-tricks.com/perfect-full-page-background-image/
This works but the height of the image is running off the bottom of the screen and therefore adding vertical scrollbars and you can't see the whole background image. I don't mind distorting the backgrounds a little (they are all w1024px x h682px) I just want the whole image in the viewable area.
I haven't been able to get it to work with CSS, let me know if someone has a suggestion otherwise maybe someone could recommend a jquery solution; but I don't know how to make most of those jquery examples work inside the DIVs for the multiple hashes.
Here is the CSS I am using now:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: absolute;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
And here are examples of two of the slides
<div id="home" class="slide">
<img src="images/bg_home1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="header">
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
</div>
<div class="content">
test content
</div>
<!--Content ends-->
</div>
</div>
</div>
<div id="about" class="slide">
<img src="images/bg_about1.jpg" class="bg">
<div class="outer-wrapper">
<div class="inner-wrapper">
<!--Header starts-->
<div class="header">
<!--Navigation starts-->
<div class="nav">
Previous
<span class="rightnav">Next</span>
</div>
<!--Navigation ends-->
</div>
<!--Content starts-->
<div class="content">
test content 02
</div>
<!--Content ends-->
</div>
</div>
</div>
The code itself looks correct. One thing that you didn't include but I would make sure of is that the header and navigation you have listed are positioned absolutely on the page rather than floating left and using margins to position things. That will add space to the 100% of the page.
So the image itself is expanding to the height of the page and the heights of header and navigation are being added on top of that. Most likely that is the problem if you seem to scrolling the height of those objects.
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.