I need to overlap the left part of the Input using styled-components in React. He will be able to write only after the overlap, on the right part.
Codesandbox is here CLICK HERE
Just like this image below:
const TextInput = styled.input`
font-size: 16px;
padding: 10px 10px 10px 10px;
display: block;
border: 2px solid #e3e5e5;
border-radius: 8px;
height: 28px;
width: 100%;
&:focus {
outline: none;
}
`;
I would push the border styling and layout to the Wrapper component. Add a styled label component.
Code
const Wrapper = styled.div`
width: 100%;
position: relative;
margin-bottom: 1rem;
display: flex;
flex-direction: row;
border: 2px solid #e3e5e5;
border-radius: 8px;
overflow: hidden;
`;
const InputLabel = styled.label`
background-color: #e3e5e5;
color: gray;
display: flex;
flex-direction: column;
font-size: 16px;
height: 28px;
justify-content: center;
padding: 10px;
width: auto; // <-- can set to specific width for consistency
`;
const TextInput = styled.input`
border-width: 0;
flex: 1;
font-size: 16px;
height: 28px;
padding: 10px;
outline: none;
`;
const TextError = styled.span`
display: block;
font-size: 12px;
color: #ff0000;
line-height: 14px;
font-weight: bold;
margin-top: 11px;
`;
const Input = ({
label,
name,
type = "text",
value = "",
handleChange = () => {},
error = null,
touched = false
}) => {
return (
<div>
<Wrapper>
<InputLabel htmlFor={name}>{label}</InputLabel>
<TextInput
id={name}
name={name}
type={type}
value={value}
onChange={handleChange}
/>
</Wrapper>
{error && touched && <TextError>{error}</TextError>}
</div>
);
};
I tried to recreate same way as in the picture above. For the solution i added extra class to the Wrapper. Does this approach solve your problem? example
const Overlap = styled.span`
width: min-content;
display: flex;
align-items: center;
padding: 0px 60px 0 20px;
border-radius: 8px 0 0 8px;
background-color: hsl(0, 0%, 90%);
color: hsl(195, 2%, 68%);
font-size: 1.2em;
white-space: nowrap;
`;
Related
So I'm following along the tutorial on Youtube about reactJS, and the youtuber told me to import a CSS file into my index.css then it should be properly showing rendering of the website, however, when i copied the CSS and imported into my App.js and Index.js nothing pops up, does anyone know how to deal with this? is the style are different for the versions of react? am I missing any other set up?
here is index.css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
.task.reminder {
border-left: 5px solid green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}
Here is my App.js and Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
Lastly, App.js :
import Header from "./components/Header";
import Tasks from "./components/Tasks";
import './index.css';
function App() {
return (
<div className="Container">
<Header title='Orpheus Research'/>
<Tasks />
</div>
);
}
export default App
The index.css should be imported into the index.js file. So you can just delete the import in the app.js.
Since you import with "./index.css" as the path you need to make sure that the index.css file is in the same folder (I suppose it's the src folder) as the index.js.
so I'm trying to create my blog using the react framework, but I'm facing an issue here.
I really have been trying to tweaks settings on the css, html or even try to switch to grid instead of flexbox but I can't figure out how to make the "fixed" navbar detected by the flexbox.
Currently, the navbar works fine I guess, but the content that is supposed to be on the right, is not taking the place it should, it's taking the entire screen instead of the rigth section next to the navbar.
Some help would be highly appreciated !
body {
overflow: hidden;
height: 100vh;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.nav-tab-text{
font-size: 1.6em;
display: block;
padding: 00px 0px 50px 0px;
text-align: center;
list-style-type: none;
display: flex;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
position: fixed;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
align-self: center;
margin-top: 3%;
}
.test{
display: flex;
}
function Navbar() {
return (
<div className="flex-container">
{/*left box - Navbar*/}
<nav className="nav-tab">
Home
Articles
Archives
About
</nav>
{/*Right box - Home content*/}
<div className="home-content-container">
<div className="home-content-title">
<h3>Name</h3>
</div>
<div className="home-content-featured">
<p>1</p>
</div>
</div>
<div className="test">
<p>2</p>
</div>
</div>
);
}
export default Navbar;
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
body {
overflow: hidden;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.flex-container{
display: flex;
flex-flow: row;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
display: flex;
flex-direction: column-reverse;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
margin-top: 3%;
align-self: center;
}
Grid area can't be a prop.
=============================
export const Code = styled.input<{area?:String}>`
font-family: Archivo;
font-size: 14px;
font-weight: 500;
text-align: center;
width: 61px;
height: 19px;
outline: none;
border: unset;
grid-area: ${({area})=>area ? area : ''};
background-color: transparent;
`;
and it can't be overriden also:
<Code type='text' placeholder='Code' style={{
gridArea:"nom code !important"
}}
it was just in front of me hhhhh:
export const Code = styled.input<{area?:string}>` // string type with LowerCase S
font-family: Archivo;
font-size: 14px;
font-weight: 500;
text-align: center;
width: 61px;
height: 19px;
outline: none;
border: unset;
grid-area: ${({area})=>area ? area : 'code'}; // added intial value
background-color: transparent;
`;
my button can't compile and the mistake is:"./src/components/Button.js
Line 2: 'React' must be in scope when using JSX react/react-in-jsx-scope". Does anybody know the problem? pls help! Thank you!
"This is my Header.js:
import PropTypes from 'prop-types';
import Button from './Button'
const Header = ({title}) => {
return (
<header className="header">
<h1>{title}</h1>
<Button />
</header>
)
}
Header.defaultProps ={
title:'Task Tracker '
}
Header.propTypes={
title:PropTypes.string.isRequired,
}
// css in js
// const headingStyle = {
// color:'red',
// backgroundColor:'blue'
// }
export default Header
This is my Button.js:
const Button = () => {
return <button className="btn">Add</button>
}
export default Button
My Header.js and Button.js are inside my components folder which is inside my src folder
This is my index.css which is inside my src folder too:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.container {
max-width: 500px;
margin: 30px auto;
overflow: auto;
min-height: 300px;
border: 1px solid steelblue;
padding: 30px;
border-radius: 5px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.btn {
display: inline-block;
background: #000;
color: #fff;
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
font-size: 15px;
font-family: inherit;
}
.btn:focus {
outline: none;
}
.btn:active {
transform: scale(0.98);
}
.btn-block {
display: block;
width: 100%;
}
.task {
background: #f4f4f4;
margin: 5px;
padding: 10px 20px;
cursor: pointer;
}
.task.reminder {
border-left: 5px solid green;
}
.task h3 {
display: flex;
align-items: center;
justify-content: space-between;
}
.add-form {
margin-bottom: 40px;
}
.form-control {
margin: 20px 0;
}
.form-control label {
display: block;
}
.form-control input {
width: 100%;
height: 40px;
margin: 5px;
padding: 3px 7px;
font-size: 17px;
}
.form-control-check {
display: flex;
align-items: center;
justify-content: space-between;
}
.form-control-check label {
flex: 1;
}
.form-control-check input {
flex: 2;
height: 20px;
}
footer {
margin-top: 30px;
text-align: center;
}
try this code :
export const Button = () => {
return <button className="btn">Add</button>
}
import {Button} from './Button'
adding on to Vuk Vucic comment:
Vucic mentioned that you need to import React when using functional components, but as of React 17 (if compiled using babel), top line import React from 'react' is no longer needed. You now only need to import react-specific hooks
like import { useEffect() } from 'react';
However, if it isn't comiled via Babel, you need to import React.
in this case, it looks like you do need to import React from 'react';
helpful article
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
Justify-content: space-between isn't spacing the two buttons. They're side-by-side with no margin. How do I make the buttons space-between?
export const Divbuttons = styled.div`
display: 'flex';
flex-direction: 'row';
justify-content: 'space-between';
align-items: 'center';
padding: 0px;
position: 'absolute';
`;
export const Continue = styled.button`
line-height: 16px;
letter-spacing: 1.25px;
padding: 10px 23px;
box-sizing: 'border-box';
position: 'static';
`;
export const Cancel = styled.button`
line-height: 16px;
letter-spacing: 1.25px;
padding: 10px 23px 10px 23px;
box-sizing: 'border-box';
position: 'static';
`;
<Divbuttons>
<Cancel type='button'>Cancel</Cancel>
<Continue type='button'>Save and continue</Continue>
</Divbuttons>
it looks like you need to remove your quotes. e.g. display: flex; instead of display: 'flex';