I have an input field that has a search icon positioned inside of it using the background property and every time I type in it the cursor sticks in the beginning like shown in the picture:
https://imgur.com/ocJRux8
How can I position the cursor after the search icon? I tried setting the padding-left and the text-indent but that also moves the placeholder which is not desirable.
Here is my input field:
import React, { Component } from "react";
import Spinner from '../../components/Spinner/Spinner.jsx';
import { Link } from 'react-router-dom';
import axios from "axios";
class Search extends Component {
state = {
searchResults: [],
isLoading: false
}
getSearchQuery = (event) => {
const SEARCH_RESULTS_ENDPOINT = process.env.REACT_APP_SEARCH_ENDPOINT;
const queryString = document.querySelector(
".search-input"
).value;
if (event.keyCode === 13) {
this.setState({ ...this.state, isLoading: true });
axios.post(SEARCH_RESULTS_ENDPOINT, {
queryString: queryString,
}).then(response => {
this.setState({ ...this.state, searchResults: response.data });
this.setState({ ...this.state, isLoading: false });
});
}
};
render() {
if (this.state.isLoading) {
return <Spinner />
}
return (
<div>
<input
type="text"
placeholder="Search"
className="search-input"
onKeyDown={(e) => this.getSearchQuery(e)}
/>
<div>
{this.state.searchResults.map(result => (
<div key={result._id} >
<img src={result.picture} alt="avatar" />
<div >
<div>
<h2>{result.title}</h2>
<p>{result.date}</p>
<p>{result.postContent}</p>
<Link to={`/post/${result._id}`} className="read-more-btn">
<button className="read-more-btn">Read more</button>
</Link>
</div>
</div>
</div>
))}
</div>
</div>
);
}
}
export default Search;
and here is my CSS:
.search-input {
background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
background-size: 20px 20px;
margin: auto;
display: block;
width: 500px;
margin-top: 30px;
height: 40px;
border: solid 1px #AAAAAA;
// text-indent: 30px;
}
.search-icon {
height: 20px;
width: 20px;
}
.no-results-found {
text-align: center;
margin-top: 50px;
}
.search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
padding-left:35px;
}
input:focus{
outline: none;
}
::-moz-placeholder { /* Firefox 19+ */
padding-left:20px;
}
:-ms-input-placeholder { /* IE 10+ */
padding-left:20px;
}
:-moz-placeholder { /* Firefox 18- */
padding-left:20px;
}
Add some padding to search input as it will pad that much area.
.search-input {
background: url(../../assets/images/search-icon.png) no-repeat scroll 12px 12px;
background-size: 20px 20px;
margin: auto;
display: block;
width: 500px;
margin-top: 30px;
height: 40px;
border: solid 1px #AAAAAA;
padding-left: 20px;
}
Here's how I would do it.
Example with 2 variants
const { useState, useEffect } = React;
const App = () => {
return <div>
<div className="container">
<span className="icon">
<i className="fas fa-search"></i>
</span>
<input className="input" type="Text" placeholder="Search"/>
</div>
<div className="container1">
<span className="icon1">
<i className="fas fa-search"></i>
</span>
<input className="input1" type="Text" placeholder="Search"/>
</div>
</div>
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
.container {
border: 1px solid black;
width: 300px;
}
.input {
padding: .5rem .5rem .5rem 2rem;
border: none;
}
.input:focus {
outline: none;
}
.icon {
position: absolute;
margin-top: .5rem;
margin-left: .5rem;
}
.container1 {
margin-top: 1rem;
border: 1px solid black;
width: 300px;
display: flex;
}
.icon1 {
padding: .5rem 0 .5rem .5rem;
}
.input1 {
flex: 1 1 auto;
padding: .5rem;
border: none;
}
.input1:focus {
outline: none;
}
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script>
<div id="root"></div>
Related
I have a React project that has a modal component in it. There is a button to open the modal which works fine but the other button which is meant to close the modal does not work. I tried to remove the onClick function but that did not make any difference. Below is the code:
import React, { useState, useContext, useEffect, Fragment } from "react";
import ContactContext from "../../context/contact/contactContext";
// CrUd - Create and Update contact
const ContactForm = () => {
const contactContext = useContext(ContactContext);
const { createContact, clearCurrentContact, updateContact, current } =
contactContext;
// add contact details of current contact if edit button is clicked
useEffect(() => {
current
? setContact(current)
: setContact({
name: "",
email: "",
phone: "",
type: "personal",
});
}, [contactContext, current]);
// default values of the contact form
const [contact, setContact] = useState({
name: "",
email: "",
phone: "",
type: "personal",
});
const { name, email, phone, type } = contact;
// add values to temporary object
const onChange = change =>
setContact({ ...contact, [change.target.name]: change.target.value });
// if submit button is clicked
const onSubmit = submit => {
submit.preventDefault();
// choose weather to create or update a contact
!current ? createContact(contact) : updateContact(contact);
// revert form to default values
clearContactForm();
};
// if clear button is clicked
const clearContactForm = () => {
if (current) clearCurrentContact();
};
return (
<Fragment>
<a href="#contact-form">
<button className="create-contact-button">+</button>
</a>
<form className="contact-form" id="contact-form" onSubmit={onSubmit}>
<h2>{current ? "Update contact" : "Create contact"}</h2>
{/* input fields */}
<input
className="input-field"
type="text"
name="name"
value={name}
onChange={onChange}
placeholder="Name"
required
/>
<input
className="input-field"
type="email"
name="email"
value={email}
onChange={onChange}
placeholder="Email"
/>
<input
className="input-field"
minLength="8"
maxLength="8"
type="phone"
name="phone"
value={phone}
onChange={onChange}
placeholder="Phone"
/>
{/* personal or professional check box */}
<div>
<h3>Contact type</h3>
<input
type="radio"
name="type"
value="personal"
checked={type === "personal"}
onChange={onChange}
/>
Personal
<input
type="radio"
name="type"
value="professional"
checked={type === "professional"}
onChange={onChange}
/>
Professional
</div>
{/* submit and clear button */}
<div>
<a href="#!">
<input
className="button button-submit"
type="submit"
value={current ? "Update contact" : "Create contact"}
/>
</a>
</div>
<div>
<a href="#!">
<button
className="button button-form-clear"
onClick={clearContactForm}
>
Cancel
</button>
</a>
</div>
</form>
</Fragment>
);
};
export default ContactForm;
:root {
--main-color: #00308f;
--secondary-color: #7cb9e8;
--dark-color: #444;
--light-color: #fafafa;
}
body {
font-family: Montserrat,sans-serif;
background-color: var(--light-color);
color: var(--dark-color);
text-align: justify;
margin: 70px 0 0;
padding: 1em;
}
h2,
h3 {
color: var(--main-color);
}
.button {
margin: 0 0.5em;
border-radius: 0.5em;
padding: 0.5em 1.25em;
font-weight: 700;
min-width: 80px;
}
.create-contact-button {
position: fixed;
bottom: 0.75em;
right: 0.75em;
display: grid;
align-items: center;
border: 0.1em solid var(--light-color);
border-radius: 50%;
padding: 0.5em 0.75em;
background-color: var(--main-color);
color: var(--light-color);
opacity: 90%;
z-index: 2;
font-weight: 700;
font-size: 3em;
box-shadow: 1px 1px 0.1em var(--dark-color);
}
.create-contact-button:hover {
background-color: var(--light-color);
color: var(--main-color);
border: 0.1em solid var(--main-color);
box-shadow: 1px 1px 0.5em var(--dark-color);
transition-duration: 0.4s;
}
.contact-form {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: grid;
align-self: center;
width: 350px;
z-index: 1;
background-color: var(--secondary-color);
border: 2px solid var(--main-color);
border-radius: 1em;
padding: 1em;
visibility: hidden;
}
.contact-form:target {
visibility: visible;
}
.button-submit {
margin: 1.25em 0 0;
padding: 0.6em 1.25em;
width: 100%;
background-image: linear-gradient(-45deg,var(--main-color),var(--secondary-color),var(--secondary-color),var(--secondary-color),var(--main-color));
border: solid 1.5px var(--main-color);
color: var(--main-color);
}
.button-submit:hover {
background-image: linear-gradient(-45deg,var(--secondary-color),var(--main-color),var(--main-color),var(--main-color),var(--secondary-color));
border: solid 1.5px var(--secondary-color);
color: var(--light-color);
transition-duration: 0.4s;
}
.button-form-clear {
background-color: #d3d3d3;
border: solid 1.5px #a9a9a9;
color: var(--dark-color);
margin: 1.25em 0;
padding: 0.6em 1.25em;
width: 100%;
border: solid 1.5px var(--main-color);
}
.button-form-clear:hover {
background-color: #a9a9a9;
border: solid 1.5px #d3d3d3;
color: var(--light-color);
transition-duration: 0.4s;
}
.input-field {
margin: 0.5em 0;
border: solid 1px var(--secondary-color);
border-radius: 0.5em;
padding: 0 1em;
height: 40px;
box-sizing: border-box;
}
#media screen and (max-width:614px) {
body {
margin-top: 130px;
}
}
<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>
Why isn't the modal closing?
The element button, input must not appear as a descendant of the a element, check here https://validator.w3.org/. You must remove button, input from a, in this case click on a not work.
Demo https://codesandbox.io/s/elegant-kalam-h3idc, all code where ContactContext is used, commented out. Also used useRef on form, to do submitting throught dispatchEvent
when user clicks on any card which contains the data (the data is getting from backend api GET method)that data should bind-up or displays on a pop-card ,How to do this thing .in my case i have two components one is DisplayNotes.vue and another one is UpdateNotes.vue .when ever user clicks on any displayed cards that data is bind to the updateNotes card(popup) .How to pass that data to the pop-up card ,please help me to fix this issue.
[DisplayNotes.vue]
<template>
<div class="carddisplay-section" >
<div v-for="note in notes" :key="note.data" id="blur" class="container note">
<div #click="toggle()" class="card-content">
<h5>{{note.title}}</h5>
<p>{{note.body}}</p>
</div>
<div class="import-icons">
<icons class="imported-icons note-icons" />
<button v-if="flag" class="card-button" type="button" #click="handlesubmit();Togglebtn();">Close</button>
</div>
</div>
<div id="popup">
<UpdateNotes/>
</div>
</div>
</template>
<script>
import service from '../service/User'
import icons from './icons'
import UpdateNotes from './UpdateNotes.vue'
export default {
name: 'DisplayNotes',
components: {
icons,UpdateNotes
},
data() {
return {
flag: true,
notes: [{
id: 1,
title: 'Fundoo',
body: 'unlimited notes..'
}, ],
}
},
methods: {
Togglebtn() {
this.flag = !this.flag;
},
async handlesubmit() {
service.userDisplayNotes().then(response => {
this.notes.push(...response.data);
})
},
toggle(){
var blur=document.getElementById('blur');
blur.classList.toggle('active');
var popup=document.getElementById('popup');
popup.classList.toggle('active');
}
}
}
</script>
<style lang="scss">
.carddisplay-section{
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-around;
gap: 10px;
}
.container {
height: 180px;
background: #fff;
padding: 7px;
border-radius: 7px;
box-shadow: 5px 5px 10px #e0dede;
margin-top: 5%;
margin-left: 18%;
margin-right: -15%;
float: left;
width: 22%;
}
.card-content {
h5 {
font-size: 20px;
font-weight: 400;
font-family: 'Times New Roman', Times, serif;
padding-left: 10px;
}
p {
font-size: 18px;
width: 90%;
height: 60px;
font-family: 'Times New Roman', Times, serif;
width: 100%;
border: none;
padding: 7.5px 10px;
outline: none;
}
}
.card-button {
float: right;
margin-top: -1px;
margin-left: 240px;
font-size: 14px;
border: none;
background: none;
font-family: 'Times New Roman', Times, serif;
}
.note-icons {
visibility: hidden;
}
.note {
&:hover {
.note-icons {
visibility: visible;
}
}
}
.imported-icons {
margin-top: 10%;
}
#blur.active{
filter:blur(0.5px);
// pointer-events: none;
// user-select: none;
}
#popup{
position: fixed;
top:40%;
left:50%;
transform: translate(-50%,-50%);
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
visibility: visible;
opacity: 1;
transition: 0.5s;
}
.card-content p,h5 {
word-break: break-word;
overflow-wrap: break-word;
}
</style>
This is my updateNotes.vue(popup card)
[UpdateNotes.vue]
<template>
<div class="update" >
<form class="update-note" #submit.prevent="handlesubmit" autocomplete="off">
<input name="title" v-model="title" placeholder="Title" />
<textarea name="content" v-model="body" style="resize: none" placeholder="Take a note..." rows="3"></textarea>
<div class="btm-icons">
<icons />
<button id="btn-section" type="submit" >Close</button>
</div>
</form>
</div>
</template>
<script>
import icons from './icons.vue'
export default{
components:{icons},
methods:{
flip() {
this.flag = !this.flag;
},
}
}
</script>
<style scoped>
.update {
padding-top: 0%;
}
.update-note {
position: relative;
width: 550px;
max-width: 100%;
margin: 152px auto;
margin-right: 80%;
background: rgb(255, 255, 255);
padding: 15px;
border-radius: 5px;
box-shadow: 0 1px 5px #ccc;
}
.update-note input {
width: 100%;
max-width: 100%;
border: none;
padding: 4px;
outline: none;
font-size: 1.2em;
}
textarea {
width: 100%;
max-width: 100%;
border: none;
padding: 4px;
outline: none;
font-size: 1.2em;
}
button {
border: none;
background: transparent;
font-weight: 500;
float: right;
margin-top: -5%;
cursor: pointer;
}
</style>
You simply bind the data to want to send to the child component as a prop. In your case you put in on the component like this:
<UpdateNotes :body="note.body"></UpdateNotes>
Then, you would have to define the prop in the other component unless you want to get it from $refs:
<script>
export default{
props: {
body: String
}
}
</script>
Note that it is not recommended to alter props, so you might want to duplicate the body prop in your data() section. Then, you could bind that new (now local) data property to the textarea. In the beforeDestroy hook of your component, you then can call a method that compares the local property to the prop and use this.$emit to inform the parent component of any changes.
I have this part of component:
<div id="container">
<span id="magnify">🔍</span>
<input id="search" />
<span id="user">👤</span>
<span
#click="dialog = true"
id="buttonMenuHamburger">Ⓜ️</span>
</div>
<transition name="fade">
<div
id="menuOverlay"
v-if="dialog"
>
<div
class="fondOverlay"
#click="dialog = false">
</div>
<ul class="contenuMenuOverlay">
<li>
<router-link to="/home">
➕ Home
</router-link>
</li>
</ul>
</div>
</transition>
<script>
import {
ref,
} from 'vue';
import { useRouter } from 'vue-router';
export default {
name: 'SearchBar',
setup() {
const router = useRouter();
const dialog = ref(false);
router.beforeEach((to, from, next) => {
dialog.value = false;
next();
});
return {
dialog,
};
},
};
</script>
<style scoped>
a {
color: black;
}
#menuOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#menuOverlay .fondOverlay {
background-color: rgba(10, 10, 10, 0.5);
height: 100%;
width: 100%;
position: absolute;
z-index: 99;
}
#menuOverlay .contenuMenuOverlay {
padding: 20px;
margin: 20px;
border: 2px solid white;
text-align: left;
font-size: 2em;
font-variant: small-caps;
border: 2px solid white;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.5);
z-index: 100;
}
ul {
list-style-type: none;
font-family: "Champagne & Limousines";
font-variant: small-caps;
}
#container {
margin-bottom: 10px;
}
#container span {
padding-top: 7px;
cursor: pointer;
position: absolute;
}
#magnify {
padding-left: 5px;
min-width: 30px;
}
#user {
margin-left: -60px;
}
#buttonMenuHamburger {
margin-left: -30px;
}
#search {
background: transparent;
text-align: center;
color: white;
font-weight: bold;
font-size: 24px;
padding: 0 80px;
height: 30px;
width: 25%;
border: 2px solid white;
border-radius: 30px;
font-family: 'Caviar Dream';
transition: width 0.2s;
outline: none;
}
#search:focus {
width: 50%;
}
#search:before { content: 'Some'; }
</style>
When I click on the Ⓜ️, the dialog value changes correctly. But if I have the focus on the input, when I click on Ⓜ️ it just loses the focus on the input. I have to click again on the Ⓜ️ to get the dialog value set to true.
Is there something I'm missing?
Thanks in advance.
EDIT: it seems to come from the width change...
I might be misunderstanding your problem but I can't replicate the issue.
const { watchEffect, ref, onMounted, nextTick } = Vue;
Vue.createApp({
setup() {
const dialog = ref(false);
const input = ref(null);
// log when `dialog` is changed
watchEffect(() => console.log(dialog.value));
// focus on `input` from the beginning
onMounted(() => nextTick(() => input.value.focus()));
return { dialog, input };
},
}).mount('#app');
<script src="https://unpkg.com/vue#3.0.7/dist/vue.global.js"></script>
<div id="app">
<span id="magnify">🔍</span>
<input id="search" ref="input" />
<span id="user">👤</span>
<transition name="fade">
<span
#click="dialog = true"
id="buttonMenuHamburger">Ⓜ️</span>
</transition>
</div>
Navbar Component
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { logout } from '../../redux/actions/auth';
import './Navbar.styles.css';
import ham from './assets/ham.svg';
import exit from './assets/exit.svg';
export const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const authLinks = (
<div className='buttons'>
<Link to='/'>
<button onClick={logout} className='button'>
Logout
</button>
</Link>
</div>
);
const guestLinks = (
<div className='buttons'>
<Link to='/register'>
<button className='button'>Register</button>
</Link>
<Link to='login'>
<button className='button'>Login</button>
</Link>
</div>
);
console.log(isMenuOpen);
return (
<div className='container'>
<header>
<h2>
<Link to='/' className='logo' alt='Escapebe logo'>
<i className='fas fa-microphone'></i> Escapebe
</Link>
</h2>
<nav>
<Link to='#' className='hide-desktop'>
<img
src={ham}
alt='toggle menu'
className='menu'
onClick={() => setIsMenuOpen({ isMenuOpen: !isMenuOpen })}
/>
</Link>
<ul
className={
isMenuOpen
? 'hide-desktop show-mobile'
: 'show-desktop hide-mobile'
}
>
<li className='exit-btn hide-desktop'>
<img
src={exit}
onClick={() =>
setIsMenuOpen({
isMenuOpen: !isMenuOpen
})
}
/>
</li>
<li>
<Link to='/'>News</Link>
</li>
<li>
<Link to='/'>Groups</Link>
</li>
<li>
<Link to='/'>About</Link>
</li>
<li>
<Link to='/'>FAQ</Link>
</li>
{!loading && (
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
)}
</ul>
</nav>
</header>
</div>
);
};
Navbar.propTypes = {
logout: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps, { logout })(Navbar);
HeroSection.styles.css
.container {
text-align: center;
padding: 0.8em 1.2em;
color: #d1d0d0;
}
.button {
background-color: #4caf50;
border: none;
width: calc(100% - 1em);
display: block;
color: #d1d0d0;
border-radius: 20px;
padding: 0.5em;
text-decoration: none;
font-size: 1em;
margin: 3% auto 7%;
position: relative;
z-index: 4;
cursor: pointer;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.button:hover {
background-color: green;
color: white;
}
.triangle {
margin: 2em auto 2em 45%;
width: 70%;
}
h1,
.subhead {
position: relative;
z-index: 3;
}
.subhead {
font-size: 1.1em;
}
#media only screen and (min-width: 650px) {
.triangle {
width: 50%;
}
.button {
width: 35%;
}
h1 {
font-size: 2em;
margin: 0;
}
.subhead {
font-size: 1.4em;
margin-bottom: 12%;
}
}
#media only screen and (min-width: 1000px) {
.button {
width: 35%;
}
.container {
width: 80%;
margin: 0 auto 13% auto;
}
.hide-desktop {
display: none;
}
.show-desktop {
display: block;
margin: 0 auto 13% auto;
}
nav ul {
position: inherit;
width: auto;
background: none;
height: auto;
display: flex;
padding-top: 0;
}
nav ul li {
float: left;
}
nav ul li a {
color: black;
background-color: inherit;
text-align: right;
padding: 1em 2em;
}
nav ul li a:hover {
background-color: inherit;
}
}
#media only screen and (min-width: 1200px) {
.container {
width: 70%;
}
}
Navbar.styles.css
.container {
text-align: center;
padding: 0.8em 1.2em;
list-style-type: none;
}
.logo {
width: 130px;
}
header {
display: flex;
justify-content: space-between;
}
.hide-mobile {
display: none;
}
.show-mobile {
display: initial;
}
.menu {
width: 25px;
margin-top: 115%;
}
nav ul {
position: fixed;
width: 60%;
top: 0;
right: 0;
text-align: left;
background: rgb(36, 41, 44);
height: 100%;
z-index: 7;
padding-top: 3em;
}
nav ul li a {
color: white;
text-decoration: none;
display: block;
width: 100%;
padding: 1em 2em;
background-color: rgb(52, 59, 63);
}
nav ul li a:hover {
background-color: rgb(65, 73, 78);
}
.exit-btn {
margin-bottom: 1em;
margin-top: -1.3em;
text-align: right;
padding: 0 1.4em;
}
.exit-btn img {
width: 15px;
cursor: pointer;
}
#media only screen and(min-width: 650px) {
.triangle {
width: 50%;
}
}
My hamburger menu isn't working. It works on the initial click but won't close afterwards. If I switch them around, then I can close the menu but not open it. I'm almost 100% sure that it doesn't have to do with the state. I think it may have something to do with my styling. Any ideas?
setIsMenuOpen({ isMenuOpen: !isMenuOpen })
This is wrong, It should be
setIsMenuOpen(!isMenuOpen)
I think this should fix.
I am carrying out a project in react for a web page. I am performing as a category bar where in the mobile version I should leave the screen but I want only the component to slide just and not the whole page.
Here is the design of how it should look
But currently it looks this way
Here is how it looks today
On the other hand, when you select something from this category, it is placed on the left side and removed from the category list, which would be that it is selected
Like this
The code of this component is here:
import './styles/Category.css'
import { cate } from '../assets/category_list.json'
class Category extends Component {
constructor(){
super();
this.state = {
cate,
selectItem: undefined,
opcion: 0
};
this.handaleSelect = this.handaleSelect.bind(this);
}
handaleSelect = (e,index) => {
this.setState({
selectItem: index,
opcion: 1
})
// console.log(index)
// console.log(this.state.selectItem)
}
handaleUnSelect = (e) => {
this.setState({
selectItem: undefined,
opcion: 0
})
}
selected() {
const select_pers = this.state.cate.filter(cate => {return cate.number === this.state.selectItem})
if (this.state.opcion === 1) {
return (<div className="box1 justify-content-center">
<div>
<img className="picture rounded-circle red-shadow" alt={select_pers.alt}src={require("../assets/img/"+select_pers[0].path_image)}></img>
</div>
<div className="text-box red-box" onClick={(e) => this.handaleUnSelect(e)}>
<p>{select_pers[0].title}</p>
</div>
</div> )
}
}
render(){
var catego = undefined;
var size = {
width: '808px',
};
if(this.state.opcion !== 0){
catego = this.state.cate.filter((cate) => {
return cate.number !== this.state.selectItem
});
size = {
width: '748px',
left: '31%',
};
}else{
catego = this.state.cate;
}
return (
<div className="d-flex justify-content-center ">
{ this.selected()}
<div className="Category" style={size}>
<div className="container boxe">
<div className="row">
{ catego.map(e =>
<div className="col" key={e.number}>
<div>
<img className="picture rounded-circle" alt={e.alt} src={require("../assets/img/"+e.path_image)}></img>
</div>
<div className="text-box" onClick={(x) => this.handaleSelect(x,e.number)}>
<p>{e.title}</p>
</div>
</div>
)}
</div>
</div>
</div>
</div>
);
}
}
export default Category;```
And the css file
.Category {
/* position: absolute; */
width: 858px;
height: 171px;
background: #ECF0F6;
border-radius: 200px;
/* left: 28%; */
margin-top: 5px;
}
.boxe {
/* background-color: green; */
text-align: center;
width: 95%;
height: 80%;
margin: 20px 20px 20px 20px;
/* padding-top: 18px; */
}
.box1{
/* position: absolute; */
/* background-color: yellow; */
/* left: 22%; */
margin-top: 28px;
text-align: center;
width: 130px;
float: left;
}
.justify-content-center{
padding-right: 10px;
}
.picture{
width: 80px;
height: 80px;
opacity: 0.8;
}
.text-box{
background: #FFFFFF;
height: 48px;
border: 1px solid #ECF0F6;
/* box-sizing: border-box; */
box-shadow: 0px 7px 64px rgba(0, 0, 0, 0.07);
border-radius: 800px;
margin-top: 6px;
/* width: 105px; */
cursor: pointer;
}
.text-box p{
font-family: Quicksand;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
color: #78869A;
padding-top: 12px;
cursor: pointer;
height: 48px;
}
.text-box p:hover{
color: #FF8B85;
}
.red-box{
background: #FF8B85;
}
.red-box p:hover{
color: gainsboro;
}
.red-box p{
color: white;
}
.red-shadow{
box-shadow: 0px 2px 10px #FF7575;
}
A working code snippet would be even more helpful.
Probably you could apply "display: flexbox" to the following element, instead of "float: left" to its children.
<div className="d-flex justify-content-center ">
Then you can play around with "flex-wrap" and "overflow" to achieve your design.