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>
Related
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>
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
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>
I want to place my FormGroup and my h1 tag side-by-side horizontally. I've tried using display: inline-block and various other stuff but no luck. Here's my .css code:
.testingForm {
max-width: 320px;
}
.testingMore {
text-align: left;
float: right;
}
And here's the .js code:
<div className="testingForm">
<FormGroup
controlId="stuff"
bsSize="large"
>
<ControlLabel>Stuff</ControlLabel>
<FormControl
/>
</FormGroup>
</div>
<div className="testingMore">
<h1>Additional Stuff</h1>
</div>
You could create an element that wraps both your form and header, and make it into a flex container with display:flex;
.form-wrapper {
display: flex;
}
.testingForm {
max-width: 320px;
}
h1 {
margin-top: 0;
}
<div class="form-wrapper">
<div className="testingForm">
<form>
Test: <input type="text"/>
</form>
</div>
<div>
<h1>Additional Stuff</h1>
</div>
</div>