Hello I am having trouble leaving my content at the center of this div
code :
https://codesandbox.io/s/hungry-https-c5432
I tried to put the inline display on h5 and it still didn't work
<div className="App">
<Menu
className="borderless"
style={{ width: "240px", height: "100vh" }}
vertical
>
<Menu.Item className="logo">
<Image src={logo} style={{ width: "50px", height: "50px" }} />
<h5>E M A S A</h5>
<Divider style={{ color: "#000 !important" }} />
</Menu.Item>
</Menu>
</div>
css:
.ui.menu {
border-radius: 0px !important;
border: 0px !important;
box-shadow: none !important;
background-color: #252631 !important;
}
.ui.menu .item {
padding: 8px !important;
}
r {
margin-bottom: 0 !important;
}r {
margin-bottom: 0 !important;
}
In order to align the img to center you can add
margin: 0 auto;
display: block;
and for aligning the text h5 you can add
text-align: center;
Check this link: https://codesandbox.io/embed/sweet-glitter-9toif?fontsize=14&hidenavigation=1&theme=dark
i understood you need them on the same line so add this to the css .ui.vertical.menu .item{display:flex;
justify-content:center;}
You need to update CSS, Here is the demo link
JSX Code
<Menu
className="borderless"
style={{ width: "240px", height: "100vh" }}
vertical>
<Menu.Item className="logo">
<h5>
<Image
src={logo}
style={{ width: "50px", height: "50px", marginRight: "10px" }}
/>
<span>E M A S A</span>
</h5>
<Divider style={{ color: "#000 !important" }} />
</Menu.Item>
</Menu>
CSS
.ui.menu {
border-radius: 0px !important;
border: 0px !important;
box-shadow: none !important;
background-color: #252631 !important;
}
.ui.menu .item {
padding: 8px !important;
text-align: center;
}
.ui.menu .item h5 {
text-align: center;
}
.ui.divider {
margin-bottom: 0 !important;
}
img.ui.image {
display: inline-block;
}
Related
i create a react search box with this design
using search bar css in react
but it seems like it screw up my old previous auto complete suggestion box for my search
basically the list of suggestion now is on top of my box and is fully horizontal instead
here is my simple code
css side
.suggestion{
cursor: pointer;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.suggestion:hover{
background-color: wheat;
}
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
margin: 20px auto;
/* change the margin to move where it is on the page */
}
react return
<div className="wrap">
<div className="search">
<input type="text"
onChange={e => onChangeHandler(e.target.value)}
className="searchTerm"
value={searchCardName}
onBlur={() => {
setTimeout(() => {
setSuggestions([])
}, 100)
}}
/>
{suggestions && suggestions.map((suggestions, i) =>
<div key={i} className="suggestion" onClick={() => onSuggestHandler(suggestions)}>{suggestions}</div>
)}
{
spinner ? (
<Puff className="searchButton" width="20" height="2em" fill='#ffffff' />
) : (
<button className="searchButton" onClick= {() => handleClick()}>
<FontAwesomeIcon icon={faMagnifyingGlass} />
</button>
)
}
</div>
</div>
i am not sure how to make it become dropdown at the below of my search box as well as maybe align my spinner or something from my button to other places maybe like a modal pop for spinner?
i think i solved the issue here, by just move the suggestion outside of the div with className search.
Try to place this on another div so that it would be independent
<div className="suggestionList">
{suggestions && suggestions.map((suggestions, i)...
...othercode
</div>
now, in your css file. Add styling for suggestionList
.suggestionList {
display: flex;
flex-direction: column;
#adjust the **top** value depending on your preference
#add margins or padding depending on your preference
}
I have the following .scss file:=
.singleNews {
text-decoration: none;
font-family: $font-family;
font-size: $font-size;
font-weight: $regular-font-weight;
&__image {
padding: 5em;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
&.featured {
height: 75%;
}
}
}
so how i can define the featured? i tried the following but all failed:-
import styles from './SingleNews.module.scss';
//code goes here...
<div className={styles.singleNews__image__featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image featured} style={{ backgroundImage: `url(${post.image})` }}/>
<div className={styles.singleNews__image.featured} style={{ backgroundImage: `url(${post.image})` }}/>
&.featured selects the the parent selector with the class featured, which means that the div need have the classes singleNews__image and featured
.singleNews__image.featured {
background-color: blue;
width: 100px;
height: 100px;
}
/* Same selector with Sass */
/*
.singleNews {
&__image {
&.featured {
background-color: blue;
width: 100px;
height: 100px;
}
}
}
*/
<div class="singleNews__image featured">
</div>
I need to make this:
But for now I have this:
This is actual CSS and JavaScript:
<div className="col-md-12">
<Tabs
defaultActiveKey="recents"
id="uncontrolled-tab-example"
className="mb-3 background-tabs"
>
<Tab eventKey="recents" title="Récents (7)">
<div className="col-md-12">
<ul className="list-group">
{tutorials &&
tutorials.map((tutorial, index) => (
<li
className={
"conseil-card" +
(index === currentIndex ? "active" : "")
}
onClick={() => setActiveTutorial(tutorial, index)}
key={index}
>
<IconAdd />
<IconDrag />
<p>{tutorial.isPack ? "test" : "{tutorial.message}"}</p>
<div className="conseil-card-title">
Titre : {tutorial.title}
{tutorial.isPack ? "Pack oui" : "Pack non"}
</div>
</li>
))}
</ul>
.conseil-card {
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 4px 4px 12px #00000014;
border-radius: 15px;
position: relative;
display: block;
padding: 0.5rem 1rem;
color: #212529;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.125);
text-align: left;
font: normal normal normal 16px/22px Poppins;
letter-spacing: 0px;
opacity: 1;
margin: 8px;
}
.conseil-card p {
margin-top: 10px;
margin-left: 50px;
margin-right: 50px;
}
.conseil-card svg {
float: left;
clear: both;
}
I didn't find what css property can help me, not display, not align...
And I don't know how can I display Bar with my custom size?
I am stuck with a problem, I am using argon creative Tim and ReactStrap for making this UI, It's working fine, but when am trying to view it on Mobile View it is not working as expected.
image is not responsive when i want to view on mobile view
login.jsx
Below I share my all code for making UI. let me know if you have any question.
import React, { useState } from "react";
import { useEffect } from "react";
import { NavLink } from "react-router-dom";
import { Button, Row, Col, FormGroup, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Label } from "reactstrap";
import { useHistory } from "react-router";
import "./Login.css";
const Login = ({ user }) => {
return (
<>
<div className="section section-hero section-shaped">
<div className="shape shape-style-1 shape-primary">
<span className="span-150"></span>
<span className="span-50"></span>
<span className="span-50"></span>
<span className="span-75"></span>
<span className="span-100"></span>
<span className="span-75"></span>
<span className="span-50"></span>
<span className="span-100"></span>
<span className="span-50"></span>
<span className="span-100"></span>
</div>
<div className="outer">
<div className="inner" style={{ width: "450px", height: "450px", marginBottom:"80px" }}>
<h3>{user} Log In</h3>
<br />
<Form role="form" method="POST">
<FormGroup className="mb-3">
<Label for="email">Email</Label>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-envelope"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="email"
/>
</InputGroup>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fas fa-key"></i>
</InputGroupText>
</InputGroupAddon>
<Input
type="password"
autoComplete="off"
required="required"
/>
</InputGroup>
</FormGroup>
<div className="custom-control custom-control-alternative custom-checkbox">
<input
className="custom-control-input"
id=" customCheckLogin"
type="checkbox"
/>
<label
className="custom-control-label"
htmlFor=" customCheckLogin"
>
<span>Remember me</span>
</label>
</div>
<div className="text-center">
<Button
className="my-4"
color="primary"
type="button"
onClick={login}
>
Sign in
</Button>
</div>
</Form>
<Row className="mt-3">
<Col xs="6">
<a
className="text-light"
href="#"
onClick={e => e.preventDefault()}
>
<small>Forgot password?</small>
</a>
</Col>
{bool ? <Col className="text-right" xs="6">
<NavLink exact to='./signup' className="text-light">Create new account</NavLink>
</Col>
: <Col className="text-right" xs="6">
<NavLink exact to='./vendorsignup' className="text-light">Create new account</NavLink>
</Col>}
</Row>
</div>
</div>
</div>
</>
)
}
export default Login;
Login.css
.outer {
height: 100vh;
background-position: fixed;
overflow: scroll;
overflow: hidden;
}
.form-group label {
display: block;
margin: 0 0 10px;
color: black;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.2em;
}
.form-group input {
outline: none;
display: block;
background: rgba(0, 0, 0, 0.1);
width: 100%;
border: 0;
border-radius: 4px;
box-sizing: border-box;
padding: 12px 20px;
color: rgba(0, 0, 0, 1.6);
font-family: inherit;
font-size: 17px;
font-weight: 500;
line-height: inherit;
transition: 0.3s ease;
}
.signinp {
padding-left: 10px !important;
}
.whiteinput {
background-color: white !important;
}
/* .form-group input:focus {
background-color: transparent;
}
.form-group input:focus {
border: 1px solid black;
} */
.outer {
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
}
.inner {
width: 450px;
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgb(34 35 58 / 20%);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all 0.3s;
}
.outer .form-control:focus {
border-color: #167bff;
box-shadow: none;
}
.outer h3 {
text-align: center;
margin: 0;
line-height: 1;
padding-bottom: 20px;
}
.custom-control-label {
font-weight: 400;
}
.forgot-password,
.forgot-password a {
text-align: right;
font-size: 13px;
padding-top: 10px;
color: #7f7d7d;
margin: 0;
}
.forgot-password a {
color: #167bff;
}
In your case you aren't using any code to have responsiveness in your App.
You can use the #media rule. Also good practice is to use CSS Grid system.
There are also CSS Frameworks like Bootstrap which have their implementation of responsive grid system which is very easy to use.
Its not related to Reactjs, you will have to modify your css code, for that you can use CSS media queries to target the screen/mobile sizes as per your need.
Example :
/* For screen size more than 400px */
#media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
/* For screen size less than 600px */
#media screen and (max-width: 600px) {
body {
background-color: lavender;
}
}
Reference : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can also try bootstrap, foundation, materialize css libraries which has ready made classes for responsive screen sizes.
https://www.w3schools.com/bootstrap/bootstrap_grid_stacked_to_horizontal.asp
You have to make changes to CSS so that the DOM elements rendered on screen look good on different screen sizes
Some things which you can explore are
Media queries
Material UI Grid
Bootstrap's breakpoints
I think the single most important thing you can do if you want to start working with "intuitive" responsive design is to update your box-model to use the border-box.
Box Sizing CSS-Tricks
Add the following to your CSS
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
This will size your containers to match what you specify in CSS, with the padding on the inside and the margins outside. I am still amazed this isn't the default. All projects should implement this fix/change.
To specifically address the responsive issue with the login modal, set the max-width to a static value, i.e. the 450px and set the width to a relative value, i.e. 90%.
.inner {
max-width: 550px; // <-- static max value
width: 90%; // <-- dynamic relative value
margin: auto;
background: #ffffff;
box-shadow: 0px 14px 80px rgb(34 35 58 / 20%);
padding: 40px 55px 45px 55px;
border-radius: 15px;
transition: all 0.3s;
}
Play around and resize the view window, and then test out toggling the responsive view in the preview window.
I need to darken the background of an image but not its contents inside like the below picture. The image is being painted programatically so I cannot have its url in the css.
Below how it should look like:
And now how it´s looking for me, I need the characters much whiter:
I´ve looked at different answers using ::before or ::after but given my image is being rendered inline it does not work. Below my code.
REACT.TSX
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
</div>
</div>
</Link>
))}
CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(0.8);
}
.apartmentText {
color: white;
font-weight: bold;
}
Any idea on what to do?
Thanks a lot!
Try the following:
{apartments.map(({ name, images, taskStatus }: any, index: number) => (
<Link key={index} to={`/apartments/${index}`}>
<div
className="apartmentImage"
style={{
backgroundImage: `url(${API_IMAGE}${images[0]})`,
}}
>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h5 className="apartmentText">{name}</h5>
</div>
<div
className="center ion-margin-top"
style={{ width: "100%" }}
>
<h6 className="subApartmentText">MALAGA</h6>
<div className='color-overlay'/>
</div>
</div>
</Link>
))}
And CSS:
.apartmentImage {
width: 98%;
margin-left: 1%;
height: 24.7vh;
border-radius: 10px;
margin-top: 3%;
margin-bottom: -1%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.apartmentText {
color: white;
font-weight: bold;
}
.apartmentText, .subApartmentText {
position: relative;
z-index: 1;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.3);
pointer-events: none;
}
I tried it and it worked for me, but locally I made some changes, so I can load an image. Please let me know if something is not working, so I can double check if I copied all the code correctly.
have you tried this with css?
background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),