I'm using this code for my header navigation:
<ion-view title="Events" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
...
</ion view>
How to add second button to right side?
<ion-view title="Events" hide-back-button="true">
<ion-nav-buttons side="left"> <!-- left -->
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right"> <!-- right -->
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion view>
Related
I'm trying to make my header transparent with
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start">
<ion-menu-button color="primary"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<div id="map"></div>
</ion-content>
and in .scss
ion-content{
--ion-background-color: transparent;
}
ion-toolbar {
--background: transparent;
--color: white;
}
#map {
height: 100%;
width: 100%;
}
but still the div with id="map" doesn't get fullscreen and I always get this no matter what
How do I solve the problem?
html.file
<ion-header>
<ion-toolbar color="transparent">
<ion-buttons slot="start">
<ion-menu-button color="light"></ion-menu-button>
</ion-buttons>
<ion-title color="light" text-center>Sign In</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
</ion-content>
css.file
ion-content{
padding: 0px;
}
I have the following CSS:
#media screen and (orientation:portrait) {
body {
background-image: url(../img/background.jpg);
background-size: auto 100%;
}
}
#media screen and (orientation: landscape) {
body {
background-image: url(../img/background.jpg);
background-size: 100% auto;
}
}
That works fine on every device except iPhone with iOS 6.3 and smaller (works fine with iOS 7)
On iOS 6 while switching from portrait to landscape, the landscape screen is only covered half way by the background img, any idea why that is?
After doing some research I found the bug.
In the "meta" tag if you specify the "height" property, the view will NOT cover the whole width in Landscape mode.
Bad Code:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1.0, minimum-scale=1, width=device-width, height=auto, target-densitydpi=device-dpi" />
Good Code:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
I have googled quite a bit and I can't seem to find anything that makes sense to me. I need to center the contents of a webview both vertically and horizontally. I have been able to get the horizontal to work with this:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSString *bodyStyle = #"document.getElementsByTagName('body')[0].style.textAlign = 'center';";
[self.webView stringByEvaluatingJavaScriptFromString:bodyStyle];
}
But I can't find anything on vertical. Any ideas? Any help would be appreciated.
Keep everything in a table and then align the table cells.
CSS
td {
text-align: center;
vertical-align: middle;
}
or
<table border="1">
<tr>
<td align="center" valign="middle">Text</td>
<td align="center" valign="middle">Text</td>
</tr>
</table>
Vertical centering:
CGSize contentSize = webView.scrollView.contentSize;
CGFloat d = contentSize.height/2 - webView.center.y;
[webView.scrollView setContentOffset:CGPointMake(0, d) animated:NO];
Try like this,
NSString *bodyStyleVertical = #"document.getElementsByTagName('body')[0].style.verticalAlign = 'middle';";
NSString *bodyStyleHorizontal = #"document.getElementsByTagName('body')[0].style.textAlign = 'center';";
NSString *mapStyle = #"document.getElementById('mapid').style.margin = 'auto';";
[webView stringByEvaluatingJavaScriptFromString:bodyStyleVertical];
[webView stringByEvaluatingJavaScriptFromString:bodyStyleHorizontal];
[webView stringByEvaluatingJavaScriptFromString:mapStyle];
Hope it will helps you.....
Here is a problem. I am using a draggable image in UIWebview. The Source code: here:http://ios-blog.co.uk/tutorials/rich-text-editing-a-simple-start-part-7/
It simply disables the scrolling during drag and reenable it when the dragging is completed.
It works perfectly fine when UIWebview is first brought up and hereafter. As soon as the edited text length is longer than the screen. UIWebview ignores the scroll setting of its scrollview and re-enables the scrolling.
The way I disable the scroll view is using this:
webview.scrollview.scrollEnabled = NO;
Please tell me where I was wrong. Much appreciated.
This problem is caused because of the following wrap placed within the html file I loaded as a template editing section.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<style type="text/css">
html, body {height: 100%;}
body {
margin: 0;
}
#wrap {
height: 100%;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#content
padding: 10px;
}
</style>
Any div wrapped with this block will always allow itself to be scrolled.
Deleted it and things turned out to function properly again!
may use
for(UIView *aView in webview.subviews){
if([aView isKindOfClass:[UIScrollView class]])
aView.scrollEnabled = NO;
}
this makes sure that any scrollview's scrolling is disabled.
I'm struggling to get web page with a fixed background image, so the image does not move when page is scrolled in a UIWebView.
What I've discovered is: background-attachment: fixed does not work in iOS4 (using 4.2.1).
To double-check I've prepared a page with code snippet (below) inside <head> section and the page works as expected under Safari and Firefox on Mac, but fails to do so in iPhone's Safari...
What do you suggest as a workaround for achieving the expected results? I've made my UIWebView translucent and added UIImageView, so I can see "fixed background image" through translucent page. Unfortunately, I can see UIWebView borders when I scroll over its end/beginning edges.
Is there any official Apple resource/web page stating that background-attachment: fixed is not implemented for iOS4?
Cheers!
P.S. The code snippet referred above:
<style type="text/css">
body {
background: #ffffff url('image.jpg') fixed no-repeat;
background-attachment: fixed;
}
</style>
I am not sure what is going on with the CSS and have not had a chance to check it out for myself but I know when I was trying to get rid of the shadows from a UIWebView I used this bit of code:
NSArray *sv = [NSArray arrayWithArray:[myWebView subviews]];
UIScrollView *webScroller = (UIScrollView *)[sv objectAtIndex:0];
NSArray *wsv = [NSArray arrayWithArray:[webScroller subviews]];
[[wsv objectAtIndex:6] setHidden:YES];
[[wsv objectAtIndex:7] setHidden:YES];
[[wsv objectAtIndex:8] setHidden:YES];
[[wsv objectAtIndex:9] setHidden:YES];
and it got rid of the shadows. I thought I got the answer off of a SO question but when I looked for it this is the only one that came up.
It passed App Store inspection.
Use a div for the background with a negative z-index:
<head>
<style>
#background {
background: url("background.jpg") no-repeat;
position: fixed;
top: 0;
left: 0;
background-size: 320px 480px;
width: 320px;
height: 480px;
z-index: -1;
}
</style>
</head>
<body>
<div id="background"></div>
This body text appears over the fixed background and scrolls.
</body>
Works on iOS 5 and iOS 6.