I'm using MFMailComposeViewController inside my application and I've noticed that part of the message has been cut off. Right now it's only trimming the "Sent from my iPhone" text, but should users remove this, I don't want any of the message trimmed back.
Here's a screen cap of what I'm talking about:
To keep my app description as simple as possible, I'm launching the controller from a TabController and it covers the whole screen as a modalView.
I had the same problem and found that it was a header tag at the beginning of the html which seemed to be throwing the entire system spacing off. NO IDEA WHY
Limit yourself to <div><p> using inline styles to get the look you want and it should correct the issue
Or even more simply, put a non breaking spacer before the <h1> or <h2> etc
Related
Building an ionic app and I noticed that ion-header is always fixed to the top of the page, I cant seem to find a way within the frame work to enable it to scroll with the content so I have now totally removed it from all my pages and just added a header to the in the form of a which has the back button etc
What I am wondering is, if this is the standard way to achieve what I want or is there a better way ? is there any issues i may encounter by removing ion-header etc..
Well the first thing that I must say is that having the header fixed at the top of the page is a standard both on iOS and Android, so that's why Ionic does it - mobile app users expect your app to behave like that just like 99% of the rest of the mobile app do.
Is there any issues I may encounter by removing ion-header etc..
Since Ionic expect the header to be in a specific place within your pages, you may have issues related to:
Page transitions: Like you can see in this answer the iOS page transition won't work properly if the header is not placed where Ionic expects it to be.
"Overscrolling" on iOS: When you are at the top of the page and you still try to scroll a bit to the top on iOS, you'd expect the content of the page to scroll but the header to remain in the same position. If the header is not fixed at the top you'd see a section with a white color background at the top of the page when overscrolling.
iPhone X safe areas: Ionic uses some CSS rules to make sure the header has some extra padding at the top in devices like the iPhone X to handle the top notch that those devices have. If you place the header in a different way, you may need to fix that manually with your own CSS rules.
Status bar overlapping: Also related to the previous item, the header prevents the content to be shown behind the iOS status bar. If you don't have a header, you may need to add some extra padding to your content to avoid this.
If you really need to hide the header in your app, one way to avoid these issues would be to make the header to be hidden when the user scrolls. That way the header would still be where Ionic wants it to be, but it will go away as soon as the user scrolls (this is also a known pattern that some apps do). Please take a look at this amazing post to know how to do something like this:
Ok, so I'm using the suggested window-scrollTo method and it's working just swimmingly everywhere except for one little sticking point.
When Safari decides to show the "Reader" button figuring I might want to save my page for later reading, it keeps the address bar up for a full 5 seconds before finally hiding it like I asked. Kind of an eternity in UX time.
Is this an iOS 6 thing or did it also do this in iOS 5? (I don't have a 5 device to test it on at the moment.) Also, is there any way to get around it?
I've looked around quite a bit and there doesn't appear to be any way to disable the reader button. The only possible solution I found was to make your site less "readable" so Safari doesn't add the reader button. Exactly what makes a site "readable" is pretty murky.
Here's some research on what makes something "readable": http://mathiasbynens.be/notes/safari-reader
Here's a method to make it less readable by putting your content in CSS: http://askmike.org/2012/12/a-hacky-way-to-remove-the-reader-button-in-ios-safari/
The bottom line seems to be that there is no solution. Hopefully Apple will add a meta tag to disable it or at least let us hide the address bar faster.
Here is what worked for me:
I placed all content inside an ol tag.
<ol style = "padding:0;margin:0">
my content
</ol>
From what I read elsewhere, the reader is partly triggered by the number of words on a page, but does not count words inside an ol.
You can disable the reader button by hiding the content that triggers it.
And then displaying that content 1s after the page loads.
For instance, hide all your <p> elements if they are triggering the reader button.
I have a mobile site which I'm testing on the iPhone, and unlike most other sites, I'm not able to hold my finger on the screen to get the 'copy' menu to appear (with the draggable handles to select an area to copy). Nothing happens at all on my site.
I've tried adding the following to my style sheet but it hasn't made any difference:
-webkit-user-select: text;
I should also state that I have the following also in my style sheet and within the page head:
-webkit-text-size-adjust: none;
I've got these as I didn't want the content to be scalable, and just wanted the content to span 100% of the device width.
Would the implementation of any of the above be causing the lack of selectable text on the site? Out of interest, I tried the flickr mobile website which also is not scalable and uses 100% of the device width like my site, and that also doesn't seem to come up with the draggable/select area for copying when you hold your finger on some text.
Does anyone have any idea why this is or how I can make the text content (or any content actually) selectable for copying/pasting?
Thanks
are there any elements that may be obscuring the items by overlaying them, etc? a z-indexing issue, perhaps?
I have a problem. Part of my app requires text to be shown in a table. The text needs to be selectable/copyable (but not editable) and any URLs within the text need to be highlighted and and when tapped allow me to take that URL and open my embedded browser.
I have seen a couple of solutions that solve one of either of these problems, but not both.
Solution 1: Icon Factory's IFTweetLabel
The first solution I tried was to use the IFTweetLabel class made possible by Icon Factory and used in Twitterrific.
While this solution allows for links (or anything you can find with a regex) to be detected to be handled on a case by case basis, it doesn't allow for selecting and copying.
There is also an issue where if a URL is long enough to be wrapped, the button that the class overlays above the URL to make it interactive cannot wrap and draws off screen, looking very odd.
Solution 2: Use IFTweetLabel and handle copy manually
The second thing I tried was to keep IFTweetLabel in place to handle the links, but to implement the copying using a long-tap gesture, like how the SMS app handles it. This was just about working, but it doesn't allow for arbitrary selection of text, the whole text is copied, or none is copied at all... Pretty black and white.
Solution 3: UITextView
My third attempt was to add a UITextView as a subview of the table cell.
The only thing that this doesn't solve is the fact that detected URLs cannot be handled by me. The text view uses UIApplication's openURL: method which quits my app and launched Safari.
Also, as the table view can get quite large, the number of UITextViews added as subviews cause a noticeable performance drag on scrolling throughout the table, especially on iPhone 3G era devices (because of the creation, layout, compositing whenever a cell is scrolled on screen, etc).
So my question to all you knowledgeable folk out there is: What can I do?
Would a UIWebView be the best option? Aside from a performance drag, I think a webview would solve all the above issues, and if I remember correctly, back in the 2.0 days, the Apple documentation actually recommended web views where text formatting / hyperlinks were required.
Can anyone think of a way to achieve this without a performance drag?
Many thanks in advance to everyone who can help.
As soon as I hit the submit button, a new idea hit me.
I was so preoccupied with having URLs inline with text and interactive that I didn't consider that maybe it's not the best solution.
I'm certain that to achieve that kind of behaviour, a UIWebView is the best choice, regardless of the performance issues.
However, maybe a better user experience / interaction is to not highlight the URLs inline, but to gather them into an array behind the scenes, and present a disclosure button as the cell's accessory view?
Then for selection and copying text, I could just use the UITextView with data detectors turned off and not worry about the links being sent off to safari and closing my app.
When the disclosure button is tapped, the user could be whisked off to the URL found in the text, or if more than one URL is found, present the user with a picker view to choose which to go to.
Any thoughts/criticisms of this idea are welcome.
You can prevent a textfield from being edited by overriding the UITextField Delegate methods such that they do not apply any edits. That leaves the field selectable and copyable but prevents alteration.
A better question to ask is: do you actually have to display the actual URL itself? Can you get away with just a page/location name, just the server.host.domain prefix or some other condensed representation of the url? I don't think anyone whats to try to read a long url on a mobile's restricted screen.
If you do need to display the entire url then I think that a detail view is the way to go.
We are trying to write a training manual application for the iPhone. On the top half of the screen is a diagram of a car engine, on the bottom half is some text. At the user repeatedly hits a "next" button, we highlight different parts of the engine, and in concert we highlight different parts of the descriptive text below.
We basically want "living text" in the text half, with the illustration following along on top to where the reader is in the text. What we'd like from the text is 1. user can scroll it using their thumb so possibly a UIScrollView 2. the software can explicitly drive a scroll to any part of the text (when they hit the "next" button). 3. the words in the text are interspersed with hotlinks e.g. "this is the camshaft... this is the piston..." and the user should be able to click on any of the keywords like camshaft, piston, and have the diagram highlight that. (The problem is not highlighting the diagram, its capturing the click). The text would have 300~400 buttons/links/keywords and about 600 words of text.
Since this is fairly similar to using a web browser, we tried using Apple's version of webkit using a UIWebView and handleOpenURL to register a service back to the app itself. But Webkit for internal links a popup comes up asking permission to access that link. Every single the user wants to go to a link (in our case just an internal event that we'd intercept so that we can highlight e.g. the camshaft). Tried to intercept the event from the HTML view, but that didn't work.
It seems like the best we can do is to abandon scrolling text, and make the text part more like flash cards or a power point presentation, breaking the text into custom UIViewCells with buttons inside a UIScrollView. However, this would impose an annoying constraint on the author that they would have to write everything to fit in the UIViewCells, sort of chunky.
Any ideas would be appreciated.
This is definitely something you can use a UIWebView for. Don't use handleOpenURL, rather, set your viewController as the webview's delegate, and override -webView:shouldStartLoadWithRequest:navigationType:. When this gets called, check the request, and pull out your link data from there.
It would probably be easier to implement that completely in JavaScript in the document you load in a UIWebView. You would have to use JavaScript (i.e. [UIWebView stringbyevaluatingjavascriptfromstring:]) anyway to achieve things like scrolling to a certain position.