I'm writing a pet project that needs to be mobile responsive and I have a problem with white space in the Carousel component, I don't know how to remove it, can someone help me?
This is looks like page on PC
https://imgur.com/a/3zwNDnl
This is looks like mobile devices https://imgur.com/a/qEwPDdC
And I want to remove the empty space at the bottom, make the carousel responsive, how can I do that?
Here is my component code
import ...
export default class CarouselBox extends Component{
render(){
return(
<Carousel>
<Carousel.Item>
<img className="d-block w-100"
src={edinburghView1}
alt="Edinburgh_Uni"
/>
<Carousel.Caption>
<Nav.Link href='/EdinburghCity'>
<h3>Edinburgh city</h3>
<p>Edinburgh city view in 2023</p>
</Nav.Link>
</Carousel.Caption>
</Carousel.Item>
)
}
}
Here is my Footer component
import { MDBFooter } from 'mdb-react-ui-kit';
export default class Footer extends Component {
render() {
return (
<>
<MDBFooter sticky="bot" bgColor='light' className='text-center text-lg-left' class="fixed-bottom">
<div className='text-center p-3' style={{
backgroundColor: '#f8f9fa',
marginTop: '0.5%' }}>
© {new Date().getFullYear()} Copyright:{' '}
<a className='text-dark' href='https://t.me/koreechdhs'>
Boiar Kostiatyn
</a>
</div>
</MDBFooter>
</>
)
}
}
I'm somewhat confused what you mean by:
I want to remove the empty space at the bottom, make the carousel responsive, how can I do that?
I'm assuming the red area here you're talking about?
That is because, you have
sticky="bot"
in:
<MDBFooter sticky="bot" bgColor='light' className='text-center text-lg-left' class="fixed-bottom">
which is doing exactly what you want.
If you want the carousel to be full height you will need to add that in the component at that viewport size, reference sizing
Related
I'm working on a react with nextjs project.
I'm using Link to scroll to a specific section on the same page.
Here is one of the components that use Link:
import styles from './section1.module.scss';
import Image from 'next/image';
import Button from '#material-ui/core/Button';
import tought_process from '../../../public/thought_process.png';
import Link from 'next/link';
const Section1 = () => {
return (
<div className={styles.container}>
<div className={styles.left}>
<div className={styles.leftContainer}>
<Link href='#enews'>
<div className={styles.buttonContainer}>
<Button className={styles.buttonstyle1}>Get started</Button>
</div>
</Link>
</div>
</div>
<div className={styles.right}>
<Image
src={tought_process}
className={styles.imageStyle}
alt='how to think about organizing'
layout='responsive'
priority
/>
</div>
</div>
);
};
export default Section1;
And here i mark the element with the id:
<div {...handlers} className={styles.bigBody}>
<NavBar open={menuOpen} toggle={setMenuOpen} scrollY={scrollY} />
<SideMenu open={menuOpen} toggle={setMenuOpen} scrollY={scrollY} />
<div className={styles.sections}>
<Section1 />
<Section2 />
<Section3 id='enews' />
<Section4 />
</div>
Can't figure out what i'm doing wrong.
Multiple clickable elements are wrapping each other. Remove the button and add the anchor element.
<Link href="#enews">
<a>Get started</a>
</Link>
<Link href="#enews">
<a className={styles.buttonContainer}>
<span className={styles.buttonstyle1}>Get started</span>
</a>
</Link>
I'd recommend updating the styles so you can remove the inner span element.
I use a custom link component that does a few things (not shown); one is smooth scroll to hash routes if the browser supports smooth scrolling (not Safari).
import NextLink, { LinkProps } from "next/link";
import { HTMLProps, MouseEvent, FC } from "react";
export const Link: FC<LinkProps & HTMLProps<HTMLAnchorElement>> = ({ as, children, href, replace, scroll, shallow, passHref, ...rest}) => {
const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
if (href.startsWith("#")) {
event.preventDefault();
const destination = document.getElementById(href.substring(1));
if (destination) destination.scrollIntoView({ behavior: "smooth" });
}
};
return (
<NextLink as={as} href={href} passHref={passHref} replace={replace} scroll={scroll} shallow={shallow}>
<a href={href} {...rest} onClick={onClick}>
{children}
</a>
</NextLink>
);
};
I removed new lines to condense the code block
If you went with the above approach, don't include the anchor tag since it's automatically included.
import { Link } from "./custom/path/link"
<Link href="#enews">Get started</Link>
Two points here:
As per the nextjs, passHref has to be used if a custom element is used as a child of Link tag instead of an anchor tag.
As per the same docs value of href should be '/#enews' not '#enews'
Hello i want to build a toolbar that has an image in the background. I have build two different components. The first is the image component:
import React from 'react';
import thepic from '../mypic.jpg'; // with import
import '../App.css';
const Image = () => {
return (
<img src={thepic} className='the-pic' />
)
}
export default Image;
The second component is the toolbar, i am using react-bootstrap toolbar and i wrap the previous component in the toolbar:
<Image>
<Navbar>
<Container>
<Navbar.Brand href="#home">
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">
Home
</Nav.Link>
<Nav.Link href="#link">
Link
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</Image>
I have manage to display the image in the screen but the toolbar is not shown up. It's like the image override the toolbar.
Can anyone help with this ?
The approach is wrong, you shouldn't make a component for a background image and use it like a "slot" for other components. What you can do is siply give a background image to your navbar component as prop, so it will be dynamic.
Now i want to remove the previous and next and also I want to style the slider which is shown as if it is very old , it's not modern
Acutally i want it to look something like how the react-bootstrap claims their carousel looks like :
Like this:
My code snippet is as follows
<Carousel pause="hover">
{product.images &&
product.images.map((image) => (
<Carousel.Item key={image.public_id}>
<img
className="d-block w-100"
src={image.url}
alt={product.title}
/>
</Carousel.Item>
))}
</Carousel>
I think the problem comes from your css. Did you put the bootstrap one ?
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
and I suggest "antd" instead of bootstrap (https://ant.design/components/carousel/)
I am trying to add a transition of 2 png into an png in the background, and be able to switch between different scenarios ( like living-room, dining-room etc). Once I click the element that select which area of the house I am choosing, the images gets fetched but because it takes some time to load, the transition doesn't happen and they just appear on top of the image on the background without transition smoothly from the side. I need a way to load the all the images once the route gets rendered, or maybe if you could give me another solution for the problem I'm happy to hear it.
This is the template
<template>
<div>
<div v-for="item in painting" :key="item.id" class="showroom">
<div class="setting">
<h1>{{ item.name }}</h1>
<h3>Choose a room:</h3>
<div v-for=" (room, idx) in rooms" :key="idx" id="roomSelection">
<img id="roomSelector" :src="room.roomview" #click="showRoom(room)">
<p>{{ room.name }}</p>
<br>
</div>
<p>Choose a wall color: <span id="colorPicker" :style="{backgroundColor: color}"><input type="color" id="base" v-model="color"></span></p>
<router-link to="/painting"><i class="fas fa-arrow-left"></i></router-link>
</div>
<div class="display">
<div :style="{backgroundColor: color}" class="wall">
<img :src="item.img">
</div>
<div class="forniture">
<transition name="slideIn">
<div v-for=" room in roomToShow" :key="room" class="setForniture">
<img class="left" :id="room.space1" :src="room.forniture1">
<img class="left" :id="room.space2" :src="room.forniture2">
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
This is the script
<script>
import { mapGetters } from 'vuex'
import sofa from '../assets/sofa.png'
import lamp from '../assets/lamp.png'
import table from '../assets/table.png'
import cabinet from '../assets/cabinet.png'
import chair from '../assets/chair.png'
import sidetable from '../assets/sidetable.png'
import livingroom from '../assets/livingroom.png'
import diningroom from '../assets/diningroom.png'
import lounge from '../assets/lounge.png'
export default {
data(){
return{
color: '#243E36',
rooms: [
{ name: "lounge", space1: 'lounge1', space2: 'lounge2', forniture1: chair, forniture2:sidetable, roomview: lounge},
{ name: "livingroom" , space1: 'livingroom1', space2: 'livingroom2', forniture1:sofa, forniture2:lamp, roomview: livingroom },
{ name: "diningroom" , space1: 'diningroom1', space2: 'diningroom2', forniture1: table, forniture2: cabinet, roomview: diningroom }
],
roomToShow: [],
}
},
computed: {
...mapGetters([
'showPainting',
'forSale',
'painting'
]),
},
methods: {
showRoom(room) {
setTimeout( () => {
this.roomToShow.shift();
this.roomToShow.push(room);
}, 100)
}
}
</script>
The easiest way to solve this issue is to just hide the images with CSS but nevertheless load all from the beginning (render the elements). You can do that by dynamically adding a class to the currently visible image with :class="".
A more complex solution, which gives you also a callback for when the images are loaded, is to create a new Image() for all images and react to onload/onerror. Like this, you can load all the images in the beginning with JS abd without changing the HTML. Here is an example for this use case: How to create a JavaScript callback for knowing when an image is loaded?
I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2.
Currently my HTML output looks like this:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
And my JSX like this:
<Menu vertical className="some classes" icon=''>
<Menu.Item
active={active}
onClick={onClick}
className="some class"
>
<Icon name="home" large /> Dashboard
</Menu.Item>
</Menu>
I wrote a new Icon component to use my own Icon Font which looks like this. I tried to stay as close to the original Icon class from the React Implementation of Semantic UI.
import React, { Component } from "react";
import classnames from "classnames";
/**
* #class Icon
* #extends {Component}
* #description Icon class for themify icons. Replacement for semantic ui Icon class
*/
class Icon extends Component {
render() {
var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
big: this.props.big,
large: this.props.large,
close: this.props.close
});
return (
<i
aria-hidden={true}
className={this.props.close ? iconClass.replace("icon", "") : iconClass}
onClick={this.props.onClick}
/>
);
}
}
export default Icon;
Now I want the Text and the Icon to be vertically centered but I can't get it to work, they text always seems to be at the top of its parent node. But actually I want it to appear vertically centered in the Menu.Item. with any size of the Icon. So when I change the size of the Icon to large the text should always be centered vertically. The size classes are the same as in Semantic UI.
Does anyone have an idea how to achieve this ? Thanks in advance :)
Hi you are facing a very common problem, possible solutions are depicted in the following codepen
https://codepen.io/anon/pen/XEKZwq
What I suggest you do is to wrap the text in a span so instead of:
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
you do the following
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
<span>Dashboard</span>
</a>
Once you've done this you can easily use the solution in the codepen above.