In my Ionic app, I have a modal view. I want its background to be a CameraPreview block but it's not working when I set the toBack property to true.
Here are my cameraOptions:
public cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 0,
width: window.screen.width,
height: 300,
camera: 'rear',
tapPhoto: true,
previewDrag: false,
toBack: true,
alpha: 1
};
When I set toBack to false, the cameraPreview works fine but I want to access my navbar and some buttons above the preview, so I need to find what doesn't work here.
I'll be happy to provide you with more info if needed.
Thanks!
Are you sure it is not hidden behind another HTML element?
have you tried setting the background-color?
html, body, .ion-app, .ion-content {
background-color: transparent;
}
Add this to page's constructor where you're using the camera.
document.body.style.backgroundColor = "transparent !important"
I was using a dark/light theme mode in my variables.scss and everywhere I tried to applying the
html, body, .ion-app, .ion-content {
background-color: transparent;
}
or
<ion-content [fullscreen]="true" [ngClass]="{'custom-ion-content': true}">
.custom-ion-content {
--background-color: transparent !important;
}
simply didn't work. This solved it for me.
Related
I am using ag-theme-material. I migrated to Angular 9, and I had to migrate ag-grid to v.23.0.0. However, some of the styles got changed and I am not able to change them back. The biggest issue I have is the grid's header row used to be transparent (I was on version 20.2.0 before the upgrade):
.ag-header {
background-color: transparent;
}
This doesn't work anymore. It sets my header row background to white, and I can't see the headers because the text is white. If I change it to a specific color, it works, but it doesn't accept transparent. I've tried setting opacity to 0, using an image, nothing works!
So I added a variable in my SCSS file to override this theme parameter, as specified in their migration guideline - https://www.ag-grid.com/documentation/javascript/themes-v23-migration/.
$ag-theme-override-params: (
header-background-color: transparent
);
#import "~ag-grid-community/src/styles/ag-grid.scss";
#import "~ag-grid-community/src/styles/ag-theme-material/sass/legacy/ag-theme-material-v22-compat.scss";
But that doesn't work either. Now, I know this variable is doing its job because I am able to override the checkbox-checked-color using it...
Am I naming it wrong? What am I missing???
FYI for anyone facing the same problem, I tracked it down. In version 23, ag-grid has specified a background color (in a variable) in .ag-theme-material .ag-root-wrapper (it's part of _ag-theme-base-mixin.scss), and it overrides the CSS for ag-header class. So you have to set the background-color CSS property to transparent both in .ag-header and in ag-grid-angular .ag-root-wrapper.ag-layout-normal.ag-ltr.
ag-grid-angular {
width: 100%;
height: 100%;
.ag-root-wrapper.ag-layout-normal.ag-ltr {
background-color: transparent;
}
}
.ag-theme-material .ag-header {
background-color: transparent;
}
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 have a Vue application using Leaflet as a map library. On the map, I've added a toolbar using Leaflet Draw and a button with Leaflet EasyButton. I give an image in order to illustrate below:
Development
The problem has started to appear when I created a build version of my Vue application to save on my server. The Leaflet Draw icons do not appear anymore. Just the Leaflet EasyButton icon is showing.
Production
My code is as follows:
this.llmap = L.map('map-id', {...})
let vectorLayerDraw = L.featureGroup([])
this.llmap.addControl(new L.Control.Draw({
position: 'topright',
draw: {
...
rectangle: {
shapeOptions: {
color: '#000000',
opacity: 0.2,
fillOpacity: 0.1
}
}
},
edit: {
featureGroup: vectorLayerDraw,
poly: {
allowIntersection: false
}
}
}))
Would anyone know what can be happening?
Thank you in advance.
I was looking for the question on the internet and I've found the following solution:
.leaflet-draw-toolbar a {
background-image: url('../assets/spritesheet.png');
background-repeat: no-repeat;
color: transparent !important;
}
Where I add the image manually on my static folder and I overwrite the background-image.
Sources: 1 and 2
Thank you so much.
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
Using Facebook Javascript SDK+XFBML, I'm implementing the fb 'comments widget', as explained here.
then, using the fbml line:
<fb:comments href="someurl.com" num_posts="2" width="400"></fb:comments>
creates an iframe with the comments widget.
The height of the iframe is of-course according to the length of the comments;
I need to make changes to my page according to the height of the comments widget.
I can tap into when the widget has finished loading, by using
FB.Event.subscribe('xfbml.render')
(I found it more accurate than using 'ready' or 'load'),
but I cannot get the height of the comments iframe due to cross-domain restrictions.
Does anybody know of some sort of a solution for this?
Thanks.
EDIT:
Workaround number 1: (from http://startdevelopment.blogspot.com/2011/03/issue-with-facebook-comments-box-height.html):
add a style to your page:
.fb_ltr { height: 400px !important; overflow-y: scroll !important; }
'fb_ltr' is the class used by the iframe. This will make sure it's always 400px high, and add scroll-bar to scroll content.
Of-course, the scroll-bar is ugly, so, any other ideas?
I use the same idea as yours, modified the style, but it will use min-heigh
Please try this,
.fb_ltr { min-height:100%; }
First of all, thanks for you solution, Yuval A.
Second, I found a clean and simple style for scroll bar here:
CSS scrollbar style cross browser
In short is this code:
::-webkit-scrollbar { width: 12px; /* for vertical scrollbars */ height: 12px; /* for horizontal scrollbars */ } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); }