I have problems with rendering of my webpage in iOs using Angular 2/4/5.
A test page is: [REMOVED, I RESOLVED MY PROBLEM]
This page is displayed properly with all operative systems except iOs, I tried it with Android, Windows, with a lot of different browser and all it's ok, but with my iPhone or with my iPad the list of article is not loaded properly.
This page has this implementation for first article and similar for others:
<div class="row" *ngIf="articoli.length > 0">
<div class="col-md-12">
<app-news-card [articolo]="articoli[0]" [autore]="utenti[0]"></app-news-card>
</div>
</div>
In app-news-card component I have:
#Input() articolo: Articolo;
#Input() autore: Utente;
The news-card is built with Angular Material objects. I honestly don't think the problem is caused by this, in recent past I saw a similar situation caused by using *ngFor construct, so I can't understand where and what is the problem with iOs devices.
Somebody can help me?
Related
I have a very strange image loading issue ...
I am struggling to debug this as it appears only on iPhone (tested using both Safari & Chrome) but works absolutely fine using an emulator (Chrome).
My images are loaded directly from the image folder (example) no angular rendering or dynamic src creation:
<div class="text-center">
<a href="https://www.chess.com/" target="_blank">
<img src="images/assets/chess.com.jpg" alt="" width="200px" height="80px">
</a>
</div>
The site can be found here: http://fantasychess.online/#/
This is not an attempt to spam my web link, I am simply struggling to identify the problem. Any assistance would be greatly appreciated, I have searched low and high for similar questions but nothing relevant was found.
Instead of src use Angular#ngSource
<img ng-src="images/assets/chess.com.jpg" alt="" width="200px" height="80px">
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
I have been testing a site and I found a terrible bug in IE10.
Tour Monkey - Official site
App links are not recognized, but social ones are.
I haven't found anything good already, and the deadline is close. Thanks a lot for your help.
After giving a look I realized that I had to add some content in the a tag. In this case, an img tag.
Old HTML (working in all but IE):
<div class="app-link" id="appstore"><a class="app-link" href="https://itunes.apple.com/us/app/tour-monkey/id810107813?mt=8"></a></div>
New HTML
<div class="app-link" id="appstore"><a class="app-link" href="https://itunes.apple.com/us/app/tour-monkey/id810107813?mt=8" target="_self"><img src="img/appstore.png"></a></div>
I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
Info:
I am using JQuery Mobile (in Phonegap) for building pages and navigating via them by $.mobile.changePage() or hash.
This is JQuery Mobile page anatomy:
<div id="foo" data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Problem:
I am looking for XUI.js page anatomy, because there is really poor documentation about this library.
As Phill said, XUI isn't designed for managing DIVs as "pages", but it can be done. Andrew Lunny has built a lightweight page control in his starter application. You can inspect the source on Github and see how he converts the DIVs to pages. It requires a combination of CSS and setting classes on the DIVs in question.
Again; jQueryMobile is designed very specifically to do this all for you. XUI is not.