Mixing
Ionic App not showing assets and ionic components properly on iOS
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
android ios iphone cordova ionic-framework asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
|
show 1 more comment
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
android ios iphone cordova ionic-framework asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
The multiple times I have encountered this issue (android though) is because of adding that extra/in the assets path. Try usingassets/img/icons8-chevron_left.png.
– Adrian
Jan 3 at 7:26
What @Adrian said is not enough. You need to go one folder back:../assets/img/icons8-chevron_left.png
– Jonathan
Jan 3 at 7:31
Neither answer worked :( still the same.
– Ivan Lencina
Jan 3 at 15:39
files are case sensitive in iOS and also on android. if you have changed the names recently, it might be because the files are still stored with an old name with different cases. If that's the case, I suggest you change the name completely to force iOS and Android to use the new file
– Mehdi
Jan 3 at 16:17
I don't know how but I solved it. The problem was greater than simple assets, because it was not showing specific ionic components neither. So, I reinstalled the platform, configured all the things in xcode (push notifications, pods, etc) in order to be able to run it on iOS, and the problem was solved.
– Ivan Lencina
Jan 4 at 17:17
|
show 1 more comment
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
android ios iphone cordova ionic-framework asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
I have an ionic 3 app working in production on Android.
Now I just build the iOS version but I have a problem with the assets and some ionic components like ion-input.
For example I expect to see that screens:
But, instead I got these:
I already checked the absolute and relative paths for images but I don't have relative paths.
For example I have this type of paths:
<ion-slide class="third-slide">
<div class="flex-container">
<div class="image-container">
<img class="corner-image" src="/assets/img/corner_plants.png" alt="corner">
<img class="center-image" src="/assets/img/mariposa.png" alt="corner">
</div>
<div class="title-container">
<h1 class="title">
Regístrate para comenzar.
</h1>
</div>
<div class="description-container">
<ion-grid class="description-grid">
<ion-row>
<ion-col col-2 class="nav-button-column">
<button class="previous" (click)="onPreviousButtonClick()">
<img src="/assets/img/icons8-chevron_left.png" alt="next">
</button> </ion-col>
<ion-col col-8 class="description-column">
<p class="description">
Meditar te ayudará a cultivar la paciencia, mejorar tu capacidad de adaptación y liberar tensiones.
</p>
</ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
</div>
<div class="access-buttons-container">
<button class="register-button" ion-button block round (tap)="openCreateAccountPage()">
{{ texts.btn_register }}
</button>
<button class="login-button" (tap)="openLoginOptionsPage()">
{{ texts.btn_login }}
</button>
</div>
</div>
</ion-slide>
And another weird thing is that the ionic components are not showing neither. You can see that the register page has three inputs and in the iPhone they don't appear. And I can't see the background image neither.
I researched about this but I could not find anything, because the most of the people only have problems with relative paths. I don't know what is the problem.
PD: Sorry for using images, but it's the only way I can share that.
Anyone can help me, please?
Thanks in advance.
EDIT:
The app works fine if, for example, I do login with facebook and navigate through it. It connects to firebase and then.. the problem is only that I mentioned.
In browsers works fine too.
android ios iphone cordova ionic-framework android ios iphone cordova ionic-framework asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
edited Jan 3 at 16:03
Ivan Lencina
asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
asked Jan 3 at 7:11
Ivan LencinaIvan Lencina
291320
291320
The multiple times I have encountered this issue (android though) is because of adding that extra/in the assets path. Try usingassets/img/icons8-chevron_left.png.
– Adrian
Jan 3 at 7:26
What @Adrian said is not enough. You need to go one folder back:../assets/img/icons8-chevron_left.png
– Jonathan
Jan 3 at 7:31
Neither answer worked :( still the same.
– Ivan Lencina
Jan 3 at 15:39
files are case sensitive in iOS and also on android. if you have changed the names recently, it might be because the files are still stored with an old name with different cases. If that's the case, I suggest you change the name completely to force iOS and Android to use the new file
– Mehdi
Jan 3 at 16:17
I don't know how but I solved it. The problem was greater than simple assets, because it was not showing specific ionic components neither. So, I reinstalled the platform, configured all the things in xcode (push notifications, pods, etc) in order to be able to run it on iOS, and the problem was solved.
– Ivan Lencina
Jan 4 at 17:17
|
show 1 more comment
The multiple times I have encountered this issue (android though) is because of adding that extra/in the assets path. Try usingassets/img/icons8-chevron_left.png.
– Adrian
Jan 3 at 7:26
What @Adrian said is not enough. You need to go one folder back:../assets/img/icons8-chevron_left.png
– Jonathan
Jan 3 at 7:31
Neither answer worked :( still the same.
– Ivan Lencina
Jan 3 at 15:39
files are case sensitive in iOS and also on android. if you have changed the names recently, it might be because the files are still stored with an old name with different cases. If that's the case, I suggest you change the name completely to force iOS and Android to use the new file
– Mehdi
Jan 3 at 16:17
I don't know how but I solved it. The problem was greater than simple assets, because it was not showing specific ionic components neither. So, I reinstalled the platform, configured all the things in xcode (push notifications, pods, etc) in order to be able to run it on iOS, and the problem was solved.
– Ivan Lencina
Jan 4 at 17:17
The multiple times I have encountered this issue (android though) is because of adding that extra
/ in the assets path. Try using assets/img/icons8-chevron_left.png.– Adrian
Jan 3 at 7:26
The multiple times I have encountered this issue (android though) is because of adding that extra
/ in the assets path. Try using assets/img/icons8-chevron_left.png.– Adrian
Jan 3 at 7:26
What @Adrian said is not enough. You need to go one folder back:
../assets/img/icons8-chevron_left.png– Jonathan
Jan 3 at 7:31
What @Adrian said is not enough. You need to go one folder back:
../assets/img/icons8-chevron_left.png– Jonathan
Jan 3 at 7:31
Neither answer worked :( still the same.
– Ivan Lencina
Jan 3 at 15:39
Neither answer worked :( still the same.
– Ivan Lencina
Jan 3 at 15:39
files are case sensitive in iOS and also on android. if you have changed the names recently, it might be because the files are still stored with an old name with different cases. If that's the case, I suggest you change the name completely to force iOS and Android to use the new file
– Mehdi
Jan 3 at 16:17
files are case sensitive in iOS and also on android. if you have changed the names recently, it might be because the files are still stored with an old name with different cases. If that's the case, I suggest you change the name completely to force iOS and Android to use the new file
– Mehdi
Jan 3 at 16:17
I don't know how but I solved it. The problem was greater than simple assets, because it was not showing specific ionic components neither. So, I reinstalled the platform, configured all the things in xcode (push notifications, pods, etc) in order to be able to run it on iOS, and the problem was solved.
– Ivan Lencina
Jan 4 at 17:17
I don't know how but I solved it. The problem was greater than simple assets, because it was not showing specific ionic components neither. So, I reinstalled the platform, configured all the things in xcode (push notifications, pods, etc) in order to be able to run it on iOS, and the problem was solved.
– Ivan Lencina
Jan 4 at 17:17
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017824%2fionic-app-not-showing-assets-and-ionic-components-properly-on-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017824%2fionic-app-not-showing-assets-and-ionic-components-properly-on-ios%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The multiple times I have encountered this issue (android though) is because of adding that extra
/in the assets path. Try usingassets/img/icons8-chevron_left.png.– Adrian
Jan 3 at 7:26
What @Adrian said is not enough. You need to go one folder back:
../assets/img/icons8-chevron_left.png– Jonathan
Jan 3 at 7:31
Neither answer worked :( still the same.
– Ivan Lencina
Jan 3 at 15:39
files are case sensitive in iOS and also on android. if you have changed the names recently, it might be because the files are still stored with an old name with different cases. If that's the case, I suggest you change the name completely to force iOS and Android to use the new file
– Mehdi
Jan 3 at 16:17
I don't know how but I solved it. The problem was greater than simple assets, because it was not showing specific ionic components neither. So, I reinstalled the platform, configured all the things in xcode (push notifications, pods, etc) in order to be able to run it on iOS, and the problem was solved.
– Ivan Lencina
Jan 4 at 17:17