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.
Related
I am trying to load a dynamic login page with React Modal. Is there a way to make React Modal resize to the size of its child elements?
//App.js
import "./styles/app.scss";
import Layout from './options/Layout'
import Login from './Components/Login'
import { useState } from "react";
import Modal from 'react-modal'
function App() {
const [OpenModal, setOpenModal] = useState(false)
return (
<div id="app" className="App">
<Layout>
<button onClick = {() => setOpenModal(true)}>open modal</button>
<Modal isOpen = {OpenModal}>
<Login/>
</Modal>
</Layout>
</div>
);
}
export default App;
//login.scss
.login {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 280px;
margin: 0 auto;
background-color: #5c8fc2;
border-radius: 30px;
}
.login_top {
display: flex;
align-items: center;
justify-content: center;
margin-top: -40px;
margin-bottom: 20px;
color: whitesmoke;
}
.login_register_container {
border: none;
outline: none;
border-radius: 50%;
}
button {
margin-right: 12px;
margin-top: 30px;
border: none;
border-radius: 4px;
cursor: pointer;
}
I want to dynamically manage the size according to the child element.
I've tried several methods, but without success. How to fit modal's component to child element???
If you use the developer tools you can see that the content grows because they have applied some styles to the modal.
position: absolute;
inset:40
inset is same as
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
If you want your content to be exactly the same size as your content, you can remove the right and bottom from the styles.
<ReactModal
isOpen={true}
contentLabel="Minimal Modal Example"
className="Modal"
>
<div>
<div style={{ height: '500px' }}>Some content</div>
</div>
<button onClick={() => {}}>Close Modal</button>
</ReactModal>
CSS:
.Modal {
position: absolute;
top: 40px;
left: 40px;
background-color: papayawhip;
}
You will lose equal spacing on all sides of the modal if you do this though.
Here is an example. https://stackblitz.com/edit/react-vxe3cn
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>
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;
}
I'm creating a resume website. I'm adding content to the Job.js component, and I'm encountering an issue with logo. The height seems to expand when the desc exceeds the height of the component. If the desc is short, I do not have this issue. I'm also not having this problem when flex-direction is column.
I tried adjusting padding-bottom of .job-container img, but while the image returned to normal, there was unwanted padding at the bottom.
Relevant Code
Job.js
import React from 'react';
import '../css/Job.css';
function Job(props) {
console.log(props.name);
const jobList = props.job.map(j =>
<div className='job-container'>
<img src={j.logo} alt={j.alt} />
<div className='description'>
<div>
<a href={j.link} rel='noopener noreferrer' target='_blank'>
{j.companyName}
</a>
</div>
<div>{j.title}</div>
<div>{j.duration}</div>
<div>{j.location}</div>
<div>{j.desc.map(paragraph => <p>{paragraph}</p>)}</div>
</div>
</div>
)
return (
<div>{jobList}</div>
);
}
export default Job;
Job.css
:root {
--image-spacing: 30px;
}
.job-container {
border: 2px solid red;
padding: 0px 5%;
display: flex;
flex-direction: row;
}
.job-container img {
border: 2px solid red;
border-radius: 3px;
display: block;
height: auto;
width: 35%;
}
.job-container .description {
line-height: 1.45;
padding-left: var(--image-spacing); /* Change this. */
}
.job-container a {
color: black;
text-decoration: none;
}
/* Responsive Mode */
#media only screen and (max-width: 768px) {
.job-container {
/* Line up description and image. */
flex-direction: column;
}
.job-container img {
border-radius: 3px;
margin: auto;
width: 75%;
}
.job-container .description {
padding-left: 0px;
padding-top: var(--image-spacing);
}
}
.content {
display: block;
}
I solved this problem by adding align-self: start; to .job-container img.
Hello i'm trying to do like an arrow from a question balloon:
code:
<Styled.MessageWrapper user={message.user}>
<Styled.BotImg src={BotLogo} user={message.user} />
<Styled.ChatMessage user={message.user}>
{message.text}
</Styled.ChatMessage>
</Styled.MessageWrapper>
css:
const MessageWrapper = styled.div`
display: flex;
align-items: center;
justify-content: ${props => (props.user ? 'flex-end' : 'flex-start')};
`;
const BotImg = styled.img`
display: ${props => (props.user ? 'none' : 'block')};
padding-left: 10px;
width: 40px;
`;
const ChatMessage = styled.div`
margin: 1ex;
padding: 1ex;
border-radius: 2px;
${props => (props.user ? messageClient : messageBot)}
`;
now i have this:
i trying make this but not sucess:
Unfortunately, I don't know anything about styled components. However, this solution with just HTML and CSS might help demonstrate how to leverage the technique already recommended by #BugsArePeopleToo.
.messages {
max-width: 400px;
margin: 0 auto;
}
.message {
margin: 0.5em;
}
.message.tx {
text-align: right;
}
.message .bubble {
position: relative;
display: inline-block;
vertical-align: top;
background: #0D47A1;
color: #fff;
padding: 0.5em 1em;
border-radius: 0.5em;
}
.message.rx .bubble {
background: #CFD8DC;
color: #212121;
}
.message .icon {
display: inline-block;
width: 2em;
height: 2em;
margin-right: 0.5em;
border-radius: 1em;
background: #CFD8DC;
}
.bubble.l-caret::before,
.bubble.r-caret::before {
position: absolute;
display: block;
content: '';
top: 0;
width: 0;
height: 0;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 0.5em solid #0D47A1;
}
.message.rx .bubble.l-caret::before,
.message.rx .bubble.r-caret::before {
border-top: 0.5em solid #CFD8DC;
}
.bubble.l-caret::before {
left: -0.5em;
}
.bubble.r-caret::before {
right: -0.5em;
}
<div class="messages">
<div class="message rx">
<span class="icon"> </span>
<span class="bubble l-caret">
test 123 hello world <br>
multiline
</span>
</div>
<div class="message tx">
<span class="bubble r-caret">
ohai
</span>
</div>
</div>
You need a pseudo element on your ChatMessage component.
The syntax for styled components is:
const ChatMessage = styled.div`
position: relative;
&:before {
position: absolute;
/* additional pseudo element styles here */
}
`;
As for the styles of the arrow, you need relative/absolute positioning, and use the transparent border trick to get a triangle. Here is anther question on SO that explains this technique very well, just adjust the positioning, dimensions, color, border, etc to your liking: Speech bubble with arrow