I know there are already similar questions about setting a content/page background in ionic 4, but I did manage to set it, BUT all my experiments also set the ion-card background to the content's colour, which is not really what I want. I also tried setting the background colour to the ion-grid elem using ids and classes, with the same result.
When I try styling just the body, the content's background is not affected at all.
I can probably style the other elements in the content, but I would rather know, what am I missing here in the way the ionic elements are designed to be used, and how to achieve just the background of the page coloured, not the elements on it in the content.
ion-content {
--ion-background-color: yellow;
}
From what I've found with experimenting is that --ion-background-color: sets a global background default (which defaults to #fff if not set) for ionic components. To just target ion-content it would be better to set it like ion-content {--background : #f4a942;}. You can set an ion-grid background like so ion-grid {background: #aaa;}. The issue with the ion card is that by default its background is set to var(--ion-item-background,transparent), so it will use the ion-item-background if one is set or it will be transparent, you can ignore all this by declaring the background with !important like ion-card{--background: #aaa !important;}.
If you want to find out if the component needs a --background or just background I've been having to check the ionic docs to see if it has --background in its CSS Custom Properties :/
Related
I'm using the ThemeProvider and CssBaseline in my _app.js file. It's pulling in the background color from the theme as expected.
However, on some pages, I want to override the the body background color. I was able to achieve this by wrapping my page components in a different theme and adding CssBaseline as a child but it doesn't seem like the right way to do it since I'm already using CssBaseline at the app level.
Is there a better way to do this or am I on the right path?
I think your question is a little tricky but in css file use !important to overwrite the theme or frameworks file or use inline css
I'm using Vuetify to build an app that displays local points of interest. The app uses vue2-leaflet to display the maps. Unfortunately the map pokes out of navigation drawers, dialogs, and darkener screen overlays. Here are images demonstrating it:
How can I fix it?
In my opinion if z-index needs to be changed: it's better modifying the map itself - rather than Vuetify's css which can affect other components across the app.
In the component where leaflet map is registered add
<style lang="scss">
.vue2leaflet-map {
z-index: 1;
}
</style>
This works for me using Vuetify + Vue2-leaflet (latest for today's date).
Haven't noticed any issues with other Vuetify components so far.
This is a z-index issue. Try adding the following to your CSS:
.v-navigation-drawer--temporary {
z-index: 1001;
}
You can see a working example on Codepen. I think this is the minimum z-index value that will get you the overlay that you want, but you may have to play around with it until you get the right value.
NOTE: this solution only works for navigation drawers. You'll probably have to tweak the z-index values in custom CSS separately for other types of components like dialogs. Alternatively, you might be able to find where the z-index is set in the Leaflet CSS and modify that instead. I'm more familiar with Vuetify so that's what I tweaked.
so - using material-ui v1.2.0 (and in all versions before). I started with the default example from the "Component Demos" / "Drawers" / "Mini variant drawer" example and changed
<AppBar position="absolute" className="...">
to
<AppBar position="fixed" className="...">
and now the issue is, that when I scroll down on iOS (tried on several iPads and iPhones) but I'm already at the top, the AppBar is overlaid by the background from the body (see attached screenshot with body {background:gold})
I already played with top:0 and/or adjusting the zIndex, but no success.
Thank you so much in advance
Ok, I was able to fix it - remove the
root: {... overflow:hidden ...}
And it works
I am trying with no luck to create webview with transparent background.
Any chance to achieve that?
I have tried to set style to the webview element style="background:transparent;",
Also maked sure that the body of the website loaded in the webview is also transparent.
Reading the docs can sometimes be helpful. Not reading the docs is unhelpful in all cases.
allowtransparency
<webview id="foo"
src="http://www.google.com/"
style="width:640px; height:480px"
allowtransparency="on">
</webview>
If "on", transparent elements within the webview will be shown as transparent. Without allowtransparency enabled, there will be no transparency within the webview, even if elements exist that are specified as transparent.
I have an application that opens HTML pages in a UIWebView. The pages have a specific color theme, which is disrupted by form elements on the page (I have few "select" fields), which have their own color theme (white font, light gray background). CSS can't seem to force it to display in other colors.
Does anyone know how to fix that?
Thanks!
Try using -webkit-appearance: none; to disable the browser's default styling, then apply your own styles. More info and examples at 37signals.
Try using !important in your external CSS styles. It could be that the style sheets for UIWebView are inline and are overriding your external styles.
For example, select { color:#000!important; } should override any inline style text color (unless it is set to !important as well) on <select> elements.