I am trying to use image as background using tailwind css in Create react app. But can't figure out how to add background image class.
The error:
Module not found: Error: Can't resolve './src/images/pages/login.svg' in 'C:<some_project>\src'
what i tried:
backgroundImage: {
"login-image": "url('./src/images/pages/login.svg')",
},
// assumed it starts from src
backgroundImage: {
"login-image": "url('/images/pages/login.svg')",
},
// also tried to place it into public page and include like
backgroundImage: {
"login-image": "url('/images/pages/login.svg')",
},
Any help would be appreciated! Thanks
This is how I got mine to work:
In the tailwind.config.js, I added my background to extend (make sure to put your appropriate image url):
extend: {
backgroundImage: {
awlogo: "url('./images/aw-lg-logo.png')",
awOpac: "url('./images/awopac.png')"
},
},
Here is my App.js example:
import "./index.css";
function App() {
return (
<div className="grid place-items-center h-screen bg-blue">
<img
className="bg-no-repeat w-screen h-screen opacity-5 fixed overflow-hidden z-1 bg-cover bg-awOpac "
alt="aw logo opacity"
/>
</div>
);
}
where it says bg-awOpac that basically says:
.bg-awOpac {
background-image: url('./images/awopac.png');
}
Make sure you are giving the image a height and width as well.
I am using "tailwindcss": "^3.0.23"
Related
Update: I have put my answer. Please see it.
Original Question:
Can you tell me why leaflet map doesn't show on the full map area?
.html
<ion-content padding>
<div style="height: 100%;width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
</div>
</ion-content>
.ts
init(): void {
this.options = {
layers: [
tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
],
zoom: 10,
center: this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude"))),
attributionControl: false,
};
}
UI
Please see the image. It seems a problem with transform. Default it was 0,0,0. I have changed it manually on the browser like so. So how can I set it to the map?
I had the same issue in an ionic 4 project. Like suggested in comment with link I needed to use map.invalidateSize() when I rendered the map, as well as when adding/removing markers or any other action for that matter. This didn't help completely. I also had to manually trigger change detection after that. Here's a sample from our code:
this.map.setView([this.myLocation.latitude, this.myLocation.longitude], 13);
this.map.invalidateSize();
this.ref.detectChanges();
where ref refers to ChangeDetectorRef.
Also make sure that you have the the leaflet css imported in your angular.json file:
"styles": [
// ....
"./node_modules/leaflet/dist/leaflet.css"
]
In my opinion the leaflet is filled 100% in its parents space, can you use the browsers inspect tool to see what is the parents width and height. You can also try using
position: absolute; left: 0;
to ignore parents width
Try removing the padding and changing height to 100vh
Try this:
<ion-content>
<div style="height: 100vh; width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
</div>
</ion-content>
If you want to set the transform do it like so:
<ion-content padding>
<div style="height: 100%; width:100%; transform: translate3D(250px, 200px, 100px)" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
</div>
</ion-content>
Here I'm using this with Ionic 4 app. I have tried many solutions given by different devs. But none of them worked for me. The problem here is the life cycle event which I have used earlier. So now I use ionViewDidEnter() and no issues.
ionViewDidEnter() {
this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude")));
this.options = {
layers: [
tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
],
zoom: 17,
center: this.center,
attributionControl: false,
};
this.layers.push(this.mapService.getMarker(this.center, "assets/icon/map/placeholder.png"));
}
I had the same problem, even with the import of leaflet.css and the "invalidateSize()" trick.
It was because I wrote in "myComponent.page.html":
<ion-content>
<div id="map" style="height:400px; width: 100%;"></div>
</ion-content>
It seems Ionic4 css conflicts with leaflet.
You need to get the <div> outside of <ion-content>.
Correct is just :
<div id="map" style="height:400px; width: 100%;"></div>
Hope this help someone
map.invalidateSize() runs after window resize event.
So after height change, just write the code :
window.dispatchEvent(new Event('resize'));
this.map.invalidateSize();
It works like a charm in my case.
Dont' forget to replace map with your map variable.
My it helps someone
I am using a VueMapbox with markers and trying to display it in a parent container. I added this CSS because without this the map has 0 height and width:
.mapboxgl-map {
position: relative !important;
}
I want the width to be 100% of the parent, so I added this which DOES work:
.mapboxgl-canvas {
height: 100% !important;
width: 100% !important;
}
HOWEVER, when you drag the map or zoom in, the markers move around as if the map is the default size. I've tried messing around with the CSS and I haven't had any success.
I've also tried calling map.resize() after the map gets loaded. The function gets called but doesn't do anything and once you zoom in to the map, the background disappears. Here is my component:
<template>
<MglMap :accessToken="accessToken" :mapStyle="mapStyle"
:center="coordinates"
#load="onMapLoaded"
>
<MglMarker v-for="team in teams"
:key="team.id"
:coordinates="[team.lng, team.lat]"
>
</MglMarker>
</MglMap>
</template>
<script>
import Mapbox from "mapbox-gl";
import { MglMap, MglGeojsonLayer, MglMarker, MglPopup } from "vue-mapbox";
export default {
components: {
MglMap,
MglGeojsonLayer,
MglMarker,
MglPopup
},
mixins: [teamHelper],
data() {
return {
accessToken: ...,
mapStyle: "mapbox://styles/mapbox/streets-v11",
coordinates: [-50.549668, 39.014],
map: null,
mapbox: null
}
},
props: {
teams: []
},
created() {
this.mapbox = Mapbox
},
methods: {
onMapLoaded(event) {
this.map = event.map;
this.map.resize(); // does not work
},
}
};
</script>
Once you resize the window it works as expected, so if there were a way to trigger that properly, then I feel like it should work. I've also read all of the similar questions on this I could find, and none helped, AND I read the documentation which does not mention anything about this.
I'm using Vue ^2.5.17 and vue-mapbox ^0.4.1
Alright well I found a somewhat hacky workaround. You just have to render the map component inside an IFrame, set the size of the IFrame to 100% of the parent and you're good to go.
If you need to pass data from the parent component to the child, you can do something like this: http://blog.pixelastic.com/2017/09/12/sending-data-to-an-iframe-with-vue-js/
If you have a better solution or know why the resizing wasn't working then please respond.
I created this codepen, which is a simple flip card and it works fine in codepen, but when I add this project in my vue project created with cli, everything works fine; upon clicking a card, it shows back of the card, but it doesn't apply that transition so user can visually see that it is rotating. It rotates very fast, sounds like transition is not effecting.
This is the template code
<div v-for="card in cards" #click="toggleCard(card)" :key="card.id">
<transition name="flip">
<div
v-bind:key="card.flipped"
v-html="card.flipped ? card.back : card.front"
></div>
</transition>
</div>
and the script code
export default {
name: "FlipCard",
data() {
return {
cards: [
// cards here
],
};
},
methods: {
toggleCard: function (card) {
const isFlipped = card.flipped;
this.cards.forEach((strategy) => {
strategy.flipped = false;
});
isFlipped === true ? (card.flipped = false) : (card.flipped = true);
},
},
};
and css code:
.flip-enter-active {
transition: all 2s ease;
}
.flip-leave-active {
display: none;
}
.flip-enter,
.flip-leave {
transform: rotateY(180deg) !important;
opacity: 0;
}
can anyone help why in vue cli project the transition is so fast or maybe not applying?
Thank you in advance
The codepen you provided uses Vue 2. Your question is tagged Vue 3, so I assume you are using Vue 3.
Vue 3 made changes to transition class names - https://v3-migration.vuejs.org/breaking-changes/transition.html#_2-x-syntax.
-enter and -leave are now -enter-from and -leave-from.
When I try to do a transition using the default "w-#" options in Tailwind, my transitions don't apply. When I hard code in my own classes for width, it works fine. Is there something weird with Tailwinds CSS and how it handles width that would cause this?
Here's the HTML text. The main part here is the dynamic class "sidebarWidth" which switches when the button is clicked. The transition-all, slowest and ease are all things I extended in Tailwind.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">
Here's the JS code in the computed properties of the Vue component
sidebarWidth: function() {
if (this.$store.getters.isSidebarCollapsed) {
return "w-14 invisible md:visible";
} else {
return "w-64";
}
}
If I swap out w-14 and w-64 for the following classes, it works great.
<style scoped>
.width1 {
width: 100px;
}
.width2 {
width: 400px;
}
</style>
I basically want my sidebar nav to slide in when I click a button. In mobile, the sidebar nav is hidden and I want it to slide out. In the desktop, it should be a small nav and then slide out to a full screen nav. It works, but the slide transition doesn't work. Also, the margin change between mobile and desktop does animate properly.
You need to perform a few steps to activate the behaviour you are looking for.
The first one is about extending you Tailwind theme via tailwind.config.js. You need to add the transitionProperty for width.
module.exports = {
...
theme: {
...
extend: {
...
transitionProperty: {
'width': 'width'
},
},
},
}
The changes above create the transition-width class. Simply apply this one to your nav tag. In your specific case you can overwrite the transition-all class.
<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-width transition-slowest ease" :class="sidebarWidth">
The last step is quite easy: ensure that Tailwind is recreating the CSS. Afterwards you should see a smooth width transition in your project.
Background to the Problem
By default, the width and height transitions are not activated in Tailwind CSS. Here is the CSS that will be applied when using transition class.
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
Like you can see width and height are missing in transition-property.
You can find more information about it in the Tailwind documentation.
You can make your own transition property like in tailwind.config.js :
Multiple properties :
module.exports = {
theme: {
extend: {
transitionProperty: {
multiple: "width , height , backgroundColor , border-radius"
}
}
}
One property :
module.exports = {
theme: {
extend: {
transitionProperty: {
width: "width"
}
}
}
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.