This is my slider
<Slider {...settings}>
<div style={{ 'display': 'flex !important' }}>
<ArrowsToolComponent key={name} color={color} />
<ZoomTool key={name} color={color} />
</div>
<div>
<GridToolComponent key={name} color={color} />
<CropToolComponent disabled={disabled} key={name} color={color} />
</div>
<div>
<FlipTool disabled={disabled} key={name} color={color} />
<PriorityToolComponent disabled={disabled} key={name} color={color} />
</div>
<div>
<CopyFileToolComponent disabled={false} key={name} color={color} />
<CancelFileToolComponent disabled={disabled} key={name} color={color} />
</div>
<div>
<InsertTextBox key={name} color={color} />
<InsertImageBox key={name} color={color} />
</div>
</Slider>
How can i set display: flex to the div in my slider? There is no info in react-slick docs about it. It`s always inline-block by default.
When writing components using React, we can accept different props other than the required ones, and deconstruct them in our component. It seems that from this library does support passing style props.
If there is no default props, you would be able to use the React style property, e.g:
<Slider {...settings} style={{ display: 'flex' }}>
{ /* rest of the code */}
</Slider>
If the component has defaultProps, React renders the component using them, unless the parent overrides it. So you can also create a Parent <div> with your required styles, which could be:
<div style={{ display: 'flex' }}>
<Slider {...settings}>
{ /* rest of the code */}
</Slider>
</div>
React.js Docs about Rendering elements.
<Slider {...settings} style={{ display: "flex" }}>
Related
I'm using antd card component to display the card and loading is not working, I gave the loading based on the api response, i got the correct response but the loading is not working for me.... if i set the loading value to true it is working fine but it is not working while i'm passing the data.
useEffect(() => {
let keys = [{ key: "get_search_records", loading: true }];
dispatch(
dynamicRequest(keys, get_search_records_query, {
searchString: state,
})
);
}, [state]);
I'm getting data and changing the loading here and it is working fine, the loading also changes perfectly but it is not reflecting in the card component
<Box>
<HStack marginLeft={10} space={20} flexWrap={'wrap'}>
{items?.map((item, index) => (
<VStack marginTop={"30px"} space={10} flexWrap={"wrap"}>
<Card
loading={loading}
hoverable
style={{ height: 430 ,width: 250, borderRadius: "10px", marginTop:30, marginBottom: 30 }}
cover={
<HStack>
<Box width={"50%"}>
<div class="card_div">
<div style={{marginTop:"5px"}}>
<Text color={"white"} alignItems="center" marginLeft={"17px"} marginTop={"7px"} >
Hot
</Text>
</div>
</div>
</Box>
<Box flexDirection="row-reverse" marginTop={"-30px"} marginRight={"10px"} padding={"5px"}>
<Typography.Link onClick={handleAddCart}>
<Tooltip className="tooltip-wishlist" color=" #3BB77E" title="Add to wishlist" placement="bottom">
<AiOutlineHeart size={"25px"}/>
</Tooltip>
</Typography.Link>
</Box>
</HStack>
}
>
<Box alignContent={"center"} height="170px">
{/* <AspectRatio w="100%" ratio={16/9}> */}
<Image
alt="Image"
src={item?.vendor_product?.product?.gallery?.[0]}
// width="90%"
preview={false}
/>
</Box>
<Box alignContent={"center"}>
<Text bold> </Text>
<VStack space={1.5}>
<Box height="130px">
<Text color={"#adadad"}>
{item.vendor_product.product.category.name}
</Text>
<Text onPress={handleClick} onMouseOver={mouseOver} onMouseOut={MouseOut} bold>{item.name} </Text>
<Rating count={item?.product_rating?.[0]?.rating}/>
<Text onPress={handleTextPress}>
By <span style={{ color: "#22c55e" }} onMouseOver={mouseOverVendor} onMouseOut={mouseOutVendor} >Theni FBO</span>
</Text>
</Box>
<HStack justifyContent="space-between">
{item.discount && (
<Text color="green.500">₹ {item.base_price}</Text>
)}
<Text strikeThrough color="green.500">
₹ {item.selling_price}
</Text>
<Button onClick={addCart} className="cart-btn" icon={<BsCart3 />}>
Add
</Button>
</HStack>
</VStack>
</Box>
</Card>
</VStack>
))}
</HStack>)}
</Box>
this is my antd card code... anyone please tell me why the loading is not working properly.
When I try to import a layer/button onto one of these cards it does not allow it to be clicked or interacted with. I believe the problem is with the carousel. What is a way I can fix this? The "CenterLayer" is supposed to act as a button and is the one I am having problems with. When I put this code the layer appears on the card as a footer but it's not allowed to be clicked. Is there anyone that can help me with this, please?
import React from "react";
import {
Card,
CardHeader,
CardBody,
CardFooter,
Box,
Image,
Heading,
Carousel,
Grommet,
Calendar,
Text,
} from "grommet";
import {CenterLayer} from "./EventsButton";
import { MainFooter } from "../Footer/Footer";
const Card0 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>The Stranahan High School Graduation</CardBody>
<Box direction="row" round gap="xlarge">
<CardFooter>
3/25/2021
</CardFooter>
<CardFooter>
<CenterLayer />
</CardFooter>
</Box>
</Card>
);
const Card1 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />
</Box>
</CardHeader>
<CardBody>Card1 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);
const Card2 = () => (
<Card pad="large" background="dark-1" gap="medium">
<CardHeader>
<Box height="small" width="small">
<Image src="./images/Photo.jpg" />{" "}
</Box>
</CardHeader>
<CardBody>Card2 The Stranahan High School Graduation</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
);
const Events = () => (
<Grommet>
<Heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",
top: "large",}}>Upcoming Events</Heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>
<Heading textAlign="center" size="large" alignSelf="center" level="2" margin={{ left: "xlarge",
top: "large",}}>Past Events</Heading>
<Carousel>
<Box direction="row" pad="large" round gap="small">
<Card0 />
<Card1 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card2 />
<Card1 />
<Card0 />
</Box>
<Box direction="row" pad="large" round gap="small">
<Card1 />
<Card0 />
<Card2 />
</Box>
</Carousel>
<Box direction="row" pad="xlarge" round gap="xlarge">
<Box height="medium" width="medium" margin={{left: "xlarge"}}>
<Calendar fill daysOfWeek />
</Box>
<Box margin={{left: "xlarge", top:"large"}}>
<Card background={'orange'} >
<CardBody height="medium" width="medium" margin={{right: "medium", bottom: "medium", left: "medium", top: "medium"}}>
<Text>At SEEF we take every opportunity to help the Stranahan community. We hope that our impact will lead others to do the same.</Text>
</CardBody>
</Card>
</Box>
</Box>
< MainFooter />
</Grommet>
);
export default Events
import React from 'react';
import { Add } from 'grommet-icons';
import { Box, Button, Grommet, Heading, Layer, Select, Text } from 'grommet';
import { grommet } from 'grommet/themes';
export const CenterLayer = () => {
const [open, setOpen] = React.useState();
const onOpen = () => setOpen(true);
const onClose = () => setOpen(undefined);
return (
<Grommet theme={grommet} >
<Box fill align="center" justify="center">
<Button
icon={<Add />}
label={
<Text>
<strong>More Information</strong>
</Text>
}
onClick={onOpen}
plain
/>
</Box>
{open && (
<Layer position="center" onClickOutside={onClose} onEsc={onClose}>
<Box pad="medium" gap="small" width="medium">
<Heading level={3} margin="none">
The Stranahan High School Graduation
</Heading>
<Text>This event will be taken place at City Hall in Fort Lauderdale</Text>
<Text>This event will be taken place on 3/25/2021 at 3:00PM</Text>
<Box
as="footer"
gap="small"
direction="row"
align="center"
justify="end"
pad={{ top: 'medium', bottom: 'small' }}
>
<Button
label={
<Text color="white">
<strong>Close</strong>
</Text>
}
onClick={onClose}
primary
color="status-critical"
/>
</Box>
</Box>
</Layer>
)}
</Grommet>
);
};
CenterLayer.storyName = 'Center';
CenterLayer.parameters = {
chromatic: { disable: true },
};
export default {
title: 'EventsButton',
};
Carousel is an interactive element, i.e. it has its own focus and navigation behavior, and for UX & accessibility reasons you shouldn't place nested interactive elements inside of each other, hence I'd try to avoid a button inside of a card, inside of a Carousel.
That being said, the button you've placed in the card is placed 'behind' the Carousel, so moving up its z-index would solve the problem.
Add this style to a Card and it should do trick
<Card style={{ zIndex: "100" }} ... >
I chose 100 as a random number, feel free to make it smaller according to your app behavior.
I am new to react and was trying to render a list in the confirm page. But it is not rendering. It is taking up the space but the elements are not rendering.
Here is the code:
return (
<MuiThemeProvider theme={theme}>
<React.Fragment>
<div className={useStyles.root}>
<AppBar position="static">
<Toolbar>
<Typography
gutterBottom
align="center"
style={{ width: "100%", alignItems: "center" }}
>
Confirm Information
</Typography>
</Toolbar>
</AppBar>
</div>
<br />
<h3>Are you sure to continue and confirm your information?</h3>
<List>
<ListItem primaryText="Departments" secondaryText={value} />
<ListItem primaryText="Title" secondaryText={Title} />
<ListItem primaryText="Kpi_Before" secondaryText={Kpi_Before} />
</List>
<br />
<Button
variant="contained"
color="primary"
style={styles.button}
onClick={this.continue}
>
Confirm & Continue
</Button>
<Button
variant="contained"
color="default"
style={styles.button}
onClick={this.back}
>
Back
</Button>
</React.Fragment>
</MuiThemeProvider>
);
}
}
What could be the issue?
I am using material-ui core list and list items.
I have the following component:
<div style={{display: 'flex', verticalAlign: "bottom"}}>
<FormControl fullWidth margin="normal" className="col-3">
<InputLabel style={colorStyle} htmlFor={field_meta.name}>{field_meta.title}</InputLabel>
<Input
id={field_meta.name}
defaultValue={field_meta.value? field_meta.value.id: ""}
value={this.state.fieldContent}
onChange={this.handleChange}
margin="normal"
startAdornment={field_meta.error &&
<InputAdornment position="start">
<i style={{color: "red"}} className="zmdi zmdi-alert-circle zmdi-hc-fw"/>
</InputAdornment>
}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="Buscar Valor"
onClick={this.handleSearchClick}
>
<i className={"zmdi zmdi-search"} onClick={this.handleSearchClick} />
</IconButton>
</InputAdornment>
}
/>
{() => {
if (field_meta.error) {
return <FormHelperText style={{color: "red"}}>{field_meta.error}</FormHelperText>
} else if ( field_meta.originalValue) {
return <FormHelperText style={{color: "orange"}}>Los cambios aún no se han guardado</FormHelperText>
} else {
return null;
}
}}
</FormControl>
{this.state.currentValue.id ?
<div className="col-9"><span>[{this.props.field_meta.value.id}]{this.props.field_meta.value.text}</span></div> :
<h2 className="col-9"></h2>}
</div>
I want the input and the span to align to the bottom of the container. I have tried several recommendations, but I always get the same result:
The css attribute to get what you want is this:
style={{display: 'flex', align-items: "flex-end"}}
Keep in mind that the direction of flex by default is row
You can get also the items to be at the bottom when the direction is flex-direction: column by doing this:
style={{display: 'flex', flex-direction: 'column', justify-content: 'flex-end'}}
Keep in mind also that flex affects the immediate children so, giving a quick glance at your code, you shouldn't apply the flex to the div, but to the FormControl component
I am stuck in this problem. I want to add/remove the class on a header element on scroll, but somehow I can not manage it.
I tried to mount and unmount (found few solutions here on Stack) but does not work in my case. Simply because in most of those cases the code relates to component but I have a little bit different set-up.
Here the full code:
https://codesandbox.io/s/angry-villani-lduor?fontsize=14
I want to add the new class on store_details_header
const handleChangeIndex = index => {
setValue(index);
};
if (!selectedStore) {
return null;
}
return (
<div className="store-details">
<div className="store-details__header" style={{ backgroundImage: `url(${selectedStore.headerBackgroundImgUrl})` }}>
<img className="store-details__header__exit" src={exit} alt="exit" onClick={backToNearYou} />
<img className="store-details__header__logo" src={selectedStore.headerLogoUrl} alt="logo" />
</div>
<div className="store-details__content" style={{ backgroundImage: `url(${selectedStore.contentBackgroundImgUrl})` }}>
<div>
<AppBar className={props.classes.root} position="static" color="default">
<Tabs value={value} classes={{ indicator: props.classes.indicator }} onChange={setSelectedNavigationItem} variant="fullWidth">
<StyledTab label="Products" />
<StyledTab label="Items" />
</Tabs>
</AppBar>
<SwipeableViews axis={'x'} index={value} onChangeIndex={handleChangeIndex}>
<TabContainer>
{' '}
<div className="store-details__content__items">{renderSliderItems()}</div>
</TabContainer>
<TabContainer>
{' '}
<div className="store-details__content__items">{renderSliderItems()}</div>
</TabContainer>
</SwipeableViews>
</div>
</div>
{guestMode && renderGuestModeBox()}
{selectedStore.loyaltyCard && renderLoyaltyCard()}
</div>
);
};
const handleChangeIndex = index => {
setValue(index);
};
if (!selectedStore) {
return null;
}
return (
<div className="store-details">
<div className="store-details__header" style={{ backgroundImage: `url(${selectedStore.headerBackgroundImgUrl})` }}>
<img className="store-details__header__exit" src={exit} alt="exit" onClick={backToNearYou} />
<img className="store-details__header__logo" src={selectedStore.headerLogoUrl} alt="logo" />
</div>
<div className="store-details__content" style={{ backgroundImage: `url(${selectedStore.contentBackgroundImgUrl})` }}>
<div>
<AppBar className={props.classes.root} position="static" color="default">
<Tabs value={value} classes={{ indicator: props.classes.indicator }} onChange={setSelectedNavigationItem} variant="fullWidth">
<StyledTab label="Products" />
<StyledTab label="Items" />
</Tabs>
</AppBar>
<SwipeableViews axis={'x'} index={value} onChangeIndex={handleChangeIndex}>
<TabContainer>
{' '}
<div className="store-details__content__items">{renderSliderItems()}</div>
</TabContainer>
<TabContainer>
{' '}
<div className="store-details__content__items">{renderSliderItems()}</div>
</TabContainer>
</SwipeableViews>
</div>
</div>
{guestMode && renderGuestModeBox()}
{selectedStore.loyaltyCard && renderLoyaltyCard()}
</div>
);
};