I am trying to remove the border under the ion-refresher element that appears when user pulls down. I have tried no-border no-shadow and custom css with !important but nothing seems to remove it, how can I remove the line under the ion-refresher that appears when a user pulls down
<ion-refresher (ionRefresh)="doRefresh($event)"
no-border no-shadow style="border:none !important; box-shadow: none !important">
<ion-refresher-content no-border no-shadow style="border:none !important">
</ion-refresher-content>
</ion-refresher>
You need to remove border-top. Add this to the css of your page:
.has-refresher>.scroll-content {
border-top: 0;
}
The ion-refresher does not have the border. The border is part of ion-content > div.scroll-content
Related
Ionic 4 - angular 7
ion-item-bg - CSS
.ion-item-bg{
--background: transparent;
--color:#fff;
border-bottom: 1px solid #fff
}
<ion-item class="ion-item-bg" lines='none'>
<ion-label class="open-sans-light" position="floating" style="--color:#fff;">
email
</ion-label>
<ion-input formControlName='email' autocomplete='off'></ion-input>
</ion-item>
If we save the credentials, then on reloading the UI looks like the image
Tried autocomplete off and all , but still facing the issue.
You have only said what is wrong, not what you actually want.
I'm assuming you want the textbox to be transparent as well?
Looks like you need to style the ion-input.
ion-input {
--background: transparent;
}
If that doesn't work sometimes I've had to use:
ion-input {
--background: transparent;
background: transparent;
}
Or even put !important;'s on them.
I'm using Ionic 4 and using Tabs layout.
I have to design the tabs items like
For this, the tabs.page.html is like
<ion-tabs>
<ion-tab-bar slot="bottom" color="primary">
...
<!-- center button with round border -->
<ion-tab-button tab="ride" class="tab-btn-ride">
<ion-icon name="bicycle"></ion-icon>
<ion-label>Ride</ion-label>
</ion-tab-button>
...
</ion-tabs>
To make the button round, here is the css
.tab-btn-ride {
width: 4rem !important;
height: 5rem;
border-radius: 50% 50%;
box-shadow: 0 0 0 1.5pt #ff9823;
margin-bottom: 2rem;
max-width: 5rem;
z-index: 10;
border: 3px solid white;
}
This looks fine in the browser (above image) while development. But after generating apk, it looks like the below image in Android device. The upper part is clipped or hidden below the page view.
I tried increasing the z-index value but no luck.
The round image cut because of footer height. So resolved this issues as below
Increase footer height
Reduced round image size.
How to apply background color for a full page in ionic
I used a code HTML
<ion-content padding class="bg.style">
in css
.bg-style {
background-color: #dddddd;
}
but I didn't get output please help me
try doing this
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item-content {
background-color:#ffffff;
}
The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.
Apply the background color to the .item-content element, as by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a to it in the header, with the following:
.item .item-content {
background-color: transparent !important;
}
Here's the working.demo
I have a button with shape round as follows:
<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>
The class shadow-red is:
.shadow-red{
box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
border-radius: 5px;
}
And the result is:
So I tried many different ways to change the round shape but since it isn't a css class doing the following didn't work.
.round{
border-radius:5px!important;
}
I tried adding border-radius:5px!important; to ion-button class, button, .btn, and many other combinations but none of them worked.
I have also tried to add to variables.css the following lines and none of them worked:
--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....
Don't use the shape attribute, now you can change the look of the button to your wishes. One thing to change is the expand attribute. If you set it to full, you remove the left and right borders (see in docs). And so you can't set or change the border-radius. Set it to block and you will still have a full-width button.
<ion-button expand="block" class="shadow-red">Signup with</ion-button>
Use the following CSS custom properties as described in the Ionic 4 docs.
.shadow-red{
--border-radius: 5px;
--box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}
Result:
Following code worked for me. As per your need change the height and width value to meet your requirement.
<ion-button slot="end" shape = "round" style="height: 3rem; width : 3rem">
<ion-icon name="create-outline" slot="icon-only"></ion-icon>
</ion-button>
Posting here for future references.
If you want to change the ionic button radius we can use following css. it is working on expand="block" attribute
ion-button {
--border-radius: 20px;
border-radius: 20px;
}
But in ionic button, when we use expand="full" attribute it does not work. so to overcome this limitation we can use CSS Pseudo-elements.
to add a border radius to the bellow button
<ion-button fill="solid" type="submit" color="primary" expand="full" >Login</ion-button>
as bellow image we need to select the native element within the shadow DOM
we can use below Pseudo-elements selector
ion-button::part(native) {
--border-radius: 20px;
border-radius: 20px;
}
above will add the radius on the ionic button with expand="full" attribute
I have an Angular 2 app wrapped in Ionic 2. I'm using <ion-tabs>, and within each tab is an <ion-content>. The content in this area needs to be scrollable, but Ionic 2 adds a scrollbar that I don't want displayed. It appears that, when compiled, an <ion-content> has a <scroll-content> injected into it. I don't want this behavior.
I have tried many of the solutions that used to work in Ionic 1, but they do not work in Ionic 2:
Setting scroll="false" on the <ion-content>
Setting scrollbar-y="false" on the <ion-content>
Setting overflow-scroll="false" on the <ion-content>
Setting the following in css:
.scroll-bar-indicator
{
display: none;
}
etc...
Setting the following actually does work to remove the scrollbar, but I'd rather not hijack the browser behavior, and also it removes scrollbars from content internal to the <ion-content> tag, which I don't want.
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
They have a class for that and should be able to use:
import { App } from 'ionic-angular';
constructor(private app: App) {
app.setScrollDisabled(true);
};
See forum discussion here. But it seems to have stopped working after 2.0.0-rc.1 I believe thats related to this in their CHANGELOG when they changed a lot of attributes to classes (i.e. scroll-content to .scroll-content) and the app.setScrollDisabled(true); hasn't been updated to reflect some of those changes.
If your using 2.0.0-rc.2 or 2.0.0-rc.3 I don't believe <ion-content overflow-scroll="false"> or <ion-content ion-fixed> will work either so from now create your own class.
So if you're on 2.0.0-rc.2 or 2.0.0-rc.3 you should be able to do so by adding this to your .scss
.no-scroll .scroll-content{
overflow: hidden;
}
and add this class to your ion-content like this
<ion-content class="no-scroll">
..
</ion-content>
So now just keep an eye out for this being fixed on versions after 2.0.0-rc.3.
UPDATE (2.0.0-rc.6): It looks like they made the App modules setDisableScroll function private (as seen here)
Also here's a full list of the available function for the App module by version:
2.0.0-rc.1 (has setScrollDisabled)
2.0.0-rc.2 (has setScrollDisabled)
2.0.0-rc.3 (has setScrollDisabled)
2.0.0-rc.4 (no setScrollDisabled, and no alternative)
2.0.0-rc.5 (still no setScrollDisabled or alternative)
2.0.0-rc.6 (no setScrollDisabled, and no alternative but they did a a lot more view tirgger functions like viewWillUnload)
So unless they bring it back keep using the following:
.no-scroll .scroll-content{
overflow: hidden;
}
Also I'm a sucker for them internet points so preeez upvote if you found this helpful.
In ionic2 I saw overflow-y is set to scroll by default so in your src/app/app.scss file try this:
.scroll-content {
overflow-y: auto !important;
}
This will hide scroll bar from every view and also enable scrolling when it has content.
You can override the scroll-content style in your .scss file.
// scroll-content is a class
.scroll-content {
overflow-y: auto;
}
or better still you can set overflow-y: hidden;
If you just want to hide the scroll-bar, and not want to disable the scrolling itself, then use no-bounce attr:
<ion-content no-bounce></ion-content>
thanks to larssn for his comment
But if you don't want the scroll you may also don't need the ion-content itself, in my status for example I want to use the ion-grid directly.
<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">
</ion-grid>
and I added some scss for the has-header class:
ion-app {
&.md {
.has-header {
margin-top: $toolbar-md-height;
}
}
&.wp {
.has-header {
margin-top: $toolbar-wp-height;
}
}
&.ios {
.has-header {
margin-top: $toolbar-ios-height;
}
}
}
I am using Ionic 2 rc 0
My solution is to use an ion-fixed attribute on a div I called envelope.
(in rc 0, you can't add ion-fixed to ion-content)
<ion-content>
<div id='envelope' ion-fixed>
</div>
</ionic-content>
#envelope{
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
Adding this in config.xml works for me.
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
Ionic2 has added setScrollDisabled with underscore prefix.
So if you would like to access just make use of injectable variable app and try to set the this.app._setScrollDisabled(true).I hope it will work.
Add this css into your styles,
I fetched this class from inspect element which contains scrollbar and items
ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
display: none;
}
worked for me
I got it to work perfectly in my Ionic5/Angular11 app while retaining scroll events and hiding the scrollbar with the code below:
ion-content {
width: calc(100% + 20px);
--padding-end: 40px !important;
}
ion-content::part(scroll) {
margin-right: -20px;
}
use overflow-scroll="false" in ion-content