Basically this is the same question as this one, but for the React Bootstrap Carousel component.
So I have a working carousel but I want a text to be on top of it, that doesn't move while the images change.
This is my working Carousel code snippet - as you can see I added my overlay text at the bottom of the loop. It does stay on top, just like I want, but it also adds an additional empty carousel item, which I don't want. (I tried making this work in js-fiddle and codesandbox.io but I'm not smart enough...)
import React from "react";
import Carousel from "react-bootstrap/Carousel";
import "./styles.css";
export default function App() {
let carouselImgs = [
{
title: "Test1",
img: "https://images.app.goo.gl/FrGs95rzsNfc6YkW8"
},
{
title: "Test2",
img: "https://images.app.goo.gl/tPkFSMH796PmV3pq9"
}
];
return (
<Carousel className="App" interval={3000}>
{carouselImgs.map(carouselImg => (
<Carousel.Item
key={carouselImg.title}
className="oneness-container mb-2"
>
<img src={carouselImg.img} className="img-fluid rounded-lg" alt="" />
<Carousel.Caption>
<div className="bottom-center">
<h3 className="rounded px-2 py-1 d-inline">
{carouselImg.title}
</h3>
</div>
</Carousel.Caption>
</Carousel.Item>
))}
{<h1 className="overlay">Overlay title</h1>}
</Carousel>
);
}
CSS of .overlay:
.overlay {
position: absolute;
top: 0;
width: 100%;
}
I like the comment on that answer - that says to this:
<div id="carousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner" >
<!-- items -->
</div>
</div>
...place [the overlay div] inside the carousel-inner, but still in a div separate from your "item" divs...
But unfortunately I don't know how to get inside the carousel-inner since the React Bootstrap component doesn't show it like that.
Related
I have a nextjs blog that I'm working on and one of the components I'm using is this card component:
function Card(props) {
return (
<div className="uk-card uk-card-default uk-width-1-2#m">
<div className="uk-card-header">
<div
className="uk-grid-small uk-flex-middle"
uk-grid
uk-scrollspy="cls: uk-animation-slide-left; repeat: true"
>
<div className="uk-width-auto">
<Image
alt="Profile Picture"
className="uk-border-circle"
src={props.pic}
height={200}
width={200}
/>
</div>
<div className="uk-width-expand">
<h3 className="uk-card-title uk-margin-remove-bottom">
{props.name}
</h3>
</div>
</div>
</div>
<div className="uk-card-body">
<p>{props.description}</p>
</div>
<div className="uk-card-footer">
</div>
</div>
)
}
I take that component and use it in the page like so:
export default Main =()=> {
return(
<Card
pic={placeholderpic}
linkedin='https://www.linkedin.com/'
name="Harry Truman"
description="Lorem ipsum"
/>
)
}
The icon in the footer does not render until the page is refreshed 3-4 times. All the rest of the card renders properly on first load. Ideally I'd like to know 3 things:
A. Why this is occurring?
B. How to troubleshoot this in the future?
C. What the most appropriate fix is for this.
Edit:
This question is essentially the same as mine:
Uikit Icons with React and Next.js
The solution for me is less than ideal, I don't want to wrap everything in a custom "UIKit" component.
I am currently working on a component's responsive styling wherein on large screens I have the div with the text element sitting on top of the div containing the img element and on smaller and medium screens have the div with the image aligned right below the div with the text element. I am using Next.js and and Tailwind CSS for styling.
The styling works fine on large screens but for some reason the div with the text element is not showing in small screens when I already have flex flex-col-reverse in the parent element
Here is how the entire code look like:
import React from 'react'
import Image from 'next/image'
import catImage from '../assets/catImage.webp'
const LargeCard = () => {
return (
<article className='relative flex flex-col-reverse h-screen py-16 lg:h-96' >
<div>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>
<div className='h-96 lg:absolute lg:top-32 lg:left-12' >
<h2 className='text-white text-4xl font-semibold mb-3 w-64' >Cat Ipsum</h2>
<p className='text-lg lg:w-[300px] text-white' >Stretch out on bed i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
<button className='bg-gray-100 text-gray-900 px-4 py-2 rounded-lg mt-5 max-w-md ' >Learn more</button>
</div>
</article>
)
}
export default LargeCard
tailwind.config.js:
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
maxWidth: {
md: '90vw'
}
},
variants: {
extend: {},
},
plugins: [
require('tailwind-scrollbar-hide')
],
}
forgot to post the answer. I actually solved the following day.
First. flex-col-reverse is actually working.
Second. setting nextjs's <Image> component's objectFit property to cover will set the img element to cover the entire area of it's grandparent element so to contain it you add position relative to the parent div containing it and make sure to define it's height too.
something like this:
<div className='relative h-96'>
<Image src={catImage}
layout='fill'
objectFit='cover'
className='rounded-2xl'
/>
</div>
I've got a bit of a problem here, hope I get help :0
well I am building a pretty little App on React and I have a navbar which includes an absolutely positioned div and two images for now... I have refs on these images and I want this navbar div to be positioned with the same top coordinates upon render...
Here is how I'm trying:
this code sets top state property to refs position:
componentDidMount() {
this.fetchApi();
this.setState({
scrolling: { top: this.first.current.offsetTop },
});
}
this is basically navbar
let { top } = this.state.scrolling;
<div className="map__left-column__logos">
<img
ref={this.first}
onClick={this.linkContainerClick}
className="img-svg"
src={pin}
alt="pingreen"
/>
<img onClick={this.linkContainerClick} src={logo} alt="logo" />
<div
ref={this.myRef}
className="link-container"
style={{ transform, top }}
>
<div className="link-container__upcurve"></div>
<div className="link-container__wrapper"></div>
<a href="#" id="container-href">
{" "}
<img
style={{
top: img1,
transition: "all linear .2s",
}}
className="img-svg"
src={chosenImg}
alt=""
/>
</a>
<div className="link-container__downcurve"></div>
</div>
</div>
</div>
and this is the linKContainerClick function trying to calculate where to scroll after I click the images
linkContainerClick = ({ target }) => {
let id = target.offsetTop;
let pixel = id - this.state.scrolling.top;
this.setState({ innerHtml: target.alt });
this.setState({
scrolling: {
...this.state.scrolling,
transform: `translateY(${pixel}px)`,
},
});
};
The problem is that on the first render of the App the link-container element is misplaced by 20 pixels... after refresh it moves to the right place
I got React noob question.. The thing is that I have a method with a mount of JSX attributies with their respective properties.
The question is, how can I get to the imageUrl attribute a style? such as give border-radius: 10px or centering in the page.
xxxx (item:aaaa, index:bbb) {
return (
<div className="Post ms-u sm3 ms-u-lg3 ms-u-xl">
<div className="content">
<PersonaControl
id={"BlogItem" + index}
identifier={item.blogOwnerEMail}
displayName={item.blogOwnerName}
size={PersonaSize.extraLarge}
hidePersonaDetails={true}
imageUrl={item.blogLeaderPicture && item.blogLeaderPicture}
labels={this.props.labels}
/>
Here is the render method. I try to double the information of the property xxxx how calls me the content of the parameter aaaa:
render() {
return (
<div className="clearBoth"></div>
<div className="bandContent" style={{ backgroundColor: this.props.backgroundColor }}>
{this.state.leadershipBlogDataItems.map(i => {return this.leadershipBlogDataItems(i, this.state.leadershipBlogDataItems.indexOf(i))})}
<div className="blogPost"></div>
You simply have to add a style property. You can do this by adding:
<div style={{ border: "1px" }} > </div>
If you want to add the "classic" css, with a file, simply add a className to the div, and import the css file as shown below.
import "./style.css";
<div className="yourstylename"> </div>
Inside style.css you simply add your css. By the way, the import shown above only works if the css file is in the same folder as your component/js file.
I want to have an image in the background of a div without a const.
I need the image to be a background image, so I can put text over it.
I want to avoid hardcoding the background image in a sass file. However, I am curious how it is written in a sass file.
The following is just an image, not a background image:
class Card extends Component {
render() {
return (
<div className='home-card-view flex-center'>
<div>
<img className='home-card-image' src="https://thumbnail.imageurlpathlsakfjlsdfj)" />
<h2 className='home-card-title'> Title </h2>
<h4> Subtitle stuf that should explain more </h4>
</div>
</div>
)
}
}
export default Card
Can I get a background image in a div in React?
Also how would it be done in the Sass file.
If you have many elements you want to do this and you want to abstract away as much as possible to the Sass file and you're ok targeting modern browsers only, you can use CSS custom properties.
In your Sass file:
.home-card-image{
background-image:url( var(--homeCardImage) );
[background-position, size, etc...]
}
and then in React, you just set the custom property to whatever you want:
class Card extends Component {
render() {
return (
<div className='home-card-view flex-center'
style='--homeCardImage: "YOUR-IMAGE-URL-HERE"'>
<div>
<h2 className='home-card-title'> Title </h2>
<h4> Subtitle stuf that should explain more </h4>
</div>
</div>
)
}
}
export default Card
Why might you do this? Well, if you want to allow yourself to do something more than just a single background-image in future you can. For example, if you wanted to overlay a second background-image with a gradient overlay, you could do that just in the sass file, like so:
.home-card-image{
background-image:url( var(--homeCardImage) ), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5);
[background-position, size, etc...]
}
And you wouldn't need to touch the React component.
Just apply inline style to the component that you want to have the background-image property (Example below)
class Card extends Component {
render() {
const image_url = 'YOUR IMAGE URL';
return (
<div className='home-card-view flex-center'
style={{ backgroundImage : `url(${image_url})` }}>
<div>
<img className='home-card-image' src="https://thumbnail.imageurlpathlsakfjlsdfj)" />
<h2 className='home-card-title'> Title </h2>
<h4> Subtitle stuf that should explain more </h4>
</div>
</div>
)
}
}
export default Card