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
Related
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 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.
The repo is here: https://github.com/sjzerneri/mad-lib-project/ and the live preview is here: http://sjzerneri.github.io/mad-lib-project/
I have an ng-hide in my html that operates correctly before I start trying to adjust the css to animate it.
When I try to animate it with ng-hide-add and ng-hide-remove, the section fades out, and then promptly reappears instead of hiding. Why doesn't the section stay hidden?
Here's my HTML for the section:
<section class="word-inputs" ng-hide="hideForm && myForm.$valid">
<h3> Provide The Following Words:</h3>
<div class="all-words">
<form name="myForm" ng-submit="submitted=true;submit()">
<div class="word-selection">
<input type="text" ng-model="name" placeholder="name" required>
<input type="text" ng-model="jobtitle" placeholder="job title" required>
<input type="text" ng-model="tedioustask" placeholder="tedious task" required>
</div>
<div class="word-selection">
<input type="text" ng-model="dirtytask" placeholder="dirty task" required>
<input type="text" ng-model="celebrity" placeholder="celebrity" required>
<input type="text" ng-model="uselessskill" placeholder="useless skill" required>
</div>
<div class="word-selection">
<input type="text" ng-model="obnoxiousceleb" placeholder="obnoxious celeb" required>
<input type="number" ng-model="hugenumber" placeholder="huge number" required>
<input type="text" ng-model="adjective" placeholder="adjective" required>
</div>
<div class="hor-line"> </div>
<div class="submission">
<button type="submit">Generate Mad Lib</button>
</div>
</form>
</div>
</section>
Here's my css:
.word-inputs {
padding-top: 2rem;
margin: 0 auto;
width: 90%;
text-align: center;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
display: block!important;
}
.word-inputs.ng-hide-add.ng-hide-add-active,
.word-inputs.ng-hide-remove {
opacity: 0;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
Add an extra div for your animation class
like
<section ng-hide="hideForm && myForm.$valid">
<div class="word-inputs" >
<h3> Provide The Following Words:</h3>
.....
</div>
</section>
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Does anybody knows where is the problem here http://jsfiddle.net/jDNFU/ in IE7? I've already tryed everything I could do.
Can't you use something like this? What are you trying to do? What does it need to look like?
<ul id="mytest">
<li><input type="text" value="" name="test1" /></li>
<li><input type="text" value="" name="test2" /></li>
<li><input type="text" value="" name="test3" /></li>
<li><input type="text" value="" name="test4" /></li>
<li><input type="text" value="" name="test5" /></li>
<li><input type="text" value="" name="test6" /></li>
</ul>
#mytest {list-style:none; width:254px; max-height:328px; overflow-y:auto; display:block;}
#mytest li {position:relative; display:inline; zoom:1; height:25px;}
#mytest input {position:absolute;}
EDIT:
Since you fixed it yourself and all, this is how I would've slice it. Because you don't need to resize your inputs, you can take just full background images, no?
.clr { clear: both; }
#myform { width: 800px; }
#myform fieldset { display: block; float: left; margin: 0; padding: 0; border: medium none; }
#myform input.txt { display: block; width: 200px; border: medium none; background: transparent url('bg_input.jpg') no-repeat scroll 0 0; height: 30px; text-indent: 2px; }
#myform label { float: left; width: 120px; height: 30px; }
#myform textarea { display: block; border: medium none; height: 180px; background: transparent url('bg_textarea_large.jpg') no-repeat scroll 0 0 !important; resize: none; }
#myform .large { width: 378px; background: transparent url('bg_input_large.jpg') no-repeat scroll 0 0; }
#myform .button { }
#myform fieldset.addfriends { width: 300px; }
#myform fieldset.personal { width: 500px; }
<form id="myform">
<fieldset class="addfriends">
<p>Enter at least 3 email addresses of your friends</p>
<input type="text" class="txt" />
<br />
<input type="text" class="txt" />
<br />
<input type="text" class="txt" />
</fieldset>
<fieldset class="personal">
<label for="name">Your name:</label><input type="text" id="name" class="txt" />
<br />
<label for="email">Your e-mail:</label><input type="text" id="email" class="txt" />
<br />
<label for="subject">Subject:</label><input type="text" id="subject" class="txt large" value="You'll love it!" />
<br />
<label for="message">Message:</label><textarea id="message" class="large"></textarea>
<br />
<input type="submit" class="button" value="Send" />
</fieldset>
<div class="clr"></div>
</form>
I have set up radio buttons to display inline on a contact form. They display properly in all tested browsers except IE7, they will not display inline. They are set up using ul and li.
CSS for radio buttons
fieldset div ul {
margin: 5px 0 0 0;
list-style:none;
display:block;
float:left;
}
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:none;
}
fieldset div ul li label {
display: inline;
float: none;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
}
fieldset div ul li input {
background: none;
border: none;
display: inline;
margin: 0 5px 0 0;
padding: 0;
width: auto;
float:none;
}
HTML for form
<fieldset>
<!-- Your Name -->
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="required"/>
</div>
<!-- Email -->
<div>
<label for="emailAddress">Email</label>
<input type="text" name="emailAddress" id="emailAddress" class="required email"/>
</div>
<!-- Phone -->
<div>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<!-- Contact Time -->
<div>
<label for="contactTime">Best Time to Contact</label>
<ul>
<li><input type="radio" name="contactTime" value="morning" /><label for="morning">Morning</label></li>
<li><input type="radio" name="contactTime" value="day" /><label for="day">Day</label></li>
<li><input type="radio" name="contactTime" value="evening" /><label for="evening">Evening</label></li>
</ul>
</div>
<!-- Contact Method -->
<div>
<label for="contactMethod" style="margin:15px 0 0 0;">Best Method of Contact</label>
<ul>
<li><input type="radio" name="contactMethod" value="phone" /><label for="phone">Phone</label></li>
<li><input type="radio" name="contactMethod" value="email" /><label for="email">Email</label></li>
</ul>
</div>
<!-- Coments -->
<div class="floatLeft" style="margin:10px 0 0 0;">
<label for="mess">Message</label>
<textarea name="mess" id="mess" rows="15" cols="5"></textarea>
</div>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Contact Us" class="button"/>
</div>
</fieldset>
<input name="url" type="hidden" value="" class="noDisplay"/>
Try setting them to float left -
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:left;
}
Shouldn't affect any other browsers, and should sort out IE7. Don't forget to clear: left; after them though.