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;
}
Related
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>
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 wonder how some apps do this great affect, i've trying to accomplish this but without much success.
the idea is to add views like textview or label to a webview or to scollview so that it appears with gray background and can be scrolled, the below image describes the intended goal :
I would be very much appreciated if you help me.
Use following code and just background color your UIView.Hope It will helps you.
[webView setBackgroundColor:[UIColor clearColor]];
[webView setOpaque:NO];
Use a pure HTML/javascript/CSS solution, not a native UIVIew laid on top of the UIWebView
CSS like this creates an initially invisible box, 400px wide, 120px from top, white background, bordered:
.floater
{
display: none;
position: absolute;
top: 120px;
left: 50%;
width: 400px;
margin-left: -200px;
z-index: 200;
background-color: #ffffff;
border-top: solid 2px #b0b0b0;
border-left: solid 2px #b0b0b0;
border-bottom: solid 2px black;
border-right: solid 2px black;
}
Use this class="floater" on your label, div, whatever.
You can then use the display style to hide/unhide it via javascript.
If you want your content to scroll within the webView, You have to add the view as a subview of the first subview of the webview.
The scrollview is the first subview of the webview
[[[webview subviews] objectAtIndex:0] addSubview:imageview];
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.