CODEWITHSUNDEEP
javascriptcssreactjsreact-native
JustThatGuy93
JustThatGuy93

Reputation: 119

Putting Text in between 2 Input Boxes React

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> &lt; Ranking &lt; </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.

Upvotes: 0

Views: 747

Answers (2)

user16754275
user16754275

Reputation: 

<div className={'container'}>
  <div className={'col'}>
    <input type={'text'} required={true} placeholder={'0...'} name={'id'} onChange={update} />
  </div>
  <div className={'col'}> &lt; Ranking &lt; </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> &lt; Ranking &lt; </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.

Upvotes: 1

Volodymyr Sen
Volodymyr Sen

Reputation: 103

Try to use flexbox

.two-col {
    display: flex;
}

.two-col .col1,
.two-col .col2 {
    background: #f2f2f2;
}

and remove other css

Upvotes: 0

Related Questions