Putting Text in between 2 Input Boxes React - javascript

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

Related

Reducing space between icon and label name

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>

How can I get consistent line heights in view and edit mode?

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>

How to align input and labels horizontally and vertically

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;
}

place 2 components in the same row

In this component, I have an image at the top and then 2 other components (inside <ItemsContainer/>) at the bottom that appear as different rows. I want to put the other two items (a grid and a chart) in a single row and I have already tried using flex direction but it does not seem to work for me. It could be happening because I am using flex-direction: column; in the parent component already.
<main className='content'>
<img src={poly} alt="charts" className="charts" />
<div className="heading">
Heading Text
</div>
<span> The he text goes here. </span>
<div className="regressionSetup">
<ItemsContainer/>
</div>
</main>
.content{
padding-left: 260px;
padding-top: 100px;
display: flex;
flex-direction: column;
background-color: white;
}
.popup{
padding-bottom: 20px;
}
.charts{
align-self: center;
height: 350px;
width: 800px;
}
.heading{
font-size: 25px;
}
.regressionSetup{
flex-direction: row;
}
ItemsContainer:
return(
<div className="container">
<PointDrawer addCoord={this.addCoord.bind(this)}
resetCoords={this.resetCoords.bind(this)}/>
<RegressionSetup
order_graph_1={this.state.order_graph_1}
order_graph_2={this.state.order_graph_2}
setOrders={(orders: any) => this.setState(orders)}
/>
<Graph x={this.state.x_array} y={this.state.y_array}
deg={this.state.order_graph_1} width={800}
color={this.color_graph_1} />
</div>)
css
.container {
background-color: red;
width: 100vw;
flex-direction: row;
}
How can I fix this such that the grid appears on the left and the chart appears on the right but in the same line/row?
It looks like you are using Bootstrap. So column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want 2 equal-width columns across, you can use .col-6.
The code would look like this of ItemContainer:
<div className="container-fluid pt-4">
<div className="row justify-content-center">
<div className="col-6">
<PointDrawer addCoord={this.addCoord.bind(this)}
resetCoords={this.resetCoords.bind(this)}/>
<RegressionSetup
order_graph_1={this.state.order_graph_1}
order_graph_2={this.state.order_graph_2}
setOrders={(orders: any) => this.setState(orders)}
/>
</div>
<div className="col-6">
<Graph x={this.state.x_array} y={this.state.y_array}
deg={this.state.order_graph_1} width={800}
color={this.color_graph_1} />
</div>
</div>
</div>
UPDATE:
If you are using simple CSS, then let's try to use display: flex:
.container {
background-color: red;
width: 100%;
display: flex;
flex-direction: row;
}
.container .item {
width: 50%;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
</div>
So you code would look like this:
<div class="container">
<div class="item" >
<PointDraweraddCoord={this.addCoord.bind(this)} resetCoords={this.resetCoords.bind(this)} />
</div>
<div class="item">
<RegressionSetup order_graph_1={this.state.order_graph_1} order_graph_2={this.state.order_graph_2}
setOrders={(orders: any)=> this.setState(orders)}
/>
</div>
</div>

How can I put a ReactJS-bootstrap form and h1 tag side by side

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>

Categories