Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 months ago.
Improve this question
I am using the 'react-multi-carousel' module to show multiple items.
All is going well, but it runs automatically.
I don't want it to autoplay.
I have set props "autoPlay" to "false" as follows.
But the carousel focus goes from the first slide to the last slide.
What is important is that this problem is happening when I click the arrow (next) button first.
My code:
<Carousel
additionalTransfrom={0}
arrows
autoPlay={false}
autoPlaySpeed={3000}
centerMode={false}
className=""
containerClass="container-with-dots"
dotListClass=""
draggable
focusOnSelect={false}
infinite
itemClass=""
keyBoardControl
minimumTouchDrag={80}
renderButtonGroupOutside={false}
renderDotsOutside={false}
responsive={{
desktop: {
breakpoint: {
max: 3000,
min: 1024
},
items: 3,
partialVisibilityGutter: 40
},
mobile: {
breakpoint: {
max: 464,
min: 0
},
items: 1,
partialVisibilityGutter: 30
},
tablet: {
breakpoint: {
max: 1024,
min: 464
},
items: 2,
partialVisibilityGutter: 30
}
}}
showDots={false}
sliderClass=""
slidesToSlide={1}
swipeable
>
<div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 1</div>
<div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 2</div>
<div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 3</div>
<div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 4</div>
</Carousel>
set
shouldResetAutoplay={false}
I got same issue, also have set autoPlay={false}.
it's won play at first,but once I click the arrow then it will auto move til the last one.(I didn't set infinite)
I set autoPlaySpeed like ={99999} for now, not a good way, but kind of ok for what I want.
I followed your answers but there is no any change.
I upgraded my 'react-multi-carousel' module.
If so, It run very well.
Thanks.
Related
This question already has answers here:
Next.js background-image css property cant load the image
(21 answers)
Closed 9 months ago.
I have a background image in the public folder named bg.png
In the index.js page of the pages folder I want to use that image as a background image
I have install tailwind following the documentation of their official website.
I have already tried this, but it doesn't work.
import BG from "../public/bg.png";
return (
<div
className="bg-scroll"
style={{
backgroundImage: `url(${BG})`,
height: "972px",
}}
>
</div>
)
It doesn't show the image.
Another way is that you can define the image in tailwind.config.js file as lke this
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
backgroundImage: {
'my_bg_image' : "url('../public/bg.png')",
}
},
},
plugins: [],
}
Then use it in the component as bg-my_bg_img directly. No need to import image.
return (
<div
className="bg-scroll bg-my_bg_image h-[972px]"
>
</div>
)
When you have assets in a public folder no need to define all the exact path.
<div
className="bg-scroll"
style={{
backgroundImage: `url('/bg.png')`,
height: "972px",
}}
>
</div>
Here is how you can do it all with Tailwind. You don't need to import the image either.
return (
<div
className="bg-scroll bg-[url('/bg.png')] h-[972px]"
>
</div>
)
all,
I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this.
It's not a complicated task, but still doesn't work.
So as in the documentation, I want to create 2 simple background image to use for multiple viewsize.
It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities."
It means, without any further configuration on variants, I should be able to use it for this purpose.
Here is how my tailwind.conf.js looks like (important part is at the end):
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
Just to make sure I included the full content.
And this is how the html looks like:
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block.
I don't think it's important info, but I use tailwind with laravel.
Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)
Thank you all in advance!
I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.
tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
The ' and " are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../ leading the url was also critical.
If you don't want to extend your theme in the tailwindcss.config.js and want to add the background image directly to your div you can try:
<div className="bg-[url('../public/assets/images/banner.svg')]">
This is the simplest way to get background images working.
Reference: Check under Arbitrary values heading
The background image functionality of tailwindcss has been released in version 1.7.0.
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.
editing your tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
add name and the URL for your image and use it.
example bg-hero-pattern
u need to add (theme) props to your config
like this:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
or url with "../" like this
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
Hope it works :)
In ^3.1.8 version image path was not working. Then I just put "../" instead of "./"
and it worked. Example:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
I had to specify a height for my image to be displayed
<div className="h-screen bg-hero"/>
For static image[set is background image] works for me.
First import the image from the static image folder.
import m5 from '../Assets/a2.avif'
Then use it like this.
<div style={{ backgroundImage: `url(${m5})` }}>
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"
I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.
In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.
Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?
My current component looks liks this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
UPDATE
For many scenarios, my later answer (which avoids using TextField and therefore has no side-effects on FormControl context) may be more appropriate: How can I set an static outlined div similar to Material-UI's outlined textfield?
There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:
import React from "react";
import TextField from "#material-ui/core/TextField";
const InputComponent = ({ inputRef, ...other }) => <div {...other} />;
const OutlinedDiv = ({ children, label }) => {
return (
<TextField
variant="outlined"
label={label}
multiline
InputLabelProps={{ shrink: true }}
InputProps={{
inputComponent: InputComponent
}}
inputProps={{ children: children }}
/>
);
};
export default OutlinedDiv;
The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:
import React from "react";
import ReactDOM from "react-dom";
import OutlinedDiv from "./OutlinedDiv";
import Avatar from "#material-ui/core/Avatar";
import deepOrange from "#material-ui/core/colors/deepOrange";
import deepPurple from "#material-ui/core/colors/deepPurple";
import red from "#material-ui/core/colors/red";
import green from "#material-ui/core/colors/green";
import blue from "#material-ui/core/colors/blue";
import Grid from "#material-ui/core/Grid";
function App() {
return (
<div className="App">
<OutlinedDiv label="Color Picker">
<Grid container justify="center" alignItems="center">
<Avatar style={{ backgroundColor: deepOrange[500] }} />
<Avatar style={{ backgroundColor: deepPurple[500] }} />
<Avatar style={{ backgroundColor: red[500] }} />
<Avatar style={{ backgroundColor: green[500] }} />
<Avatar style={{ backgroundColor: blue[500] }} />
</Grid>
</OutlinedDiv>
<br />
<br />
<OutlinedDiv label="Custom Outlined Thing">
You can put whatever you want in here.
</OutlinedDiv>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
No need to write Outlined div component and all. As we can achieve this using FormControl, FormLabel and Formgroup.
If you follow the Outlined div logic your input fields will lose focus.
The below solution is very easy and quick you just need to wrap your code:
<FormControl component="fieldset" className="fieldset">
<FormLabel component="Legend">Title</FormLabel>
<FormGroup row>
{/*Your Input fields e.g TextField or Select e.t.c*/}
</FormGroup>
</FormControl>
Now using useStyles apply some css:
fieldset: {
width: '100%',
marginBottom: 10,
padding: 10,
border: '1px solid #ddd',
borderRadius: 5
}
The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks
SVG Element
Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.
The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.
Plain old border with a background on the label
This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.
Fieldset and legend
This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.
Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!
Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
background-color:'inherit' **(just add this line)**
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
Is it possible to create a React component that can add the ellipsis after two lines and show the tooltip only if the text is wrapped?
I've tried customizing the Material UI's Typography component with "noWrap" property and additional CSS to it, but failed.
Please assist, I want to achieve something like this screen:
There are two main aspects to this problem:
Show ellipsis for text overflow based on vertical overflow in order to allow more than one line but not unlimited
Detect the vertical overflow and include Tooltip functionality in that case
I don't believe FrankerZ's solution will show the ellipsis. Far as I can tell, text-overflow: ellipsis only works for horizontal overflow which requires limiting the text to a single line.
I found a solution for doing ellipsis on vertical overflow here, but it may require significant tweaking once you start wrapping this in Material UI components (e.g. ListItem) that bring additional CSS into the mix, and it may get complicated enough to not be worth it. This solution has the effect of reserving space for the ellipsis at the end of each line of text which doesn't seem ideal. There seem to be some other solutions to this problem out there, but I have not used any of them (including this one other than today) myself.
The second part (detecting the overflow) seems to be more straightforward and is handled by divRef.current.scrollHeight > divRef.current.offsetHeight. I came to this solution by finding many references to doing a similar condition based on width. I have not personally used this technique outside of today when working on this answer, so someone with deeper CSS expertise might chime in with "you should never do that because of ...", but it seems to work (I haven't done any significant browser testing -- only tried it on Chrome).
I'm using hooks in my example for the syntax convenience, so if you aren't using the alpha you'll need to translate the state, ref, and effect work into the corresponding class counterparts. This also isn't currently dealing with resizing the window which would require re-evaluating whether the tooltip should be in effect. With those caveats, hopefully this will give you a few steps toward a workable solution.
Here's the code:
import React, { useRef, useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Tooltip from "#material-ui/core/Tooltip";
import { withStyles } from "#material-ui/core/styles";
/*
CSS from http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
Additional syntax help from https://stackoverflow.com/questions/40965977/cant-target-before-pseudo-selector-in-jss
*/
const styles = theme => ({
listItem: {
maxWidth: "20rem",
overflow: "hidden",
position: "relative",
lineHeight: "1.2em",
maxHeight: "2.4em",
textAlign: "justify",
marginRight: "-1em",
paddingRight: "1em",
borderBottom: "1px solid",
marginBottom: "0.5em",
"&&:before": {
content: '"..."',
position: "absolute",
right: 0,
bottom: 0
},
"&&:after": {
content: '""',
position: "absolute",
right: 0,
width: "1em",
height: "1em",
marginTop: "0.2em",
background: "white"
}
}
});
const data = [
"Some short text",
"Some text that is a little bit longer",
"Some text that will need to wrap but still fits on two lines",
"Some text that will overflow because it is more than just two lines worth when the maxWidth is set at 20rem.",
"A massive range of hammer drill machines and rotary hammers for SDS-plus accessory tools, designed for higher performance drilling and longer life - for easy drilling in concrete and other materials."
];
const TooltipDiv = props => {
const divRef = useRef(null);
const [allowTooltip, setAllowTooltip] = useState(false);
useEffect(() => {
if (
!allowTooltip &&
divRef.current.scrollHeight > divRef.current.offsetHeight
) {
setAllowTooltip(true);
}
}, []);
if (allowTooltip) {
return (
<Tooltip title={props.text}>
<div ref={divRef} className={props.className}>
{props.text}
</div>
</Tooltip>
);
}
return (
<div ref={divRef} className={props.className}>
{props.text}
</div>
);
};
function App(props) {
return (
<>
{data.map(text => {
return (
<>
<TooltipDiv text={text} className={props.classes.listItem} />
</>
);
})}
</>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
You can see it in action here:
You can simply use CSS to accomplish this:
.tooltip {
overflow: hidden;
text-overflow: ellipsis;
height: /* Just enough to show 2 lines */
}
You can also see this for some more resources/alternative routes.
I have a project with React and Material UI.
I need some guidance on how to animate a grid item size change. The item is by default sm={3}, when the user hovers the item, this changes to sm={6}.
Here is my code:
<Grid
item
xs={this.state.hoverItem ? 6 : 3}
spacing={24}
onMouseEnter={this.handleItemHover}
onMouseLeave={this.handleItemHoverLeave}
>
<Paper
elevation={this.state.hoverItem ? 5 : 1}
className={classNames(
classes.card,
this.state.hoverItem && classes.cardHover
)}
>
</Paper>
</Grid>
And this is how I am doing my JSS:
card: {
...theme.mixins.gutters(),
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
},
cardHover: {
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
})
},
I thought this should animate it. However, the transitions are not doing anything.
Hi it was really an interesting problem of the day, I have tried to implement with simple transitions on hover. You can see here on codesandbox :
Animate Switching Grid Size
PS I have added your transition property as comment without giving width It worked great. You can report issue on Material-UI this is the right time.
Please let me know if you the issue still persists.