I make a custom SVG icon on ionic 3 tabs, evrthing works well in browser,
but when I tested it on a device or emulator the color become wrong on the background
How to fix this?
ion-icon {
&[class*="custom-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
&[class*="custom-donkey"] {
mask-image: url(../assets/icon/donkey.svg);
}
&[class*="custom-cat-ol"] {
mask-image: url(../assets/icon/cat-outline.svg);
}
}
Please help I thing from this code
background: currentColor;
&[class*="custom-donkey"] {
mask-image: url(../assets/icon/donkey.svg);
}
&[class*="custom-cat-ol"] {
mask-image: url(../assets/icon/cat-outline.svg);
}
instead of Adding The Url/Path of the SVG icon Try to add the SVG Code or You can Directly add the SVG code in bottom menu in HTML and Adjust the Size using CSS Class
Related
I have a Flutter web app that contains a SingleChildScrollView and a number of elements in it. When viewed on my iPhone's Safari, the URL and bottom bars do not hide as I scroll downwards as it would on any other site.
I've tried a number of things including using different elements like ListViews and playing with the physics, but the URL and bottom bars still are not dismissed.
Any ideas how I could configure a web flutter app to help the browser recognize the scroll and dismiss them?
Check out this thread in GitHub: Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari
Credit: jamesblasco
You can add this to the of the index.hml file of any flutter project and try it also there.
<style>
body {
height: 500vh !important; /* Bigger than 100% to allow scroll */
position: static !important; /* Override absolute from flutter */
overflow-y: scroll !important; /* Allows verticall scrolling */
overflow-x: hidden !important;
touch-action: pan-y !important; /* Allows vertical scrolling */
overscroll-behavior: none; /* Avoid bouncing scrolling on top/bottom edget */
}
/* Centers flutter canvas with a size of the viewport*/
flt-glass-pane {
position: fixed !important; /* Overrides absolute from flutter */
top: 50vh !important;
left: 50vw !important;
max-width: 100vw !important;
max-height: 100vh !important;
transform: translate(-50vw, -50vh) !important;
}
/*
Scrollbar hide doesn't work on iOS, they add a default one when overflow:true and -webkit-overflow-scrolling: touch;
Sadly since iOS 13, this value is forced on iOS -> https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
*/
::-webkit-scrollbar {
display: false;
width: 0px;
height: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
</style>
Why is my ion-backdrop + modal shadow styling not working when I open a modal on top of another modal?
PREFACE: This was working fine with V4, but broken on the upgrade to V5. I don’t want to change my page approach, just fix the CSS/whatever is actually causing the issue below.
My app opens a modal page with custom css to make it full screen.
I can then open another normal modal (but not full screen) over the
top. This 2nd modal is missing the ion-backdrop and its border shadow
styling.
I can see the ion-backdrop is definitely in the DOM, but it’s
obviously not showing.
Step1 Fine
enter image description here
Step 2 - broken ion-backdrop:
enter image description here
Showing my custom modal:
async showClipboard() {
const modal = await this._ModalController.create({
component: ClipboardPage,
cssClass: 'custom-round-modal',
componentProps: {
user: this.user
},
showBackdrop: true
});
await modal.present();
}
The CSS:
#media only screen and (min-width: 768px) {
.custom-round-modal {
.modal-wrapper {
border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
.ion-page {
border-radius: 15px !important;
-moz-border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
}
}
}
First off, I think you pasted the same screenshot twice by mistake. But I'm having the same issue, so I know what you mean.
It looks like Ionic 5 introduced this css for the modals:
.sc-ion-modal-ios-h:first-of-type {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}
Which means when you show multiple modals at the same time, only the first one will get the backdrop.
A possible workaround is to add the backdrop yourself to your global css using something like this:
ion-modal {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}
Or use the css class Ionic is using (but note that this one is iOS specific, so you'd likely need to do the same with the Android-equivalent class):
.sc-ion-modal-ios-h {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}
NOTE: This will likely not look good if you are showing multiple modals on top of each other that are not fullscreen, since you'll be getting multiple backdrops on top of each other (so they'll get increasingly darker). But since your issue is a non-fullscreen modal on top of a fullscreen one, I think it will work in your case.
Hopefully the Ionic team will come up with a more elegant solution to this issue.
Thank you krisloekkegaard for your code, that helped me really out.
I want to add that it will only work if placed in the global sass or css files! You cannot do that from a component's style-file, because the modal will be created outside of it.
The following lines are a bit more precise, because they will activate the backdrop only on the last modal. Even if you have 10 stacked modals, there will be only the backdrop of the first and the backdrop of the last element overlaying each other.
.sc-ion-modal-md-h:last-of-type {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
.sc-ion-modal-ios-h:last-of-type {
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
This is addressed now in the Ionic Documentation.
Please see under 'Customization' section for ion-modal : https://ionicframework.com/docs/api/modal
Add the following CSS to your modal class -
ion-modal.stack-modal {
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
I solved the issue adding the following css into variables.css file in Ionic v5. Give a chance.
.backdrop-no-scroll {
ion-router-outlet {
background: white;
}
I want create a drop down menu or popover within ionic toolbar. I tried with several ways but can not solve. Its always hidden like bellow,
I trying css like bellow,
.popover{
border: 1px solid black;
height: 350px;
width: 150px;
position: absolute;
z-index: 99999999;
background: yellow;
}
ion-header{
contain: none;
}
ion-toolbar{
contain: none;
}
Please give me a suggestion or an alternative idea. Please do not give any predictive answer if you are not familiar with ionic.
I don't know about Ionic 4 but on Ionic 5, a solution would be this when you debug on the console :
ion-toolbar {
contain: none;
.toolbar-container {
overflow: visible;
contain: none;
}
}
However, the .toolbar-container is an element in the shadow dom of the <ion-toolbar> component and its overflow and contain properties are not css variables and there is no part attribute on this element neither. So there is actually no way to override those properties.
I'm considering using this package, but for me it seems like overkill to use js and timeout for setting a pretty simple style... :
https://www.npmjs.com/package/shadow-dom-inject-styles
I had a similar problem when I had to make a searchbar overflow underneath the header (design thing). I was struggling a while and it popped in place suddenly when I place the searchbar outside of the toolbar and gave it position absolute:
<ion-head>
<ion-toolbar>
<!-- My stuff here -->
</ion-toolbar>
<ion-searchbar></ion-searchbar>
<ion-header>
My css looks like this:
ion-toolbar {
display: flex; // I need this for something else, but maybe has an influence
}
ion-searchbar {
padding: 0 1em .5em 1em;
transform: translateY(-50%);
z-index: 99999;
position: absolute;
}
Hope it helps somebody.
In case anyone is still looking for the solution. Here is how I managed to fixed it in react. It's a bit hacky solution, but most likely the only one ATM.
First we need to style the toolbar (pass a className or style to component:
.your-toolbar-classname {
overflow: visible!important;
contain: none!important;
}
Then we have to also style the shadow-root parts. Se we can use the useEffect after the header is mounted and set the style
// Header.tsx
...
useEffect(() => {
const style = document.createElement('style');
style.innerHTML =
'.toolbar-container { overflow: visible!important; contain: none!important; }';
toolbarRef.current.shadowRoot.appendChild(style);
}, []);
...
Just use ion-menu, its a build in ionic component
https://ionicframework.com/docs/api/menu
There is also ion-popover
You should look at the ionic docs before posting on stack
How can we change the default underline color of a ion-text in only a single page in Ionic 4?
The underline is actually a part of the ion-item, not the ion-input.
ion-item {
--border-color: var(--ion-color-danger, #f1453d);
}
Ionic 4.x uses CSS Custom Properties for most of the time.
src/app/pages/test/test.page.scss
:host {
ion-item {
--border-color: white; // default underline color
--highlight-color-invalid: red; // invalid underline color
--highlight-color-valid: green; // valid underline color
}
}
If necessary, please check the other custom properties here.
For Ionic V4.X is a little bit diffrent.
You can open specific_page.scss file where you want to change ion-input border when input value is Valid o Invalid
Change the colors of the following class, like this:
:host {
.item-interactive.ion-invalid{
--highlight-background: yellow !important;
}
.item-interactive.ion-valid{
--highlight-background: black !important;
}
}
Try this css
.item-has-focus{
--highlight-background: #e2e2e2;
}
To aggregate in app.scss file
.ios {
.item-has-focus.ion-invalid {
--border-color: var(--ion-color-danger, #f1453d);
}
.ion-valid {
--border-color: var(
--ion-item-border-color,
var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
);
}
.custom-item {
--background: transparent;
color: #fff !important;
--background-focused: transparent;
}
}
.md.custom-item {
--background: transparent;
color: #fff !important;
--background-focused: transparent;
--border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(255, 255, 255, 0.8)))
);
}
Or use class to you custom .custom-item.hydrated.ion-touched.ion-dirty.ion-invalid.item-label.item-interactive.item-input.item-has-focus.item.ios.ion-focusable
I am working on a project where I have to develop a theme in which I have to customize navigation and breadcrumb bar and many other things too.
Main part is how to change the color of navigation bar.
Liferay 6.2
tomcat 7
windows 7
To change the color of navigation bar I used a small image and repeat that image. In
custom .css
.navbar-inner {
background: url("../images/navigation/nav_bg.gif") repeat-x;
/*added by me for navigation bar*/
/*background: #404041;
/*added asif ##141415 and hence this will change the background of navigation bar color */
border-width: 0;
min-height: 36px;
li a {
color: #FFF;
}
}
either by using
background: url("../images/navigation/nav_bg.gif") repeat-x;
we can change the color. Here nav_bg.gif is a very small image and I am using that one as background color I just repeat that one.
background: #404041;
we can also change the color.
webdoctor is a .css file created by me and this is inside color_schemes folder.
in webdoctor.css
.webdoctor #navigation {
background: url("nav_bg.gif") repeat-x scroll 0 0 #404041; /* change the corner color of navigation bar */
clear: both;
margin: 0 auto 5px;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
}
Include the following in navigation.css or custom.css found in your theme folder -
Path : portal-liferay/tomcat/webapps/ROOT/html/themes/classic/css
#navigation {
background: #414445 url(portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation/bg.png)repeat-x 0 0;
}
The png image 'bg.png' must be of the custom color you desire. Edit the image in paint and replace the one in the images folder.
Path : /portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation