I Was trying to create a login form. But while focusing the input field the whole page flickers. Below is the render code,
render() {
return (
<div>
<div className="row">
<div className="col-md-8 login-image"/>
<div className="col-md-4">
<div className="login-form">
<h2 className="mb-5">Form login</h2>
<form>
<p className="h5 text-center mb-4">Sign in</p>
<Input label="Email"
icon="envelope-open" group type="email"
validate error="wrong"
success="right"/>
<Input label="Password" icon="lock" group
type="password" validate/>
<div className="text-center">
<Button>Login</Button>
</div>
</form>
</div>
</div>
</div>
</div>
);
};
CSS Code
.login-image {
background: url("../../resources/coming-soon2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.login-form {
min-height: 100%;
min-height: 100vh;
padding: 50px;
}
I am getting the below output as expected but onFocus of thetextfield the whole webpage starts to flicker. It is happening only on chrome
login
Did You try to add also onBlur event? I've copied Your code, add onBlur event and it's working correct, without flickering.
Related
I needed a dropdown with multiple rows of text like this:
I used react-select with custom components:
import Select from 'react-select';
import DropDownOptions from './DropDownOptions';
import DropDownValueContainer from './DropDownValueContainer';
<Select
placeholder="Select Value"
options={options}
defaultValue={options[0]}
onChange={handleChange}
components={
{
Option: DropDownOptions,
ValueContainer: DropDownValueContainer
}
}
isSearchable={true}
/>
DropDownValueContainer
import React from "react";
import { components } from "react-select";
const DropDownValueContainer = ({ children, ...props }) => {
return (
<components.ValueContainer {...props}>
<div>
<div>{props.selectProps.value.label}</div>
<div>{props.selectProps.value.value}</div>
//There could be more html in here
</div>
</components.ValueContainer>
);
};
export default DropDownValueContainer;
Issue 1: This is causing a problem with tab-accessibility. The Select is not accessible with tab key anymore.
Issue 2: The Select is not searchable anymore.
If I remove the custom ValueContainer, then above two issues do not occur. I have already used this implementation in my project but I need to make it accessible.
Generated HTML code using custom component:
<div class=" css-1s2u09g-control">
<div class=" css-319lph-ValueContainer">
<div class=" css-qc6sy-singleValue">Header1</div>
<div class=" css-6j8wv5-Input" data-value="">
<input class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-3-input" spellcheck="false"
tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-3-listbox"
aria-owns="react-select-3-listbox" role="combobox" value=""
style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"/>
</div>
</div>
Generated HTML code without custom component:
<div class=" css-1s2u09g-control">
<div class=" css-319lph-ValueContainer">
<div>
<div>Header1</div>
<div>value1</div>
</div>
</div>
Please help me understand what am I missing to make the input field work. Thanks.
I have a problem. The addmodal is showing from the advanced search modal button, but I have already defined the advancedsearch modal. If I click the advanced search button, it is hsowing the add modal, if I click the add button , it is also showing the add modal. I want a solution where I can display 2 different modals using 2 different buttons.
Please Help.
Main App.js:
<button onClick={()=> setShow(true)} className="leftbtns adv-srch-btn"id="adv-srch-modal">ADVANCED SEARCH</button>
<Advsrchmodal onClose={()=> setShow(false)} show={show}/>
<button onClick={()=> setShow(true)} className="rightbtns add-btn" id ="add-odal">ADD</button>
<Add onClose={()=> setShow(false)} show={show}/>
Add Modal.js
import React from 'react'
const Addmodal= props=> {
if(!props.show){
return null
}
return (
<div className='modal overlay' id= 'add-modal '>
<div className="modal-content" id= 'add-modal '>
<div className="modal-header" id= 'add-modal '>
<h4 className="modal-title" id= 'add-modal '>Add</h4>
</div>
< div className="modal-body" id= 'add-modal '>
<input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
<input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
<input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
<input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
<input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
<input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
<input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
<input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
</div>
<div className="modal-footer" id= 'add-modal '>
<button className="addbtn " id= 'add-modal '>ADD</button>
<button className="cancel" id= 'add-modal ' onClick={props.onClose}>CANCEL</button>
</div>
</div>
</div>
)
}
export default Addmodal
Addvanced Search Modal/js{
import React from 'react'
const Advsrchmodal = props=> {
if(!props.show){
return null
}
return (
<div className='modal overlay' id="adv-srch-modal" >
<div className="modal-content"id="adv-srch-modal">
<div className="modal-header"id="adv-srch-modal">
<h4 className="modal-title"id="adv-srch-modal"> Advance Search</h4>
</div>
< div className="modal-body"id="adv-srch-modal">
<input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
<input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
<input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
<input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
</div>
<div className="modal-footer"id="adv-srch-modal">
<button className="advsrchbtn"id="adv-srch-modal">SEARCH</button>
<button className="cancel"id="adv-srch-modal" onClick={props.onClose}>CANCEL</button>
</div>
</div>
</div>
)
}
export default Advsrchmodal
App.css
.modal{
/*display: none;*/
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content{
background-color: #2b404d ;
width:500px;
border-radius: 10px;
}
.modal-title{
font-size: 25px;
display: flex;
color: white;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 80px;
justify-content: left;
}
.modal-body{
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 20px;
grid-column-gap: 35px;
margin-right: 10px;
margin-left: 10px;
}
.modal-input{
border-radius: 5px;
padding: 10px 0;
border: none;
justify-content: center;
}
.addbtn{
padding: 5px 110px;
margin-right: 10px;
border: 1px solid white;
justify-content: center;
background-color: #2b404d;
color: white;
}
.advsrchbtn{
padding: 5px 95px;
background-color: #2b404d;
margin-right: 10px;
border: 1px solid white;
color: white;
}
.cancel{
padding: 5px 90px;
border: 1px solid white;
background-color: #2b404d;
color: white;
}
.modal-footer{
margin-top: 20px;
justify-content: center;
background-color: #2b404d;
}
Both are opening up the same modal because they are both referring to a single state variable. In truth, most likely both modals are rendered when you click on the button but one covers the other so you only see one. When you click either button, show is set to true, and both modals open because both modals are tied to show. You should therefore use 2 separate states for each of the modal. Refer to below corrected code:
Main App.js:
const [showAdd, setShowAdd] = useState(false);
const [showAdvanced, setShowAdvanced] = useState(false);
<button onClick={()=> setShowAdvanced(true)} className="leftbtns adv-srch-btn"id="adv-srch-modal">ADVANCED SEARCH</button>
<Advsrchmodal onClose={()=> setShowAdvanced(false)} showAdvanced={showAdvanced}/>
<button onClick={()=> setShowAdd(true)} className="rightbtns add-btn" id ="add-odal">ADD</button>
<Add onClose={()=> setShowAdd(false)} showAdd={showAdd}/>
Add Modal.js
import React from 'react'
const Addmodal= props=> {
if(!props.showAdd){
return null
}
return (
<div className='modal overlay' id= 'add-modal '>
<div className="modal-content" id= 'add-modal '>
<div className="modal-header" id= 'add-modal '>
<h4 className="modal-title" id= 'add-modal '>Add</h4>
</div>
< div className="modal-body" id= 'add-modal '>
<input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
<input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
<input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
<input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
<input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
<input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
<input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
<input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
</div>
<div className="modal-footer" id= 'add-modal '>
<button className="addbtn " id= 'add-modal '>ADD</button>
<button className="cancel" id= 'add-modal ' onClick={props.onClose}>CANCEL</button>
</div>
</div>
</div>
)
}
export default Addmodal
Advanced Search Modal.js
import React from 'react'
const Advsrchmodal = props=> {
if(!props.showAdvanced){
return null
}
return (
<div className='modal overlay' id="adv-srch-modal" >
<div className="modal-content"id="adv-srch-modal">
<div className="modal-header"id="adv-srch-modal">
<h4 className="modal-title"id="adv-srch-modal"> Advance Search</h4>
</div>
< div className="modal-body"id="adv-srch-modal">
<input type="text" placeholder='Document ID' id='doc_id' className="modal-input" />
<input type="text" placeholder='Invoice Id' id='invoice_id' className="modal-input" />
<input type="text" placeholder='Customer Number' id='cust_number' className="modal-input" />
<input type="text" placeholder='Business Year' id='business_year' className="modal-input" />
</div>
<div className="modal-footer"id="adv-srch-modal">
<button className="advsrchbtn"id="adv-srch-modal">SEARCH</button>
<button className="cancel"id="adv-srch-modal" onClick={props.onClose}>CANCEL</button>
</div>
</div>
</div>
)
}
export default Advsrchmodal
I currently have a sidebar, and a page (home.component.js) to the right of this sidebar.
To make the content not fall behind the sidebar, I have included a padding left of 20vw in the body of my index.css
background: #f0f0f0 !important;
min-height: 100vh;
display: flex;
font-weight: 400;
font-family: 'Inter';
padding-left: 20vw;
}
However, this is casing the same padding to appear on my sign up form, featured below
Code for sign-up page is below
import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import TopNav from "./TopNav"
export default class SignUp extends Component {
render() {
return (
<navbar>
<TopNav />
</navbar>,
<div className="auth-wrapper">
<div className="auth-inner">
<form>
<h4>Sign Up</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
</p>
<div className="form-group">
<label>First name</label>
<input type="text" className="form-control" placeholder="First name" />
</div>
<div className="form-group">
<label>Last name</label>
<input type="text" className="form-control" placeholder="Last name" />
</div>
<div className="form-group">
<label>Email address</label>
<input type="email" className="form-control" placeholder="Enter email" />
</div>
<div className="form-group">
<label>Password</label>
<input type="password" className="form-control" placeholder="Enter password" />
</div>
<p classname="forgot-password text-right">
Already registered log in?
</p>
<button type="submit" className="button">Sign Up</button>
</form>
</div>
</div>
);
}
}
How can I make this padding only appear on my homepage, and not carry forward to my Sign Up page, so the sign up page has no padding-left?
Homepage
render() {
return (
<div style={{ display: "flex" }}>
<Sidebar />
<h1>Right of sidebar page </h1>
</div>
);
}
}
I have inputs and labels in inside info class and I want each label and input to align by 1:3 on a single row no matter what the screen size is, plus I won't mind using flex classes, I just want a solution. Cheers
css
.info {
border: 2px solid steelblue;
border-radius: 10px;
padding: 10px;
}
.info input[type = 'text']{
margin: 10px;
padding: 5px;
border: 2px solid orange;
border-radius: 10px;
}
JSX
<div className = 'form'>
<h3 id = 'intro'>Join Us Here</h3><hr/>
<div className = 'info'>
<div>
<label>Business Name:</label> <input type='text' placeholder='Business Name' />
</div>
<div>
<label>Owner Name:</label> <input type='text' placeholder='Owner Name' />
</div>
<div>
<label>Receptionist Name:</label> <input type='text' placeholder='Receptionist Name' />
</div>
</div>
</div>
Although I agree on comments that you should do at least some research and this is simplest flex layout ever it's simple as adding display:flex on parent div and adding flex: 1 and flex: 3 on components.
I am sending you a working solution on codesandbox
https://codesandbox.io/s/wo6z1j23ll
hi i am new to angular js i have an aspx page in which i have a div tag which consists of login div and other div tags
i have set ng-app and ng-controller to main div tag and i have used update panel and scriptmanager and above this there is a form tag.
But when i try to show a div on a invalid pattern the div does not get displayed
below is my html
<body onload="heightpx()">
<form name="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="chatwindow" ng-cloak ng-app="s" ng-controller="sChat" class="col-md-4 col-xs-12" style="height: 100%; position: absolute; padding: 0px; float: right; bottom: 0px; right: 0px; z-index: 10001; background: #FFF; border: 1px solid #898989">
<div id="loginform" class="col-md-11 col-xs-11" ng-show="Islogin==false && ExistingCustomer==true" style="margin-top: 5px;">
<div class="form-group">
<input type="text" ng-model="Name" name="Name" placeholder="Name" class="form-control" id="uname" onkeyup="euname();" required ng-pattern="/^(?:[0-9]{1,3}\.){3}/" />
<div class="custom-error" ng-show="form1.Name.$error.pattern">Not a valid subnet, should be i.e. 10.x.y. (3 bytes only)</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Your Form1 is outside the scope of angular. Therefore angular compiler doesnt read that form.
You can create form tag(loginForm) inside angular app and then use loginForm.Name.$error.pattern. It should work