I want the edges of the div c-thumbnail__container to be rounded, but it is not working at all. Is there a way to do this?
const Thumbnail = () => {
const [isShown, setIsShown] = useState((false));
return (
<>
<div className='c-thumbnail__container' onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}>
<img src={example} alt="Thumbnail" />
<Bookmark onClick={onClickBook}/>
{isShown && (
<BtnPlay />
)}
</div>
</>
)
}
.c-thumbnail__container{
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 164px;
min-height: 110px;
}
.c-thumbnail__container:hover{
cursor: pointer;
filter: brightness(.7);
}
To add a border radius, you have to add the border-radius property to the elements CSS. It looks like you have forgotten to do that.
This CSS will fix your problem:
.c-thumbnail__container{
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 164px;
min-height: 110px;
// added:
border-radius: 10px;
}
.c-thumbnail__container:hover{
cursor: pointer;
filter: brightness(.7);
}
Learn more about border-radius at https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
Related
I'm starting to play with CSS and I'm struggling to center my "tasks". To debug I used a colored border and it's centered, but the elements aren't.
.App {
display: block;
text-align: center;
align-items: center;
}
.done {
color: red;
}
.task {
text-align: center;
align-items: center;
display: flex;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Here is where the CSS is targetting:
import React, { Component } from "react";
class Task extends Component {
render() {
return (
<div className={`task ${this.getClass()}`}>
<div>{this.props.task.text}</div>
<button className="task-element" onClick={() => this.props.onDone(this.props.task.id)}>
<span className="material-symbols-outlined">check_box</span>
</button>
<button className="task-element" onClick={() => this.props.onDelete(this.props.task.id)}>
<span className="material-symbols-outlined">
delete
</span>
</button>
</div>
);
}
getClass() {
return this.props.task.isDone ? 'done' : 'notDone';
}
}
export default Task;
Here is the Output
Tryed to center elements and can't.
You need to use the justify-content property to center the elements inside the flexbox
Try this
.task {
align-items: center;
justify-content: center;
display: flex;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
You would need to justifyContent to centen, as your flex main axis is horizontal, and you want to center the element horizontally. Justify content manage content along main Axis, Here you can give a CSS a try, and let me know whether it works
.task {
text-align: center;
align-items: center;
justify-content: center; /*This will align the content to center in horizontal direction which is main axis if flex direction is row*/
display: flex;
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
If you can provide whole code in a codesandbox, I can help more on that
Following are good articles on Flex box
An Interguide to Flex box by Josh W Comeau
Css Trick article on Flex box
I want to make element to be the same size of box, but the size of label is shorter than I expected. Also, "width" is not working in the React.
How can I solve this problem?
const DragDrop = () => {
...
return (
<div className="DragDrop" style={{ height: `${30 + 5 * files.length}vh` }}>
<input
type="file"
accept="audio/flac, audio/mp3, audio/ogg, audio/wav"
id="fileUpload"
style={{ display: "none" }}
multiple={true}
onChange={onChangeFiles}
/>
<div className={isDragging ? "DragDrop-File-Dragging" : "DragDrop-File"}>
<label htmlFor="fileUpload">
<Box ref={dragRef} className={"DragDrop-FileBox"}>
<Typography variant="h5">
{isDragging
? "Drop here!"
: "Drag files"}
</Typography>
</Box>
</label>
</div>
</div>
);
};
This code shows example like this.
If I remove element, the result shows like this. (just I expected.)
And here is scss file I used.
#mixin filledStyle() {
background-color: grey;
border-radius: 10px;
color: white;
}
#mixin alignCenter() {
display: flex;
display: -webkit-flex;
flex-direction: column;
-ms-flex-direction: column;
align-items: center;
}
#mixin alignCenterVertical() {
display: flex;
display: -webkit-flex;
flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
align-items: center;
}
.DragDrop {
width: 100%;
height: 20vh;
#include alignCenter();
&-File {
width: 100%;
height: 200px;
border: 2px dashed grey;
border-radius: 10px;
#include alignCenterVertical();
cursor: pointer;
transition: 0.12s ease-in;
&-Dragging {
width: 100%;
#include filledStyle();
}
}
&-FileBox {
width: 100%;
height: 200px;
border: 2px dashed grey;
border-radius: 10px;
#include alignCenterVertical();
cursor: pointer;
transition: 0.12s ease-in;
}
}
Make forcefully take the label width 100% via width 100% in the label
.DragDrop {
width: 100%;
height: 20vh;
#include alignCenter();
label{
width:100%;
}
}
It seems <label> elements are inline, by default (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
inline elements can have neither width nor height (ignored).
Set display: inline-block to overcome this problem.
I'm trying to make a header that UX/UI has made on an inhouse project. Above the header there's a closeable bar. I want to have it sticky so that it's above the header and not on the header. I'm having trouble getting the CSS right. I can't seem to move the X mark to the right while keeping the rest of the text centered.
Here is my code (heavily modified and probably a bit to much trying to get it right.
JSX:
<>
{!bar && (
""
)}
{bar && (<div className="barClass">
<div className="pClass">
<p className="somethingP"> Something very important!</p>
<p className="readMoreLink">Read more</p>
</div>
<div className="buttonClass">
<button className="barButton" type="button" onClick={removeBar} >X </button>
</div>
</div>)}
</>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.barClass {
background-color: rgb(196,49,196);
position: sticky;
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
height: 40px;
color: white;
}
.somethingP {
margin-right: 10px;
}
.readMoreLink {
text-decoration: underline;
}
.pClass {
display: flex;
justify-content: center;
align-items: center;
}
.buttonClass {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}
.barButton {
align-self: flex-end;
background-color:rgb(196,49,196) ;
color: white;
border: none;
}
As I get it, your concern here is to position the close button to the right. One way to do it would be like that :
.barButton {
position: absolute; /* allow us to position it where we want on the bar*/
top: 50%; /* this will put the top of the close button to the center of
the bar */
right: 20px; /* Arbitrary, it's up to you*/
transform: translateY(-50%); /* trick to make the button to go up by 50% of its proper height, so it will be perfectly vertically centered*/
background-color:rgb(196,49,196) ;
color: white;
border: none;
}
Hi guys so I'm trying to create scroll to Top button in react.js and I have manage to finished the component but the problem is I can't make the icon vertically center on the circle button. How can I fix it ? I've tried to align the item to center. Is it because the Icon itself have some kind of padding on top ?
Here's my code:
return (
<button onClick={ScrollToTop} className="ButtonToTop" aria-hidden="true" style={{display: isVisible ? 'inline' : 'none'}}>
<BiArrowToTop/>
</button>
)
My css code:
.ButtonToTop{
align-items: center;
position: fixed;
width: 50px;
right: 10px;
bottom: 40px;
height: 50px;
font-size: 33px;
z-index: 1;
cursor: pointer;
background-color: #967A50;
color: #10255A;
}
Update
You are setting style={{ display: isVisible ? "inline" : "none" }}
which resets the display to inline. Just set it to flex and add the css below (updated)
style={{ display: isVisible ? "flex" : "none" }}
Use Flex to easily align it to center
.ButtonToTop{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 50px;
right: 10px;
bottom: 40px;
height: 50px;
font-size: 33px;
z-index: 1;
cursor: pointer;
background-color: #967A50;
color: #10255A;
}
[I created a card component which has wrapper div to wrap cards in it, the cards are display fine 1 in a row, however I want to display 3 in a row and unable to do it. I have tried display flex to show 1 in a row.
Cards component
import React from "react";
import "../index.css";
const Card = (props) => {
return (
<>
<div className="cards">
<div className="card">
<img src={props.imgSrc} alt="Dark" className="card-img" />
<div className="card-info">
<span className="card-category">{props.cat}</span>
<h3 className="card-title">{props.title}</h3>
<a href={props.link}>
<button>watch now</button>
</a>
</div>
</div>
</div>
</>
);
};
export { Card };
Index
import react from "react";
import ReactDOM from "react-dom";
import { Whole } from "./Whole";
import { Cards } from "./learningReact/Cards";
ReactDOM.render(
<>
<Cards />
</>,
document.getElementById("root")
);
css
cards {
display: flex;
justify-content: center;
align-content: center;
margin: 100px auto;
}
.card {
width: 250px;
height: 300px;
border: none;
background: rgb(248, 239, 248);
border-radius: 10px;
}
.card img {
width: 250px;
height: 200px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card:hover {
transform: scale(1.1);
}
you should use flex-basis:33%; for .card div tag and flex-wrap:no-wrap; & justify-content: space-between; for .cards div tag:
.cards {
display: flex;
justify-content: space-between;
align-content: center;
margin: 100px auto;
flex-wrap:nowrap;
}
.card {
flex-basis:33%;
height: 300px;
border: none;
background: rgb(248, 239, 248);
}
<style>
.card-data {
display: flex;
flex-wrap: nowrap;
background-color: #000;
}
.card-data div {
background-color: #f1f1f1;
width: 33%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
<div class="card-data">
<div>Hello..</div>
<div>Test...</div>
<div>Content..</div>
</div>
Replace the justify-content: center with justify-content: space-between inside .cards block and it will be displayed in a single row.
output here