A very simple question but can't find a solution.
I have a starter tutorial in my App (ionic 2) made with
Everything is centered horizontaly and up (next to the navbar)
I just want to put a beautiful at the bottom of the ion-slide container, but i can't find how to do that (probably a simple css code)
Thank you in advance to the community
Go to your .scssfile associated with that page and put:
my-page {
ion-slide {
border-botom: 1px solid #CCC;
}
}
my-page is the selector name of your my-page.page.ts.
If you want to be more specific just add a class name to the ion-slide component and use that selector instead of ion-slide in your .scss file.
Related
I am building a mobile app with ionic and I am trying to change the background image of the div but its not working
Here is the code
<div style="background-image: url(./assets/IMG/set3.jpg);">
......
</div>
I also changed the file path to
style="background-image: url(assets/IMG/set3.jpg);"
style="background-image: url(./assets/IMG/set3.jpg);"
style="background-image: url(/assets/IMG/set3.jpg);"
And I have other div of such, but the background image is not displaying, pls I need your help, I have search online but non of the solutions worked
If your goal is to set background image to the entire page, you could use --background for ion-content. Something like following has worked for me.
ion-content {
--background: url('../../assets/BackgroundImages/splash-screen-background.png');
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
}
here are more details about --background CSS property
Some IDEs (Visual Studio Code) allow you to ctrl click the url (follow link) and ensure that the resource is correctly pointed to. You may want to double check. Even otherwise please check if your assets folder is present at the same level as your page html. If it is not you may have to ensure the correct path, for ex.
background-image: url('../../assets/BackgroundImages/splash-screen-background.png');
Instead of setting the background-image directly with a style tag inside your <div>, give it a class. Then, inside your CSS, define the background-image on that class. That way, the IMG folder should be relative to the CSS file or the app-root. This always gets me with every new project, and it requires some trial and error to get it right.
Is there a built-in way to set background color on <ion-content> in Ionic 3?
In Ionic 1, we could set the color scheme for <ion-content> using classes like content-stable. In newer versions of Ionic, you can set the color of certain components with input variables, for example <ion-navbar color="dark"> or <ion-item color="dark">.
I've tried this kind of input on ion-content but without any success. I could set background-color manually, for example style="background-color:#ddd;", but if there is a 'proper' way to do this in Ionic I would rather do that instead. What is the 'official' way to do this?
There is no official way of doing this. Ionic does not provide any attribute or API to change the background color of ion-content directly.
You will have to go through setting up the css yourself.
Just eg:
In your scss file :
.bg-style {
background: red;
}
and apply style to content as in your component Html file :
<ion-content class="bg-style">
In your app.scss add:
.content {
background: #f9f9f9;
}
In .scss file, you can try with:
ion-content { background-color: map-get($colors, dark) !important; }
In my application I've got an ItemReorder as described in the docs:
<ion-list reorder="true">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
It works as intended, I can drag the ion-items by pointing at the reoder icon (see freehand circle):
Testing with potential users on a tablet I found out, many users don't see the icon at first and/or try to drag the ion-item without pointing at the icon. They expect the whole ion-item to be draggable:
How can I implement this? Any insight is appreciated!
I've already checked the docs twice, googled and found this unanswered question on the ionic forum and this plugin for Ionic v1. I also scanned the code on Github without success.
The ideea of this css solution is to have the reorder icon invisible above the zone which you want to reorder. I have changed the icons to be on the right side <ion-list side="start" and I have changed the css like this
Now for me it's working.
ion-reorder{
position: absolute;
width: 22%;
max-width: 100%;
opacity: 0;
}
The cons is that there is no more visible reorder icons.
I am writing an iPhone app that has some Xpages included in the app. In Xpages I am using the Single Application Page and then Application Pages. They work fairly slick.
However, in my first page I am getting a 44px space that I do not want. I noticed that there is CSS that causes this:
.mblView {
padding top: 44px !important;
}
I have a picture of how it looks here:
http://www.flickr.com/photos/28998410#N06/
How can I override that css so that I don't get that horrible looking bar at the top.
Any help would be greatly appreciated.
Bryan
The 44px padding is there because the design expects a heading before the content. The heading needs 44px space. Here's a simple example where the heading is included:
<xe:appPage id="appPage1" pageName="homePage" resetContent="false">
<xe:djxmHeading id="homePageHeading" label="Heading"></xe:djxmHeading>
<xe:djxmRoundRectList id="djxmRoundRectList1">
Content
</xe:djxmRoundRectList>
</xe:appPage>
You can create your own custom css with the following content and add it as a stylesheet resource to your XPage. This should override the standard CSS:
.mblView {
padding-top: 0px !important;
}
I created a simple mockup of a page in DivShot:
https://dl.dropboxusercontent.com/u/4255620/page-in-divshot.png
I then downloaded the files. When I view the same page in a browser, the "search" pane is clipped by the navigation bar:
https://dl.dropboxusercontent.com/u/4255620/page-displayed-locally.png
Why are they different? What am I doing wrong? (I can fix this by editing the <body> tag to <body style="padding-top: 50px">, but this still doesn't explain why the page displays differently in divshot than in my local environment.)
This is a known issue, a quick way to fix it is just to add 60px of padding to the body:
body{ padding-top: 60px; }
We have a fix for this issue in the pipeline, expect it in the next few weeks!