I have the below form in react.
I need to reduce the space between the list-icon and the label. I am using the below CSS for the same.
.form__container {
display: flex;
flex-wrap: wrap;
}
.form__container input {
color: rgb(115, 0, 255);
size: 100%;
position: relative;
flex-wrap: wrap;
width: 300px;
}
.form__container li ul {
flex-wrap: nowrap;
width: 100px;
}
Below is my react component.
return (
<div>
<FormValidator emitter={this.emitter} />
<div >
<form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}
className='form__container'>
{ this.props.authenticity_token &&
<div style={formTokenStyle}>
<input name='utf8' type='hidden' value='✓' />
<input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
<input name='task_id' type='hidden' value={this.props.task_id} />
</div>
}
{items}
</form>
<div>
{validationList}
</div>
</div>
</div>
)
Can anyone please help me with this?
To fix this issue, you just need to use input[type=text]
See my demo below:
input[type=text] {
width: 300px;
}
<form>
<div>
<label for="fname">Name</label>
<input type="text" id="fname" name="fname">
</div>
<div><input type="checkbox" /> Check me!</div>
</form>
Related
Here is my HTML code.
I need to add another row once I click the <button onclick="Addrow()">Add Employees Row</button> so I tried using appendchild and insertAdjacentHTML,, but it doesn't work.. Anyone please can help me?
What I am targeting to create is..
enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Employees Details</title>
<link rel="stylesheet" href="css/employees.css" />
<script src="./js/Employees.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="title">Employees Details</div>
<div class="AddRow">
<button onclick="Addrow()">Add Employees Row</button>
</div>
</div>
<div class="contents-grid">
<div class="contents">
<div class="Detail-Info-Grid">
<input type="text" placeholder="Designation" />
<input type="text" placeholder="Employee Name" />
<input type="text" placeholder="Employee ID" />
<input type="text" placeholder="Prev Company" />
</div>
<div class="remove">
<button>Remove</button>
</div>
</div>
</div>
<div class="submit">
<button>Submit</button>
</div>
</div>
</body>
</html>
Here is my css code
.wrapper {
background-color: lightpink;
display: flex;
flex-direction: column;
max-width: fit-content;
padding: 10px;
}
.header {
background-color: lightblue;
justify-content: center;
display: flex;
}
button {
border-radius: 10px;
background-color: lightblue;
padding: 5px;
border: 1px solid;
}
::placeholder {
text-align: center;
color: black;
}
input {
margin: 10px;
background-color: lightblue;
padding: 3px;
border: 1px solid;
}
.title {
align-items: center;
flex: 1;
display: flex;
justify-content: center;
transform: translateX(65px);
}
.remove {
display: flex;
align-items: center;
/* vertical-align: center; */
}
.contents {
background-color: lightseagreen;
display: flex;
flex-direction: row;
}
.contents-grid {
display: flex;
flex-direction: column;
}
.submit {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
My Javascript with error..
const ContentsGrid = document.getElementsByClassName("contents-grid");
const Addrow = function () {
const html = `
<div class="contents">
<div class="Detail-Info-Grid">
<input type="text" placeholder="Designation" />
<input type="text" placeholder="Employee Name" />
<input type="text" placeholder="Employee ID" />
<input type="text" placeholder="Prev Company" />
</div>
<div class="remove">
<button>Remove</button>
</div>
</div>
`;
ContentsGrid.appendChild(html);
// ContentsGrid.insertAdjacentHTML("afterend", html);
// ContentsGrid.innerHTML += html;
};
// document.getElementById("AddEmployeesRow").addEventListener("click", Addrow);
Here is working example:
const ContentsGrid = document.querySelector(".contents-grid");
const Addrow = function() {
const html = `
<div class="contents">
<div class="Detail-Info-Grid">
<input type="text" placeholder="Designation" />
<input type="text" placeholder="Employee Name" />
<input type="text" placeholder="Employee ID" />
<input type="text" placeholder="Prev Company" />
</div>
<div class="remove">
<button>Remove</button>
</div>
</div>
`;
ContentsGrid.insertAdjacentHTML('beforeend', html);
};
.wrapper {
background-color: lightpink;
display: flex;
flex-direction: column;
max-width: fit-content;
padding: 10px;
}
.header {
background-color: lightblue;
justify-content: center;
display: flex;
}
button {
border-radius: 10px;
background-color: lightblue;
padding: 5px;
border: 1px solid;
position: relative;
z-index: 1;
}
::placeholder {
text-align: center;
color: black;
}
input {
margin: 10px;
background-color: lightblue;
padding: 3px;
border: 1px solid;
}
.title {
align-items: center;
flex: 1;
display: flex;
justify-content: center;
transform: translateX(65px);
}
.remove {
display: flex;
align-items: center;
/* vertical-align: center; */
}
.contents {
background-color: lightseagreen;
display: flex;
flex-direction: row;
}
.contents-grid {
display: flex;
flex-direction: column;
}
.submit {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Employees Details</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="title">Employees Details</div>
<div class="AddRow">
<button type="button" onClick="Addrow()">Add Employees Row</button>
</div>
</div>
<div class="contents-grid" id="contents-grid">
<div class="contents">
<div class="Detail-Info-Grid">
<input type="text" placeholder="Designation" />
<input type="text" placeholder="Employee Name" />
<input type="text" placeholder="Employee ID" />
<input type="text" placeholder="Prev Company" />
</div>
<div class="remove">
<button>Remove</button>
</div>
</div>
</div>
<div class="submit">
<button>Submit</button>
</div>
</div>
</body>
I am not as familiar with vanila javascript, but I dont see other answers.
Ive never used getElementsByClassName, and I could not get it to work this time.
I am also not sure why you dont just append the input and not re-write your entire html.
if you want to use just append, you would need something like jquery.
if you want to add something simliar to what jquery does with append, that would be using += and innerHtml.
const ContentsGrid = document.getElementById("contents-grid");
const Addrow = function () {
const html = `
<div class="contents">
<div class="Detail-Info-Grid">
<input type="text" placeholder="Designation" />
<input type="text" placeholder="Employee Name" />
<input type="text" placeholder="Employee ID" />
<input type="text" placeholder="Prev Company" />
<input type="text" placeholder="Employees" />
</div>
<div class="remove">
<button>Remove</button>
</div>
</div>
`;
ContentsGrid.innerHTML = html;
// ContentsGrid.insertAdjacentHTML("afterend", html);
// ContentsGrid.innerHTML += html;
};
// document.getElementById("AddEmployeesRow").addEventListener("click", Addrow);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Employees Details</title>
<link rel="stylesheet" href="css/employees.css" />
<script src="./js/Employees.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="title">Employees Details</div>
<div class="AddRow">
<button onclick="Addrow()">Add Employees Row</button>
</div>
</div>
<div class="contents-grid" id="contents-grid">
<div class="contents">
<div class="Detail-Info-Grid">
<input type="text" placeholder="Designation" />
<input type="text" placeholder="Employee Name" />
<input type="text" placeholder="Employee ID" />
<input type="text" placeholder="Prev Company" />
</div>
<div class="remove">
<button>Remove</button>
</div>
</div>
</div>
<div class="submit">
<button>Submit</button>
</div>
</div>
</body>
</html>
I am attending to have 2 input boxes next to each other with text in between them. Something like this
[0... ] < Ranking < [1000...]
However, the most I've been able to get is the two input boxes with no text in between.
This is my code so far attending to put the text in between them.
return(
<div className="two-col">
<div className="col1">
<input type={"text"} required={true} placeholder={"0..."} name={"id"} onChange={update} />
</div>
<text> < Ranking < </text>
<div className="col2">
<input type={"text"} required={true} placeholder={"1000..."} name={"id"} onChange={update} />
</div>
</div>
);
And my CSS file
.two-col {
overflow: hidden;/* Makes this div contain its floats */
}
.two-col .col1,
.two-col .col2 {
width: 50%;
background: #f2f2f2;
}
.two-col .col1 {
float: left;
}
.two-col .col2 {
float: right;
}
Any help is much appreciated.
<div className={'container'}>
<div className={'col'}>
<input type={'text'} required={true} placeholder={'0...'} name={'id'} onChange={update} />
</div>
<div className={'col'}> < Ranking < </div>
<div className={'col'}>
<input type={'text'} required={true} placeholder={'...1000'} name={'id'} onChangeonChange={update} />
</div>
</div>
Using flex
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
You can have more control over the row using display: grid (not as well supported as flexbox).
EDIT: graph container
<div className={"container"}>
<div className={"container inputs"}>
<div>
<input
type={"text"}
required={true}
placeholder={"0..."}
name={"id"}
onChange={"update"}
/>
</div>
<div> < Ranking < </div>
<div>
<input
type={"text"}
required={true}
placeholder={"...1000"}
name={"id"}
onChange={"update"}
/>
</div>
</div>
<div className={"graphview"}>
graph view
</div>
</div>
CSS
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.container.inputs {
width: 50%;
}
.graphview {
width: calc(50% - 10px);
border: 5px solid rgba(0, 0, 0, 1);
}
When using percents and borders, you have to calculate the width.
Try to use flexbox
.two-col {
display: flex;
}
.two-col .col1,
.two-col .col2 {
background: #f2f2f2;
}
and remove other css
As the screen below, I have a Read component + a Edit component.
But they don't exactly match, the Edit still takes more spacing.
My goal is to make them match, in order to later make an Edit Inline.
I've already tried with a few "td" and "tr" tags, but the issue was the same.
I need same spacing between my "p" tags, for all lines. Right now some lines dosnt have the same spacing.
ReadOnlyRow.js
import React from 'react';
const ReadOnlyRow = ({getData}) => {
return (
<>
<p> Email : { getData.data?.attributes?.email }</p>
<p> Username : </p>
<p> Timezone :</p>
</>
);
};
export default ReadOnlyRow;
EditableRow.js
import React from 'react';
const EditableRow = ({getData}) => {
return (
<>
<p>
<label for="email"> Email : </label>
<input type="email" placeholder={getData.data?.attributes?.email} name="email"></input>
</p>
<p>
<label for="email"> Username : </label>
<input type="text" placeholder="Enter your username .." name="username"></input>
</p>
<p>
<label for="email"> Timezone : </label>
<input type="text" placeholder="Enter your timezone .." name="timezone"></input>
</p>
</>
);
};
export default EditableRow;
ParentFile.js
return (
<ProfileStyled>
<h1> Profile </h1>
<div className="profile-infos">
<div className='row'>
<div className='column'>
<div className="user-infos">
<form>
<ReadOnlyRow getData={getData} />
</form>
<EditableRow getData={getData} />
</div>
</div>
</div>
<div className='row'>
<div className='column'>
<hr className="hr"/>
</div>
</div>
<div className='row'>
<div className='column'>
<div className="user-history">
<p> History :</p>
</div>
</div>
</div>
</div>
</ProfileStyled>
);
CSS
const ProfileStyled = styled.div`
min-height: 100vh;
padding: 6rem 0;
background-color: ${(props) => props.theme.colors.greenLight};
.hr {
transform:rotate(90deg);
width: 200px;
margin-top: 100px;
}
.profile-infos {
max-width: ${(props) => props.theme.spacings.maxWidth};
margin-top: 3rem;
margin-left: auto;
margin-right: auto;
padding: 0 ${(props) => props.theme.paddings.NavLaptop};
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
width: 100%;
}
.user-infos {
display:flex;
flex-direction: column;
align-items: start;
}
.user-history {
display:flex;
flex-direction: column;
align-items: start;
}
`;
From what I understand, you needed a better way to space your p elements inside EditableRow.js and ReadOnlyRow.js.
I made this implementation with display grid, you can use this implementation if you don't have any problem with the supported browsers, you can check that here.
You need to add the css on the parent container, and then you can change ReadOnlyRow.js, so the user information is inside a span and then you have a similar structure on both components.
.container {
width: 300px;
display: inline-block;
}
.container p {
display: grid;
grid-template-columns: 100px 200px;
background: pink;
align-items: center;
min-height: 21px;
}
<div class="container">
<p> Email : <span>fake#email.com</span></p>
<p> Username : </p>
<p> Timezone :</p>
</div>
<div class="container">
<p>
<label for="email"> Email : </label>
<input type="email" placeholder="fake#email.com" name="email" />
</p>
<p>
<label for="email"> Username : </label>
<input type="text" placeholder="Enter your username .." name="username" />
</p>
<p>
<label for="email"> Timezone : </label>
<input type="text" placeholder="Enter your timezone .." name="timezone" />
</p>
</div>
In the HTML shown below, I want to have the following appearance of the tags
label1: input1
label2: input2
label3: input3
but what I am getting is something like this:
label1:
input1
Please let me know how to modify the HTML to achieve the desired results.
HTML:
<div class="modal-body">
<form #form="ngForm" class="clr-form clr-form-horizontal" autocomplete="off">
<div>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}</label>
<input
required
maxlength="25"
clrInput
[(ngModel)]="selectedSite.name"
type="text"
name="name"
/>
</clr-input-container>
</div>
<div>
<clr-input-container>
<label>{{ "DISTANCE_MEASUREMENT.START_LONGITUDE" | translate }}</label>
<input
required
maxlength="25"
clrInput
[(ngModel)]="selectedSite.name"
type="text"
name="name"
/>
</clr-input-container>
</div>
</form>
</div>
Please have a look at the following jsFiddle and see if that helps you find a solution
https://jsfiddle.net/n5m43h8b/3/
All I added was some simple css:
clr-input-container {
position: relative;
display: block;
}
Just add display: block; to your style/css
clr-input-container {
display: block;
}
Use the following:
clr-input-container {
display: block
}
clr-input-container > label,
clr-input-container > input {
display: inline-block;
}
If this doesn't work. Remove any prior css or add !important with inline-block.
Add it to your global styles.css, if you are adding it in component css then add encapsulation: ViewEncapsulation.None in your #component declarator as shown in the following image.
Check this out,
HTML
<div class="flex-container">
<div class="row">
<div class="flex-item">
<div>
<label>{{ "D.START_LONG" | translate }}</label> <input
required
maxlength="25"
clrInput
[(ngModel)]="s.name"
type="text"
name="name"
/>
</div>
</div>
<div class="flex-item">
<div>
<label>{{ "DT.START_LAT" | translate }}</label><input
required
maxlength="25"
clrInput
[(ngModel)]="s.name"
type="text"
name="name"
/>
</div>
</div>
</div>
and CSS
html, body {
height: 100%;
}
body {
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
line-height: 20px;
color: Red;
font-weight: bold;
font-size: 2em;
text-align: center;
}
I'm a beginner and I'm struggling with a javascript document.
I want to toggle from 'hidden' to 'visible' a block that thanks after submiting a form. But the thing is that my 'thanks block' only appear for a second then disappear.
I've tried it by changing the 'submit' evenement by 'click' and it's working but then the form is not validate. I don't know if know what I mean. Thanks a lot
Here is my JS code:
let merci = document.getElementById('merci');
let button = document.getElementById('frmContact');
button.addEventListener('submit', submit, false);
function submit(){
merci.classList.toggle('visible');
}
merci.addEventListener('click', closeMerci, false);
function closeMerci(){
merci.classList.toggle('visible');
};
Here is the css
#merci{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.9);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
visibility: hidden;
opacity: 0;
}
#merci #cadreMerci{
background-color: white;
padding: 50px;
margin: 20px 50px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: center;
}
#merci.visible{
opacity: 1;
visibility: visible;
}
and here is the HTML document :
<form id="frmContact">
<div>
<div>
<label for="fName">Prénom</label>
<input name="fName" id="fName" required autofocus />
</div>
<div>
<label for="lName">Nom</label>
<input type="text" name="lName" id="lName" required />
</div>
<div>
<label for="email">Votre e-mail</label>
<input type="email" name="email" id="email" required />
</div>
</div>
<div>
<div>
<label for="message">Votre message</label>
<textarea name="message" id="message" required></textarea>
</div>
</div>
<button id="buttonSubmit" type="submit">Envoyer</button>
</form>