I am using tailwind css and have added some custom animations in tailwind.config.cjs file. I have used this animation in Login component.Once user logs in he will be redirected to the home page it means login component unmounts, once it unmounts do I need to remove the animation applied to the login component manually using useEffect or it will be removed automatically. I have read that you should remove animations manually, but I am not sure. one more question When component unmounts it removes all the CSS applied to it right?
I would really appreciate it if someone could explain this to me in brief.
This is how my tailwind.config.cjs file looks-
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {
keyframes: {
changeBgDark: {
"0%, 100%": { "background-image": "linear-gradient(to left, #4c1d95,#0284c7,blue)",
"background-size":"200%",
"background-position":"right"
},
"50%": { "background-image": "linear-gradient(to right,blue,#0284c7,#4c1d95)",
"background-size":"200%",
"background-position":"left"},
},
changeBgLight: {
"0%, 100%": { "background-image": "linear-gradient(to left, #6d28d9,#0d9488,#06b6d4)",
"background-size":"200%",
"background-position":"right"
},
"50%": { "background-image": "linear-gradient(to right,#06b6d4,#0d9488,#6d28d9)",
"background-size":"200%",
"background-position":"left"},
}
},
animation: {
changeBgLight: "changeBgLight 5s ease-in-out infinite",
changeBgDark: "changeBgDark 5s ease-in-out infinite"
},
},
},
plugins: [],
};
React doesn't provide this type of function or anything . It would help if you did that manually way.
Related
I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.
The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.
I'm using the Vite buildtool, React and TailwindCSS.
The image path is ./public/images/bg-mobile.svg
I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.
If anyone knows what I'm doing wrong, I'd be really happy to know.
//tailwind.config.cjs
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"huddle-violet": "hsl(257, 40%, 49%)",
"huddle-magenta": "hsl(300, 69%, 71%)",
},
backgroundImage: {
"desktop": "url('./images/bg-desktop.svg')",
"mobile": "url('./images/bg-mobile.svg')"
},
},
},
plugins: [require('prettier-plugin-tailwindcss')],
};
//index.html
<body class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Link to the hosted site
Link to the Github repo
The relative path being used is wrong.
./ with this you mean one heirarchy up.
But according to your question ./public/images/bg-mobile.svg
So try replacing ./ with / it should work.
Final code:
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
I am trying to overwrite the css of MuiPrivateTabScrollButton.
but this class is generated from material ui so I am not able to overwite.
even I debugged by putting border colors and find out the fix, but still I am not able to findout.
all my code is in tab-demo.js
Can you tell me how to fix it, so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/n5l8znn2y0
update 1: removed unnecessary code for easy debugging https://codesandbox.io/s/8xw88yl9j0
MuiPrivateTabScrollButton: {
width: "0 !important"
},
tabRoot: {
textTransform: "initial",
width: "stretch",
display: "flex",
flex: 1,
border: "1px solid red",
"&:hover": {
color: "red",
opacity: 1,
textTransform: "initial"
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium,
textTransform: "capitalize"
},
"&:focus": {
color: "red",
textTransform: "capitalize"
}
},
In the documentation for each Material-UI component is a CSS section that indicates the classes that can be passed in to control CSS for different aspects. Here is that documentation for Tabs.
In particular you care about:
scrollButtons Styles applied to the ScrollButtonComponent component.
You then need to specify the appropriate class via the classes property.
For instance if you have the following in the styles passed to withStyles:
const styles = theme => ({
tabsScrollButton: {
backgroundColor: "green"
}
};
Then you would leverage that class like the following:
<Tabs
classes={{ scrollButtons: props.classes.tabsScrollButton }}
>
I have a cart on my website, I have maked a kind of graphic as image, that appear as bacground behind the cart when :hover.
But I was wondering how I can make this object fade/appear slowly on :hover, instead of instant as it is now.
I tried to copy the html and css from my website, but it looks bad in jsfiddle.
http://oliver.kaspertoxvig.dk/
I am not sure if this is the preferred way of doing it, but if you are using the jQuery library, this should do the trick:
$(function () {
$(".cart-css-class").hover(
function () {
// Fade in on hover
$(this).stop().animate({ "opacity": "1" }, "slow");
},
function () {
// Fade out when no longer hover
$(this).stop().animate({ "opacity": "0" }, "slow");
});
});
This assumes your element has the css class cart-css-class. To hide it on load, you should apply this CSS:
.cart-css-class {
opacity: 0;
}
I'm using TinyMCE in a Rails application. In my form, I have a "description" field with TinyMCE and this field is mandatory for the form validation.
But when I try to submit my form, I can't, because of the HTML5 form validation. My browser (Chrome and Firefox) tells me that the field is empty. And I have another problem. When Chrome displays the dialog for the empty field, it appears on the top of my page, not near my form field.
FF show up a bubble for required fileld but at wrong place, Chrome throws an error because it can't find field to show bubble.. So my solution is disable display:none style set by TinyMCE and reduce the field size and make its visibility hidden. this way browser will show bubble next to this field as this field is next to TinyMCE editor user will know what required field is missing.
textarea.tinymce {
background: transparent;
border: none;
box-shadow: none;
display: block !important;
height: 0;
resize: none;
width: 0;
visibility: hidden;
}
I used the "oninit" option in the textareas and worked:
oninit: function(editor) {
$currentTextArea.closest('form').bind('submit invalid', function() {
editor.save();
});
}
You could try to use onChange event, but it doesn't work properly in Firefox.
My complete code:
$('textarea.tinymce').each(function(){
var options = {
theme : "advanced",
skin : "cirkuit",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template", theme_advanced_buttons1 :"formatselect,fontsizeselect,forecolor,|,bold,italic,strikethrough,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,|,link,unlink,|,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
},
$this = $(this);
// fix TinyMCE bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit invalid', function() {
editor.save();
});
}
}
$this.tinymce(options);
});
I took #lucaswxp code and changed it a bit, because Firefox was throwing an error ($this.is not a function, if I recall it correctly).
Also I changed the way it fires the code from:
$this.tinymce(options);
to:
tinymce.init(options);
Full code:
$(window).load(function() {
var options = {
selector: 'textarea',
skin: "lightgray"
},
$this = $(this);
// fix tinymce bug
if ($this.is('[required]')) {
options.oninit = function(editor) {
$this.closest('form').bind('submit, invalid', function() {
editor.save();
});
}
}
tinymce.init(options);
});
Many thanks to the creator, it worked like wonder :)