I'm new in ionic, I try to change alert element scss but it doesn't work.
list.html
<ion-select [(ngModel)]="dept_title" style="color: white; display:none" #sel >
<ion-option *ngFor="let data of dept_data" value="{{data.deptid}}">
{{data.deptid}}
</ion-option>
</ion-select>
list.ts
selectOpen(sel){
sel.open();
}
list.scss
page-list {
ion-option {
background-color: gray;
}
}
You can't apply css to ion-Option. Instead you have to apply css to interface type you have taken, Here by default they gives <ion-option interface="alert"> </ion-option>.
So you have to apply CSS by AlertController CSS commands you can follow step given below .
I will prefer ionic official CSS Commands.
1) Go to AlertController doc page of oficial web site of ionic . https://ionicframework.com/docs/api/components/alert/AlertController/
2) At the bottom of the page you can find an option for CSS as 'Material Design'
3) Pick CSS command from there according to your need. and apply it.
In your case you can apply :
$alert-md-background-color : #808080
You can apply it globally by putting it in 'src\theme\variable.scc' file
OR
You can apply it on your particular page by putting it in your "list.scss" page.
Hope it will help you . Thanks
Related
I'm using the Ionic Framework and I wonder if it's possible to defined global options for ion-item elements.
In .html files I got
<ion-item lines="none"></ion-item>
I would like every ion-item to have the "lines=nones". Is there a way to define it globally so that I could only use:
<ion-item></ion-item>
One way to achieve that would be by adding the following in the variables.scss file:
ion-item {
--inner-border-width: 0px;
}
Although to be honest, if in the future you want to show an ion-item with lines it may be hard to remember/debug why the lines are not shown when adding an <ion-item></ion-item> to the view.
So if the only difference is one attribute, I guess it'd be better to just be explicit and add lines="none" on each ion-item that you want to show without lines.
<ion-item lines="none"></ion-item>
<ion-item lines="none"></ion-item>
...
<ion-item></ion-item>
<ion-item></ion-item>
Need a new line after company name in a dropdown list.
I have tried everything, insert <p> & <br> tag as well.
<ion-item>
<ion-label>select</ion-label>
<ion-select okText="Okay" cancelText="Dismiss">
<ion-option value="1"> company1 address1</ion-option>
<ion-option value="2">company2 address1</ion-option>
<ion-option value="2">company3 address3</ion-option>
<ion-option value="4">company4 address4</ion-option>
</ion-select>
</ion-item>
I want to show an address in the new line. I have tried an HTML tag also between company & address. company & address are two different texts.
After using the tag, it is showing in the same line.
Updated: I know the HTML tag won't work in ion-option. Is there anyone who faced the same thing in ionic.
Its a bit awkward to inject html into an ionic element but you can get round it
css.
page-home {
.select-text{
white-space: normal;
width: min-content;
word-spacing: 9999px;
}
}
good discussion on it Can CSS force a line break after each word in an element?
hope this helps
I have a problem with ion-button in ionic v4
If I write in my app
<ion-button>Hi</ion-button>
And run the application, the app show the button with te text in uppercase
I need the buttons to be shown with the text as I wrote it. Please
In ionic-5, in theme/variables.css, you could add the following
ion-button {
text-transform: none;
}
This would apply for the entire app. Also refer this github issue comment.
Try to use text-capitalize, for every first words in UperCase
<span text-capitalize>hi</span>
or text-transform, for normal text
<span style="text-transform:none!important;">Hi Hi</span>
For more examples and other utilities check this doc, you'll like!
You can solve it by adding just inline css as following :
<ion-button style="text-transform:none">Your Text</ion-button>
Try to use mode="ios". Tested on ionic 5 :
<ion-button mode="ios">Your Text</ion-button>
You can add this style in the global.scss
ion-button { text-transform: none; }
I have tested this code and it works well
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; }
I want the user to be able to click and drag the scrollbar on the side of the screen while using my ionic app. Is this possible?
Ionic has a built in component called ion-scroll. It does what you have described and more. You can implement it inside your HTML like so.
<ion-scroll
scrollX="true"
scrollY="true">
</ion-scroll>
For me the solution was to add isBrowser variable to the controller which determined if this is mobile (no scroll bar) or desktop (draggable scrollbar).
<ion-content data-ng-class="{ isBrowserView : appCtrl.isBrowser }"
overflow-scroll="{{ appCtrl.isBrowser }}">
...
</ion-content>
And I added the following to me scss file:
.isBrowserView {
overflow-y: auto !important;
}
.isBrowserView .scroll-bar-indicator {
display: none;
}
*If you always want the scrollbar then do not worry about setting the value on a controller. Like so:
<ion-content class="isBrowserView"
overflow-scroll="true">
...
</ion-content>