I am using Swiper React to creater a Carousel Slider from a map of an object received from an API.
Here is my code :
<div className="border-4">
<Swiper
className='width-carousel'
modules={[Navigation]}
spaceBetween={40}
slidesPerView={2.5}
pagination={{ clickable: true }}
autoplay={{ delay: 2500, disableOnInteraction: false }}
>
{props.mediaArea.mediaObjects && props.mediaArea.mediaObjects.map((slide, index) => {
return (
<SwiperSlide key={index}>
<img className="rounded-lg shadow-lg p-3 h-96" src={slide.contentUrl ?? "https://dummyimage.com/600x400/000/fff"} alt={slide.title ?? ""} />
{slide.title && <p className="font-Montserrat font-semibold mt-8">{slide.title}</p>}
{slide.description && <p className="font-Montserrat text-gray-500 text-sm">{slide.description}</p>}
</SwiperSlide>
)
})}
</Swiper>
</div >
The problem is : If I set 100% width in my class, the sidebar will be larger than the screen because I have a sidebar of 300px.
If I make calc(100% - 300px), the calculation is not taken in consideration (the size of Swiper still 100%).
I would like it to fit the width of the <section> it is into.
Any help on this ?
PS : I set the container to width : 100%.
Related
I am using next.js and fetching data via API to slides. React-slick works great until the first break point on lower resolution (890px in this example).
.slick-track class has a property that is causing this problem.
.slick-track {transform: translate3d((wrong calc here)px, 0px, 0px)}
So instead 0px on first value inside translate 3d I'm getting value that is width of element where the list of slides should be shown. And List is moved to right so it cant bee seen.
After click on next button, list is coming to its normal place, but skipping first element in list...
Screenshot:
I have tried to overwrite this property inside module.css via :global and inside base CSS file, but it is still applied. I i put !important at end of my property it will be applied but I wont be able to scroll/navigate through elements of slide (first element will be stuck to left).
I also have tried older versions of react-slick 26.0; 26.1; 27.0; 28.0... But problem is still here.
Does anyone has some idea for solution?
Here is my component:
const Accessories = () => {
const { query } = useRegions();
const { error, data } = useAccessoriesSubcategoriesQuery({
variables: { ...query },
});
if (error) {
console.error("Accessories section component error", error.message);
}
const subcategoryItems = data?.categories.edges[0].node.children.edges || [];
// Slick slider settings
const settings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
nextArrow: <AccessoriesNextBtn currentSlide={0} slideCount={0} />,
prevArrow: <AccessoriesPrevBtn currentSlide={0} slideCount={0} />,
responsive: [
{
breakpoint: 890,
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 620,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 420,
settings: {
slidesToShow: 1,
},
},
],
};
return (
<div className={"flex items-center justify-center w-full h-full bg-white"}>
<Container className="flex-col relative overflow-hidden">
<div className="flex flex-col lg:flex-row w-full mb-[50px] gap-[30px] lg:gap-[20px] justify-between">
<H2Headline className="text-[26px] text-left ">
Pool equipment & water treatment
</H2Headline>
<Button
className={`${styles.accessoriesSeeAllBtn} mb-[50px] mr-[0px] ml-auto xs:mb-0 xs:ml-0 xs:mr-auto max-w-[112px] h-[45px] box-border text-solidGray font-semibold text-[16px] leading-[157%] bg-white border border-solidGray hover:bg-solidGray hover:text-white`}
>
{/* <LinkBuilder linkItem={data?.categories.edges[0].node}>See all</LinkBuilder> */}
See All
</Button>
</div>
<div className={`${styles.accessoriesSliderWrapper} md:min-w-[500px] w-full`}>
<style jsx global>{`
.slick-track {
display: block;
transform: translate3d(0px, 0px, 0px);
}
`}</style>
<Slider {...settings}>
{subcategoryItems.map((item) => (
<div
key={item?.node.id}
className="flex flex-col max-w-[366px] md:max-w-[263px] transform hover:-translate-y-3 duration-500 ease-in-out "
>
{item.node.backgroundImage ? (
<div className="flex justify-center items-center content-center h-[280px] bg-lightGray rounded-[12px] overflow-visible z-50">
<Image
src={item.node.backgroundImage?.url}
width={218}
height={218}
alt="Category image"
className="object-cover object-center w-auto h-auto"
placeholder="blur"
blurDataURL={item.node.backgroundImage?.url}
/>
</div>
) : null}
<h3 className="text-solidGray text-[16px] leading-[160%] font-medium mt-[12px] mb-[3px]">
{item.node.name}
</h3>
<ParagraphText className="text-[14px] text-gray opacity-100 mt-[3px] mb-[12px]">
{item.node.description}
</ParagraphText>
<Button className="mx-auto text-[14px] border border-lightGray bg-white w-full hover:bg-solidGray hover:border-solidGray hover:text-white">
<LinkBuilder linkItem={item}>See all</LinkBuilder>
</Button>
</div>
))}
</Slider>
</div>
</Container>
</div>
);
};
I have made a draggable split panel by https://github.com/johnwalley/allotment.
There is a main area (in yellow) and a console area; the console area has a title line (in blue) and the content area (in green). The splitting line between the main area (in yellow) and the title line (in blue) is draggable. The content area (in green) should be scrollable.
At the moment, I set height: "70%" for the content area. If I set height: "100%" (relative to its parent which is the second Allotment.Pane), it would exceed the screen.
However, I would like to set properly the height of the content area such that the content area always covers the rest of the page. In other words, the height of the content area will be the height of the viewport - the height of the main area (which is changeable) - the height of the console title line (which does not change).
Does anyone know how to amend the code to achieve that?
https://codesandbox.io/s/reset-forked-jb86xu?file=/src/App.js
import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import styles from "./App.module.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
toExpand: true
};
this.myRef = React.createRef();
}
handleChange = (sizes) => {
if (sizes.length > 1) {
if (sizes[1] < 31) {
this.setState({ toExpand: true });
} else {
this.setState({ toExpand: false });
}
}
};
render() {
return (
<div>
<div className={styles.container}>
<Allotment vertical onChange={this.handleChange} ref={this.myRef}>
<Allotment.Pane>
<div style={{ backgroundColor: "yellow", height: "100%" }}>
Main Area
</div>
</Allotment.Pane>
<Allotment.Pane preferredSize="0%">
<div
onClick={() => {
if (this.state.toExpand) {
this.myRef.current.resize([50, 50]);
} else {
this.myRef.current.resize([10000, 0]);
}
}}
style={{ backgroundColor: "blue" }}
>
Console Title
{this.state.toExpand ? "ArrowUp" : "ArrowDown"}
</div>
<div
style={{
backgroundColor: "green",
height: "70%",
overflow: "scroll"
}}
>
Content1
<br />
Content2
<br />
Content3
<br />
Content4
<br />
Content5
<br />
</div>
</Allotment.Pane>
</Allotment>
</div>
</div>
);
}
}
Not sure if I fully understand the preferred result, but perhaps consider to wrap the 2 area boxes in the second panel in one flex container with height: 100%. This way, the green "content" area could be styled to take the remaining space with flex-grow instead of percentage.
Forked demo with modifications: codesandbox (it seems that the forked demo need to run in a new tab to avoid showing a page scrollbar).
<div className={styles.container}>
<Allotment vertical onChange={this.handleChange} ref={this.myRef}>
<Allotment.Pane>
<div style={{ backgroundColor: "yellow", height: "100%" }}>Main Area</div>
</Allotment.Pane>
<Allotment.Pane preferredSize="0%">
<section
style={{
height: "100%",
display: "flex",
flexDirection: "column",
}}
>
<div
onClick={() => {
if (this.state.toExpand) {
this.myRef.current.resize([50, 50]);
} else {
this.myRef.current.resize([10000, 0]);
}
}}
style={{ backgroundColor: "blue" }}
>
Console Title
{this.state.toExpand ? "ArrowUp" : "ArrowDown"}
</div>
<div
style={{
backgroundColor: "green",
flexGrow: "1",
overflow: "auto",
}}
>
Content1
<br />
Content2
<br />
Content3
<br />
Content4
<br />
Content5
<br />
</div>
</section>
</Allotment.Pane>
</Allotment>
</div>
I am using owl-corusel in my React Project. I have a problem, the problem is that if an owl-item doesn't fit right on the screen I don't want it to show up. Just center and show how many items appear complete.
Here is my React code :
<OwlCarousel
className="owl-theme"
dots={false}
loop={true}
margin={2}
nav={true}
items={categoryTags.length}
autoWidth={true}
center={true}
>
{categoryTags
? categoryTags.map((item) => {
return (
<div className="item" key={`tag_item_${item.id}`}>
<Link style={{ width: "100%" }} to={"/c/" + item.slug}>
<img
src={item.avatar_url}
alt={item.title}
className="full_height full_height"
/>
<div className="flex align_center cat_ico_hover full_width full_height justify_center">
<i
className="cat_ico"
style={{ backgroundImage: `url(${item.icon_url})` }}
></i>
<span>{item.label}</span>
</div>
</Link>
</div>
);
})
: null}
</OwlCarousel>
I am trying to make a scheduler with resources. The biggest challenge for me so far is to create the events as one piece (blue in the sample). Can please someone share what would be the best approach for this task?
Second question: Also I would like to scale this later, by changing the slot step (e.g. in the sample it is a step "by 1" so slots are 1,2,3,4,5.
But later, if I want to change the step e.g. "by 5" 1,5,10...
then let's say we have an even from [7,12] - it should then show from 5-15 etc.
new Vue({
el: "#vue",
data() {
return {
slot: null,
row: null,
events: [
{ row: 1, slots: [ 3, 4 ] },
{ row: 4, slots: [ 3, 9 ] },
],
}
},
methods: {
onSelectSlot (row, slot) {
this.row = row
this.slot = slot
},
}
});
.selected-slot {
#apply bg-purple-600;
}
.selected-row {
#apply bg-green-600;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<div id="vue" class="p-5 bg-red-800 h-screen">
<div class="flex flex-row w-full h-full overflow-x-scroll">
<div v-for="x in 10" :key="x" class="bg-white w-60">
<div class="bg-blue-400 min-w-full flex flex-col w-full sticky top-0">
<div class="bg-green-400 flex items-center justify-center min-w-full h-10 w-full sticky top-0 shadow z-20 border-2" :class="(row === x) ? 'selected-row' : ''">
Row {{ x }}
</div>
<div v-for="y in 50" :key="y" class="w-60 h-10 border bg-purple-400 cursor-pointer flex items-center px-2 hover:bg-purple-500" :class="(row === x && y === slot) ? 'selected-slot' : ''" #click="onSelectSlot(x, y)">
Slot {{ x + ',' + y }}
<!-- events -->
<div v-for="(event,index) in events" :key="index">
<div v-if="event.row === x && (event.slots[0] <= y && event.slots[1] >= y) " class="bg-blue-500">
Event
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can please someone help me to display the blue events in this example as one piece?
I am trying to change the header part of my react app dynamically.
I want a different font size, font weight, title, and subtitle for the homepage and other pages of my react web app.
This is what I want on the homepage.
Hello there should be smaller on Homepage but Welcome Back should be large
This is what I want on other pages.
Hello there should be bigger on Homepage but lorem ipsum lorem ipsum should be small
This is my code for the homepage heading
const Hero = ({ fontSize, fontWeight, title, subTitle }) => {
return (
<div className="mt-2 mb-8">
<p className="font-heading text-lg font-normal text-white">Hello There 👋,</p>
<p className="font-heading text-3xl font-bold text-white">{subTitle}</p>
// another react component
</div>
)
}
export default Hero
I want to know how to change this code dynamically so I can use it for other pages bypassing different props for font weight, font size, title, and subtitle.
I am using react and tailwind css
Anyone Please help me with this issue.
Thank You
Edited:
{pathName === '/' ? (
<>
<p className="font-heading text-lg font-normal text-white">`Hello There 👋,</p>
<p className="font-heading text-3xl font-semibold text-white">{subTitle}</p>
</>
) : (
<>
<p className="font-heading text-3xl font-semibold text-white">Hello There 👋,</p>
<p className="font-heading text-lg font-normal text-white">subTitle</p>
</>
)}
You can add in-line styling
const Hero = ({ fontSize, fontWeight, title, subTitle }) => {
return (
<div className="mt-2 mb-8">
<p style={{fontSize:fontSize, fontWeight:fontWeight}} className="font-heading text-lg font-normal text-white">{title}</p>
<p className="font-heading text-3xl font-bold text-white">{subTitle}</p>
</div>
)
}
export default Hero
and do accordingly for the other element
Edit:
Or you can pass in fontSize and fontWeight as calss names
const Hero = ({ titleFontSize,subTitleFontSize, titleFontWeight, subTitleFontWeight, title, subTitle }) => {
return (
<div className="mt-2 mb-8">
<p className={`font-heading ${titleFontSize} ${titleFontWeight} text-white`}>{title}</p>
<p className={`font-heading ${subTitleFontSize} ${subTitleFontWeight} text-white`}>{subTitle}</p>
</div>
)
}
export default Hero
Then whenever you use the component you pass those props e.g
<Hero titleFontSize="text-lg" subTitleFontSize="text-3xl" tileFontWeight="font-normal" subTitleFontWeight="font-bold" title="Title" subTitle="Sub Title" />
Or use if statement
const Hero = ({ scenario1, title, subTitle }) => {
return (
<div className="mt-2 mb-8">
<p className={`font-heading ${scenario1 ? "text-lg font-normal" : "text-3xl font-bold"} text-white`}>{title}</p>
<p className={`font-heading ${scenario1 ? "text-3xl font-bold" : "text-lg font-normal"} text-white`}>{subTitle}</p>
</div>
)
}
export default Hero
and use it like this
<Hero title="Title" subTitle="Subtitle" scenario1/> // This will render Scenario 1
<Hero title="Title" subTitle="Subtitle"/> // This will render default -in your case its Scenario 2
I edit my answer
check this :
<p
className={"font-heading text-white " +
(pathName !== '/'? "text-3xl font-semibold" : "text-lg font-normal")
}
>Hello There 👋,
</p>
<p
className={"font-heading text-white " +
(pathName === '/'? "text-3xl font-semibold" : "text-lg font-normal")
}
>
{subTitle}
</p>
We can dynamic it by className
const Hero = ({ titleFontSize,subTitleFontSize, titleFontWeight, subTitleFontWeight, title, subTitle }) => {
return (
<div className="mt-2 mb-8">
<p className={`font-heading ${titleFontSize} ${titleFontWeight} text-white`}>{title}</p>
<p className={`font-heading ${subTitleFontSize} ${subTitleFontWeight} text-white`}>{subTitle}</p>
</div>
)
}
export default Hero