Codesandbox: https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-dctrww?file=/Tooltip.js
I can not press {children} element because tooltip has an padding-bottom. I tried in dev tools browser set z-index on children but this does not helps. How should I set children to be always 'above' tooltip padding - so i will able to click on {children}
Tooltip:
import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Tooltip } from "antd";
import styled from "styled-components";
export const Tool = ({ children, title, left, top }) => (
<Custom
visible
left={left}
top={top}
title={title}
getPopupContainer={(triggerNode) => triggerNode}
>
<Children>{children}</Children>
</Custom>
);
const Children = styled.div`
position: relative;
display: inline;
> * {
position: relative;
display: inline;
}
`;
const Custom = styled(Tooltip)`
.ant-tooltip-arrow {
display: none;
}
.ant-tooltip {
left: ${(props) => props.left || 0} !important;
top: ${(props) => props.top || "-70px"} !important;
}
.ant-tooltip-content {
position: relative;
overflow-x: hidden;
overflow-y: visible;
padding-bottom: 20px;
display: inline-block;
}
.ant-tooltip-inner {
padding: 10px 15px;
background: white;
top: 0;
display: inline-block;
border-radius: 10px;
border: 3px solid red;
border-bottom-right-radius: 0px;
z-index: 2;
max-width: 200px;
box-shadow: none;
color: black;
word-wrap: break-word;
}
.ant-tooltip-content:before {
content: "";
position: absolute;
width: 25px;
height: 25px;
background: white;
bottom: 14px;
right: -6px;
transform: rotate(25deg);
border-bottom: 3px solid red;
}
.ant-tooltip-content:after {
content: "";
width: 3px;
background: red;
height: 50%;
position: absolute;
right: 0;
bottom: 13px;
}
`;
import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Tool } from "./Tooltip";
const App = () => {
return (
<Tool title="Tooltip">
<p>Button</p>
</Tool>
);
};
export default App;
Keep in mind that the antd library also has its own styles that it adds in the DOM, so I recommend starting codesandbox and checking there
Related
hello I tried to put number at top left corner of cart icon and I didnt succeeded
I'm trying to get a result as in the picture
enter image description here
this is my code:
<BagContainer>
<Bag src={bag} hideIcons={hideIcons} title="bag" onClick={openCart}/>
<Number>5</Number>
</BagContainer>
export const BagContainer=styled.div`
position: relative;
width: fit-content;
`
export const Bag= styled.img<{hideIcons:boolean}>`
background: transparent;
border: none;
outline: none;
font-size: 1.8rem;
display: ${(icon) => icon.hideIcons ? 'none' : 'inline'}
`;
export const Number=styled.span`
`
export const BagContainer = styled.img<{hideIcons:boolean}>`
background: transparent;
border: none;
outline: none;
font-size: 1.8rem;
display: ${(icon) => icon.hideIcons ? 'none' : 'inline'}
position: relative;
`;
export const Number = styled.span`
position: absolute;
left: 0;
top: 0;
transform: translate3d(-50%, -50%, 0);
`;
I'm a beginner in React and I'm trying to create a web application's front end UI part and I'm trying to add a text field in the box that I've added but every time i do that, the app does not render anything other than a blank color filled to the screen.
without the text field:
with the text field:
My code:
App.js:
import React, { Component} from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Text1 from './Text1';
import Helmet from 'react-helmet';
import HRLOGO from './images/logo.png';
import ABCLOGO from './images/Group 20399.png';
export default class App extends Component
{
state = {};
render()
{
return (
<div className="hr">
<div>
<img src={HRLOGO} alt="" className="container-div"/>
</div>
<div>
<img src={ABCLOGO} alt="" className="container-div2"/>
</div>
<Helmet>
<style>{'body { background-color: #2d4250; }'}</style>
</Helmet>
<div>
<h1 className="InvoiceStyle">Invoice List</h1>
</div>
<div className="Rectangle">
</div>
<div className="search">
<Text1></Text1>
</div>
<footer className="Privacy">
<p>
Privacy Policy
| ©Highradius Corporation. All rights reserved.
</p>
</footer >
</div>
);
}
}
The css File App.css:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
margin:auto;
}
#media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
margin:auto;
}
}
.Rectangle {
width: 2000px;
height: 570px;
background: #2e4551;
position: fixed;
top: 130px;
}
.container-div {
display: flex;
height: 50px;
width: 235px;
position: fixed;
top: 8px;
right: 600px;
text-align: center;
}
.InvoiceStyle {
display: flex;
color: #fff;
font-family: 'Open Sans';
font-size: x-large;
position: fixed;
top: 90px;
left: 25px;
}
.container-div2 {
display: flex;
height: 50px;
width: 312px;
position: fixed;
top: 7px;
left: 15px;
}
.Privacy {
display: flex;
position: fixed;
top: 720px;
left: 600px;
color: white;
}
.search {
position: fixed;
top: 155px;
left: 690px;
width: 16%;
height: 40px;
background-color: #fff;
border: none;
border-top-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: rgb(11, 68, 253);
}
.App-link {
color: #ff0000;
}
#keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Text1.js:
import TextField from "#mui/material/TextField";
const Text1 = () => {
return (
<form noValidate autoComplete = "off">
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</form>
);
}
export default Text1;
Like the page just goes blank, How do I fix this?
Edit:
Browser Console:
The primary error appears to be Cannot read properties of null (reading 'useContext'). React has the concept of ambient Context to simplify passing values down through your Component hierarchy. In this particular case, the TextField component has been assigned a variant theme. In order to lookup and apply that theme, it is expecting to find somewhere in it's parent component hierarchy a ThemeProvider. https://mui.com/material-ui/customization/theming/#theme-provider
Solution: Add a ThemeProvider as a parent component within the render section of your App component.
function render() {
return (<ThemeProvider ...>
...
</ThemeProvider>);
}
After you do this, the TextField component should be able to properly retrieve the context via it's call to the useContext hook. If you run into further issues, make sure you carefully review the basic installation and usage documentation for that library: https://mui.com/material-ui/getting-started/usage/
I have a form with the following code using React in Javascript:
import React from 'react';
import { FiSend } from 'react-icons/fi';
export default function SubscriptionForm() {
return (
<div className="subscription-form">
<form>
<input
type="text"
className="subscription-form__input-field"
placeholder="Je e-mailadres"
/>
<button className="subscription-form__subscribe-button">Submit</button>
</form>
</div>
);
}
here's the css for the form:
/*
subscription form
*/
.subscription-form {
width: 100%;
line-height: 200px;
display: flex;
justify-content: center;
}
.subscription-form__input-field {
height: 45px;
width: 400px;
padding-left: 10px;
border: 1px solid white;
}
.subscription-form__input-field::placeholder {
color: black;
}
.subscription-form__input-field:focus {
outline: none;
box-shadow: none;
}
.subscription-form__subscribe-button {
height: 45px;
border: 0;
background: red;
}
I gave both the button and the text input the same height of 45 px but in my browser it appears like this:
.subscription-form__input-field {
border: 1px solid white; /* You have border here. Pls remove this */
}
My problem is with the width of a sticky header. It is extending horizontally over the vertical scrollbar on the right. So if the thumb of the scrollbar is at the top, and under the header, then you can't grab and drag it. Curiously the thumb appears to be on top of the header but if you try to grab and drag it, you will be selecting text rather than moving the scroll position.
Is there a way to fix this header width so that it's wide enough to cover the scrolling text but not so wide that it covers the scrollbar, or a way to put the scrollbar on top of the header?
https://codesandbox.io/s/fragrant-cookies-g9w4c
.App {
font-family: sans-serif;
text-align: center;
}
::-webkit-scrollbar {
width: 40px;
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 18px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 18px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
.sticky-heading {
background-color: aqua;
font-weight: bold;
font-size: 22px;
padding-top: 10px;
width: 100%;
position: fixed;
}
.list {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 20px;
position: fixed;
background: #fff;
height: 100vh;
width: -webkit-fill-available;
overflow-x: hidden;
}
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
return (
<div className="App">
<div className="list">
<div>
<div>
<div className="sticky-heading">
This should not cover the scrollbar
</div>
<div>
{Array.from({ length: 300 }, () => {
return (
<div>
this must be covered by the heading when scrolling
<br />
</div>
);
})}
</div>
</div>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
::-webkit-scrollbar {
width: 40px;
}
Given width of scrollbar is 40px & scrollbar present at right side of page , so add right:40px in:
.sticky-heading {
right: 40px; //or 30px whatever you want but more than scrollbar width
}
You can try to use this position: absolute; instead of position: fixed;
.sticky-heading {
background-color: aqua;
font-weight: bold;
font-size: 22px;
padding-top: 10px;
width: 100%;
position: absolute;
}
Is this what you want?
I am working on my first React project, a project as part of a Udacity course.
The task (or this part of it) is to initially render a series of book objects horizontally in three shelves.
I have managed to render the shelves and the books within them, however the books within each shelf are being rendered top to bottom rather than left to right.
One of the solutions I have seen posted is to use display: inline; in the CSS file but I have done that with no success.
How can I fix the code so that books within shelves are rendered horizontally?
I have included the ListBooks.js and App.css files. Let me know if I need to add anything else.
ListBooks.js
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './App.css'
const shelves = [
{
key: 'currentlyReading',
name: 'Currently Reading'
},
{
key: 'wantToRead',
name: 'Want To Read'
},
{
key: 'read',
name: 'Read'
}
];
class ListBooks extends Component {
static propTypes = {
books: PropTypes.array.isRequired
}
state = {
showSearchPage: false,
query: ''
}
render() {
const { books } = this.props
function getBooksForShelf(shelfKey) {
return books.filter(book => book.shelf === shelfKey);
}
return(
<div className="app">
{this.state.showSearchPage ? (
<div className="search-books">
<div className="search-books-bar">
<a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
<div className="search-books-input-wrapper">
{/*
NOTES: The search from BooksAPI is limited to a particular set of search terms.
You can find these search terms here:
https://github.com/udacity/reactnd-project-myreads-starter/blob/master/SEARCH_TERMS.md
However, remember that the BooksAPI.search method DOES search by title or author. So, don't worry if
you don't find a specific author or title. Every search is limited by search terms.
*/}
<input type="text" placeholder="Search by title or author"/>
</div>
</div>
<div className="search-books-results">
<ol className="books-grid"></ol>
</div>
</div>
) : (
<div className="list-books">
<div className="list-books-title">
<h1>My Reads</h1>
</div>
<div className="list-books-content">
<div>
{ shelves.map((shelf) => (
<div key={shelf.key} className="bookshelf">
<h2 className="bookshelf-title">{shelf.name}</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<li>
{ getBooksForShelf(shelf.key).map((book) => (
<div key={book.id} className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.thumbnail})` }}></div>
<div className="book-shelf-changer">
<select>
<option value="none" disabled>Move to...</option>
<option value="currentlyReading">Currently Reading</option>
<option value="wantToRead">Want to Read</option>
<option value="read">Read</option>
<option value="none">None</option>
</select>
</div>
</div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.author}</div>
</div>
))}
</li>
</ol>
</div>
</div>
)) }
</div>
</div>
<div className="open-search">
<a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
</div>
</div>
)}
</div>
)
}
}
export default ListBooks
App.css
html, body, .root {
height: 100%;
}
body {
line-height: 1.5;
}
body, .app {
background: white;
}
/* main page */
.list-books-title {
padding: 10px 0;
background: #2e7c31;
text-align: center;
}
.list-books-title h1 {
font-weight: 400;
margin: 0;
color: white;
}
.list-books-content {
padding: 0 0 80px;
flex: 1;
}
.bookshelf {
padding: 0 10px 20px;
}
#media (min-width: 600px) {
.bookshelf {
padding: 0 20px 40px;
}
}
.bookshelf-title {
border-bottom: 1px solid #dedede;
}
.bookshelf-books {
text-align: center;
}
.open-search {
position: fixed;
right: 25px;
bottom: 25px;
}
.open-search a {
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: #2e7d32;
background-image: url('./icons/add.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
font-size: 0;
}
/* search page */
.search-books-bar {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
display: flex;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
}
.search-books-input-wrapper {
flex: 1;
background: #e9e;
}
.search-books-bar input {
width: 100%;
padding: 15px 10px;
font-size: 1.25em;
border: none;
outline: none;
}
.close-search {
display: block;
top: 20px;
left: 15px;
width: 50px;
height: 53px;
background: white;
background-image: url('./icons/arrow-back.svg');
background-position: center;
background-repeat: no-repeat;
background-size: 28px;
font-size: 0;
}
.search-books-results {
padding: 80px 10px 20px;
}
/* books grid */
.books-grid {
list-style-type: none;
padding: 0;
margin: 0;
display: inline;
justify-content: center;
flex-wrap: wrap;
}
.books-grid li {
padding: 10px 15px;
text-align: left;
}
.book {
width: 140px;
}
.book-title,
.book-authors {
font-size: 0.8em;
}
.book-title {
margin-top: 10px;
}
.book-authors {
color: #999;
}
.book-top {
position: relative;
height: 200px;
display: flex;
align-items: flex-end;
}
.book-shelf-changer {
position: absolute;
right: 0;
bottom: -10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #60ac5d;
background-image: url('./icons/arrow-drop-down.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.book-shelf-changer select {
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* book cover */
.book-cover {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
background: #eee;
}
.book-cover-title {
padding: 20px 10px 0;
text-align: center;
font-size: 0.8em;
}
Try setting your shelf element, with display flex as it is suggested in your comments...
.list-books-content li {display: flex; flex-direction: row;}