I am trying to find a Text view / editor for Phonegap iOS Application.
Basically I am expecting it to be looking like
with a custom header. So my question is that can I just inherit the UITextView portion from the plugin if there is any and still use my customized header of my HTML?
This is a Notes app that I am creating to make which requires this. I tried using regular jQuery, Html, CSS for this but it starts jumping all over when I enter text.
Related
My Cordova/Ionic (v1.3.0) App consists primarily of a JQuery App that builds the HTML for complex forms. The same JQuery App is used to build the complex forms for the web browser with only a few places where it inserts mobile-specific code.
I am now trying to have a horizontally scrolling table section within the vertically scrolling form (the form itself doesn't scroll horizontally, just the table section). The section horizontal scrolling works in Safari/Chrome/Firefox on the computer, in Safari on iOS, and in the Android version of our Cordova/Ionic app but it doesn't horizontally scroll in the iOS app.
I tried various fixes based on these SO questions and documentation (q1,q2,q3,q4) where I changed it from a <div/> to <ion-content/> and added the overflow-scroll="true" direction="xy" delegate-handle="tableGroup" properties and called $ionicScrollDelegate.$getByHandle('tableGroup').resize() after the JQuery app loaded but nothing worked. I also tried using TinyScrollbar based on this question but that wasn't loading right. So I've tried going many directions but haven't gotten anywhere. Any suggestions?
I actually figured this out on my own. I put a couple variations of a simple scrolling elements in containers on the Ionic page and <ion-scroll/> worked. Then I tried putting it in the JQuery app with a delegate handle sectionScroll and called $ionicScrollDelegate.$getByHandle('sectionScroll').resize(); after the JQuery app loaded but got a console warning saying that it couldn't find anything named sectionScroll and that I should put it in a $timeout(). I tried that but it still didn't work. Then I realized that since <ion-scroll/> is an angular directive that is created as part of a long template string inserted into the Ionic app using JQuery, it needed to be compiled by Angular to be recognized as below:
let toCompile = angular.element('#formContent');
let linkFn = $compile(toCompile);
linkFn($scope);
$ionicScrollDelegate.$getByHandle('sectionScroll').resize();
I'm using Froala editor (the free version) and I have the problem that I can't see any icons on the formating buttons.
Is there any way to fix it? Thanks!
You're not including Font Awesome correctly or if you have simply opened a HTML file using the file protocol the icons don't appear in Firefox (see Fonts Not Showing https://froala.com/wysiwyg-editor/browsers).
It is best to include Font Awesome like on https://github.com/froala/wysiwyg-editor/blob/master/examples/basic.html#L6 in order to avoid all the issues above.
I need to open Pdf / Docx documents for preview from a Phonegap app.
On Android it's possible to open files in extenal apps using WebIntent plugin.
Now what about iOS? It seems possible to do this entirely with the build-in browser (which surprisingly does render docx) by creating a html page with a header and a back button in the top and an iframe taking up the rest of the screen.
It would be great if the user could zoom and drag the document while the header would remain stationary, but I couldn't get to zoom working at all inside the iframe.
Any suggestions?
I ended up using InAppBrowser Plugin with enableViewportScale=yes. It displays a toolbar with a back button with custom caption. It would be better if I can add my own toolbar, so the navigation is consistent in the whole app, but this is good enough.
I have an application that uses Webview in iOS7. I was wondering if there is anyway via CSS or HTML to tell the picker to wrap the text instead of showing "...". iOS 6 would wrap the text but in IOS 7 the text gets ... after 25 characters.
Thanks,
Faraz
I fear that's not possible.
The Webkit used in the UIWebview uses the same UIPickerView as native apps, and there's no way to customise it via CSS nor JS etc.
It looks like the ellipsis it adds in the text is the new behaviour of UIPickerView itself in iOS7.
If you really need to customise the picker, you should implement one in HTML, CSS, JS etc, by yourself.
If think it worth the effort, you should also take a look at Sencha Touch's picker.
If i create a div that has contenteditable true inside of an iframe and if you double click it it becomes non functional.the focus is still in the iframe and you can see the cursor, however it does not respond to keydown
Does anyone have an idea of how I can i overcome this?
EDIT:
i have implemented a dojo editor. if you open this link in ipad you will see the problem as described above.
Which OS you are using? You should make sure that you are using OS 5.0 or later. According to the (Apple's Technical Notes) and Safari Web Content Guide. It is written:
The HTML contenteditable attribute is supported in iOS 5.0 and later. In earlier versions, replace contenteditable, used to enable text input within a styled element, with a styled textarea element. In Safari, you can customize the appearance of textarea elements using CSS. If necessary, you can even disable any platform-specific, built-in styling on a textarea element by setting -webkit-appearance to none.
So, if you are using an old OS version, you could use textarea elements instead of contenteditable. Then, it is guaranteed that your application will work as well.
PS. you can use your IPAD to go on this website, to try how does it work with textarea. It might be an example for you.
Hope that helps.
Trying to get a contenteditable div to work inside of an iframe is one level of complicated, if you are trying to get it to work inside of a specific WYSIWYG editor like Dojo editor, is another level harder, as there is a lot of JavaScript affecting the interactions. It would help to explain the parameters a little better in your question.
Have you used a browser debugger (like Firebug) to see what's happening when you click?
This other SO question and answer about contenteditable div vs iframe is useful.
Finally, if you are using iOS Safari, make sure you are using Safari 5.0 or better as the contenteditable attribute was only recently supported on that browser.
EDIT:
Since you are using iOS 6, you should be using the iOS Safari JavaScript Debugger to let you know what's happening a little more clearly when you click on the editable div. If you can find some more specific error messages, please update us.