GOAL: Remove invisible padding around the color swatch so that the color fills the entire container.
I'm trying to fill the entire wrapper with the selected color.
However, there seems to be invisible padding on the input field:
import React, { useState } from "react";
import styled from "styled-components";
import "./styles.css";
const Container = styled.span`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 400px;
border-radius: 4px;
margin: 0px;
padding: 0px;
input[type="color"] {
border: 1px solid var(--main-grey);
outline: none;
border-radius: 8px;
width: 50%;
margin-left: 5px;
font-size: 12px;
font-family: Poppins;
padding: 0px;
-webkit-appearance: none;
width: auto;
height: auto;
cursor: pointer;
background-color: white;
margin:
&::-webkit-color-swatch-wrapper {
margin:-100px;
padding: 0px;
border: none;
overflow: none;
}
&::-webkit-color-swatch {
padding: 18px;
border:none;
border-radius: 8px;
margin: 0px;
}
}
input[type="text"] {
border: 1px solid var(--main-grey);
outline: none;
border-radius: 8px;
width: 50%;
margin-left: 5px;
padding-left: 12px;
margin-top: 0px;
font-size: 14px;
font-family: Poppins;
}
`;
const ColorPicker = (props) => {
return (
<Container>
<div className="color__pickerWrapper">
<input type="color" {...props} />
<input type="text" {...props} />
</div>
</Container>
);
};
export default function Color() {
const [state, updateState] = useState("#FFFFFF");
const handleInput = (e) => {
updateState(e.target.value);
};
return (
<div className="App">
<ColorPicker onChange={handleInput} value={state} />
</div>
);
}
I think there is some invisible padding around the input. However, I tried 0px margin and 0px padding and it still didn't solve the problem. Perhaps it is an issue with styled components?
It's not an elegant solution and may bring several problems in other parts that you desire the margins to appear.
Still, if you want to brute forcefully remove them go to your index.html file, within the public folder and add the code below after your head ends , and before your body starts :
<style>
* {
margin: 0 !important;
padding: 0 !important;
}
</style>
Related
Hi I think this is very simple question so I apologize in advance for not being able to resolve it myself. I'm trying to make tag disappear by media query when width of window becomes less than 1200px. But it doesn't disappear. I think it's a matter of inheritance. I'd appreciate if you let me know how to solve this.
this is NaviSearch.jsx file. I want to make top tag disappear
import React from "react";
import "../navi.css";
import pencil from "./images/pencil.png";
import { Link } from "react-router-dom";
function NaviRecent (props) {
return (
<Link to="/login" style={{textDecoration : 'none'}}>
<button id="NaviRecent">
<img src={pencil} id="NaviRecentImage"/>
<span id="NaviRecentText">최근강의</span>
</button>
</Link>
);
}
export default NaviRecent;
and this file is css file. I only brought what seemed relevant
#Navi {
position: sticky;
background-color: #fff;
width: 100%;
height: 64px;
top: -1px;
z-index: 5;
box-shadow: 0 2px 4px 0 hsl(0deg 0% 81% / 50%);
width: 1263.330;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
#NaviRecent {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
right: 20px;
width: 100px;
height: 30px;
padding: 8px;
background: #00c471;
color: #fff;
border-radius: 4px;
}
#NaviHiddenLogo {
display: none;
}
#NaviRecentText {
box-sizing: border-box;
color: white;
cursor: pointer;
font-family: Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;
font-size: 16px;
font-weight: 600;
margin-left: 4px;
}
#NaviRecentImage {
width: 15px;
height: 15px;
}
#media screen and (max-width: 1020px) {
#NaviRecent {
display: none;
}
}
you should wrap into a tag like this :
import React from "react";
import "../navi.css";
import pencil from "./images/pencil.png";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NaviRecent(props) {
return (
<Router>
<Link to="/login" style={{ textDecoration: "none" }}>
<button id="NaviRecent">
<img src={pencil} id="NaviRecentImage"/>
<span id="NaviRecentText">최근강의</span>
</button>
</Link>
</Router>
);
}
export default NaviRecent;
Be carefull, in your css file max-width is 1020px and not 1200px as you mentioned in your statement.
Hope it will help.
I'm trying to position a div with an image outside my main Card component. I have tried using margin-bottom, however, it didn't work. How can it be done using CSS styled-component?
I will attach an image here of the design that I'm trying to achieve:]
https://imgur.com/a/EUHq4eE
Card Component:
function CardComponent(props) {
return (
<>
<Card>
<CardImage>{props.img}</CardImage>
<CardName>{props.name}</CardName>
<Description>{props.description}</Description>
<Links>
<Button>{props.livePreview}</Button>
<Button>{props.github}</Button>
</Links>
</Card>
</>
);
}
export default CardComponent;
Styled Component
import styled from "styled-components";
export const Card = styled.div`
width: 25%;
height: 70vh;
border: 1px dotted black;
margin-top: 5%;
#media (max-width: 768px) {
width: 100%;
}
`;
export const CardImage = styled.div`
border: 1px solid pink;
width: 80%;
height: 50vh;
margin: auto;
`;
export const CardName = styled.div`
border: 1px solid black;
text-align: center;
`;
export const Description = styled.div`
text-align: center;
`;
export const Links = styled.div`
display: flex;
border: 1px solid pink;
justify-content: center;
`;
export const Button = styled.div`
border: 1px solid blue;
`;
You can use either position: absolute or margin-top to achieve it. Check the snippet attached:
section {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
display: inline-block;
max-width: 300px;
margin-top: 50px;
}
img {
max-width: 80%;
margin-top: -30px;
}
<section>
<img src="https://media1.popsugar-assets.com/files/thumbor/_Rrjw5u5qeqlO8Zznc0TskZB_8k/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2018/04/30/868/n/1922283/1f2e59ed5ae773b06f2879.82877284_/i/Does-Iron-Man-Die-Avengers-Infinity-War.jpg" />
<h4>Hello world</h4>
</section>
position:absolute;
top: -50;
Something like this should work, you should use absolute position because elements are overlapping each other and giving margin, padding etc. won't work since they are not meant to be overlap elements.
I am doing this website for my full stack web development course but I am having a bit of trouble with my css. I am wondering how I can get the text Div to scale with the page.
the div looks like this zoomed in,
and it looks like this zoomed out,
the text div always wants to stay the same size.
the css is
.waitingMainDiv {
width: 70%;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
padding-top: 80px;
padding-bottom: 80px;
}
.waitingLeftDiv {
width: 100%;
height: auto;
}
.waitingLeftDivImage {
width: 100%;
height: auto;
}
.waitingRightDiv {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.waitingTextDiv {
width: 85%;
color: grey;
}
.waitingTextDiv h2 {
font-family: nunito;
font-weight: 700;
font-size: 2.3em;
margin: 4%;
}
.waitingTextDiv h3 {
font-family: nunito;
margin: 30px;
}
.waitingTextDiv p {
font-family: nunito;
margin: 30px;
font-size: 1.2em;
}
.waitingButtonDiv {
display: flex;
justify-content: flex-start;
width: 85%;
margin-left: 50px;
}
.waitingButtonDiv button {
width: 180px;
border-radius: 8px;
box-shadow: 0px 2px 5px rgb(0, 0, 0, 0.4);
font-family: nunito;
font-weight: 800;
}
.waitingEnquireButton {
border: 2px solid #43c0f6;
background-color: white;
color: #707070;
margin-right: 100px;
}
.waitingSignUpButton {
border: 2px solid #f91c85;
background-color: #f91c85;
color: white;
}
and the react.js is
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js">
import teacherPicture from "../../../../img/teacherPicture.png";
import React, { useState } from "react";
import "./Waiting.css";
import NavModal from "../../../Nav/NavModal";
export default function Waiting() {
const [open, setOpen] = useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div className="waitingMainContainer">
<div className="waitingMainDiv">
<div className="waitingLeftDiv">
<img className="waitingLeftDivImage" src={teacherPicture} alt="" />
</div>
<div className="waitingRightDiv">
<div className="waitingTextDiv">
<h2>What are you waiting for?</h2>
<h3>Start teaching Digital Technologies today.</h3>
<p>
If you need more information, we are happy to answer any questions
you may have.
</p>
</div>
<div className="waitingButtonDiv">
<button className="waitingEnquireButton">ENQUIRE NOW</button>
<button
onClick={() => handleOpen()}
className="waitingSignUpButton"
>
SIGN UP
</button>
<NavModal open={open} handleClose={handleClose} />
</div>
</div>
</div>
</div>
);
}
</script>
Thankyou to those who review my code, its definitely a simple fix but im driving myself crazy over it.
Give your main div a width, not %;
.waitingMainDiv {
width: 70vw; //changed
display: flex;
justify-content: center;
align-items: center;
margin: auto;
padding-top: 80px;
padding-bottom: 80px;
}
I have created a simple to-do app. I am creating div for every to-do being created and set min-height for the div in case if the content grows larger than div but even after setting the min-height of div content grows outside of div. Could anyone please point out what I am missing? I have attached the screenshot of the output.
App.css
body {
background-color: rgb(238, 174, 174);
}
.App {
border: 1px solid;
border-radius: 20px;
min-height: 200px;
width: 30%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
Todo.css
.Todo {
border: 1px solid black;
margin: 10px;
width: 300px;
height: 50px;
min-height: 50px;
padding-left: 9px;
padding-bottom: 9px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Todo.js
import React from 'react';
import "./Todo.css"
const Todo = ({title, description}) => {
return (
<div className="Todo">
<p>{title}</p>
</div>
)
}
export default Todo
App.js
import React, {useState} from 'react';
import Todo from './Todo';
import './App.css';
function App() {
const [todos, setTodos] = useState([]) // todos => to store the value, setTodos => to update the state
const [input, setInput] = useState("")
const handleSubmit = (e) => {
e.preventDefault();
setTodos([...todos, input])
setInput("")
}
return (
<div className="App">
<h1>To-do-app</h1>
<form>
<input type="text" onChange = {(e) => setInput(e.target.value)} value={input} />
<button type="submit" onClick={handleSubmit}>Add Todo</button>
</form>
{
todos.map(todo => {
return <Todo title={todo} />
})
}
</div>
);
}
export default App;
Try this - lose the min-height change height: auto
.Todo {
border: 1px solid black;
margin: 10px;
width: 300px;
height: auto;
padding-left: 9px;
padding-bottom: 9px;
}
You need to remove the height from Todo.css(Todo class) and just keep the min-height
.Todo {
border: 1px solid black;
margin: 10px;
width: 300px;
min-height: 50px;
padding-left: 9px;
padding-bottom: 9px;
}
Hi I'm making a project with react and I've noticed that with some buttons I make and style they sometimes get this weird looking blue border when clicking it. I tried to get rid of it by setting border:none !important or even trying override the color of it but I can't seem to get it away. I'm just using scss for styling and also have react-bootstrap installed.
this is an example of a button that has the blue border:
code of buttons
// button 1
<button type="button" className="btn employee-button" value={employee} key={employee.id} onClick={(e) => this.onEmployeeClick(employee)}>
<div className={this.state.startId === employee.id ? "selected employee-card" : "employee-card"}>
<Gravatar email={employee.email} className="employee-gravatar" />
<div>
<p className="employee-name">{employee.firstname} {employee.lastname}</p>
<p className="employee-job">{employee.jobTitle}</p>
</div>
</div>
</button>
// button 2
<button className="btn" onClick={this.openPopUp}>Create new client</button>
styling
// button 1
.employee-button {
.employee-card {
display: flex;
flex-direction: row;
background-color: $white;
width: 250px;
height: 70px;
padding: 10px;
border-radius: 10px;
margin-left: 15px;
.employee-gravatar {
border-radius: 5px;
}
div {
margin-top: 10px;
width: 80%;
margin-top: 0;
display: flex;
flex-direction: column;
font-size: 0.9em;
.employee-name{
font-weight:600;
}
.employee-job{
font-weight:500;
margin-top:-10px;
}
}
&:hover {
color:#E27D60;
box-shadow: 0px 18px 40px -12px rgba(182, 181, 181, 0.356);
}
}
}
// button 2
button {
width: 200px;
height: 50px;
color: $black;
font-size: .9em;
margin: 45px 0px;
padding: 12px;
background-color: $plain-white;
font-weight: 700;
border-radius: 5px;
&:hover {
color: #17A9A3;
}
}
I'm hoping that someone can help me with this because this is getting on my nerves
You need to set focus outline for button:
button:focus {outline:none;}
If it doesn't work use !important also.
--> button:focus {box-shadow:none !important;} this solved it
It's outline not a border, to hide it you should use :
outline:none
full example :
button {
width: 200px;
height: 50px;
color: $black;
font-size: .9em;
margin: 45px 0px;
padding: 12px;
background-color: $plain-white;
font-weight: 700;
border-radius: 5px;
outline:none;
&:hover {
color: #17A9A3;
}
&:focus{
outline:none;
}
}