3

The whole thing is a misunderstanding on my part please ignore!

I have tried to research this problem but the only solution that came up were for react native. My problem basically is that the CSS behaves differently in reactjs environment then in a regular one. Here is what I mean:

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
        <form>
        <div id="cart">

        {/* Cart Header */}

        <div id="cart-header">
          <div id="edit-icon" className="header-icon">
            <p>EDIT</p>
          </div>
          <div className="header-line"></div>
          <div id="payment-icon" className="header-icon">
            <p>PAYMENT</p>
          </div>
          <div className="header-line"></div>
          <div id="confirm-icon" className="header-icon">
            <p>COMFIRM</p>
          </div>
        </div>

        {/* Cart Body */}

        {/* Personal information */}
        <div id="cart-body-left" className="cart-body">
          <h2>Personal information</h2>
          <fieldset id="info-fieldset">

            <div id="name" className="input-div-container">

              <div id="first-name" className="input-div">
                <input type="text" placeholder="First Name"/>
                <label className="input-label">First Name</label>
              </div>

              <div id="last-name" className="input-div">
                <input type="text" placeholder="Last Name"  />
                <label className="input-label">Last Name</label>
              </div>

            </div>

            <div id="email" className="input-div">
              <input type="email" placeholder="Email" />
              <label className="input-label">Email</label>
            </div>

            <div id="number" className="input-div">
              <input type="text" placeholder="Number" />
              <label className="input-label">Number</label>
            </div>

            <div id="address-apt" className="input-div-container">

              <div id="address" className="input-div">
                <input type="text" placeholder="Address" />
                <label className="input-label">Adress</label>
              </div>

              <div id="apt" className="input-div">
                <input type="text" placeholder="Apt, Unit, etc" />
                <label className="input-label">Apt, Unit, etc</label>
              </div>

            </div>

            <div id="zip-city-state" className="input-div-container">

              <div id="zip" className="input-div">
                <input type="text" placeholder="Zip" />
                <label className="input-label">Zip</label>
              </div>

              <div id="city" className="input-div">
                <input type="text" placeholder="City" />
                <label className="input-label">City</label>
              </div>

              <div id="state" className="input-div">
                <select id="state-select">
                  <option value="AL">AL</option>
                  <option value="AK">AK</option>
                  <option value="AS">AS</option>
                  <option value="AZ">AZ</option>
                  <option value="AR">AR</option>
                  <option value="CA">CA</option>
                  <option value="CO">CO</option>
                  <option value="CT">CT</option>
                  <option value="DE">DE</option>
                  <option value="DC">DC</option>
                  <option value="FM">FM</option>
                  <option value="FL">FL</option>
                  <option value="GA">GA</option>
                  <option value="GU">GU</option>
                  <option value="HI">HI</option>
                  <option value="ID">ID</option>
                  <option value="IL">IL</option>
                  <option value="IN">IN</option>
                  <option value="IA">IA</option>
                  <option value="KS">KS</option>
                  <option value="KY">KY</option>
                  <option value="LA">LA</option>
                  <option value="ME">ME</option>
                  <option value="MH">MH</option>
                  <option value="MD">MD</option>
                  <option value="MA">MA</option>
                  <option value="MI">MI</option>
                  <option value="MN">MN</option>
                  <option value="MS">MS</option>
                  <option value="MO">MO</option>
                  <option value="MT">MT</option>
                  <option value="NE">NE</option>
                  <option value="NV">NV</option>
                  <option value="NH">NH</option>
                  <option value="NJ">NJ</option>
                  <option value="NM">NM</option>
                  <option value="NY">NY</option>
                  <option value="NC">NC</option>
                  <option value="ND">ND</option>
                  <option value="MP">MP</option>
                  <option value="OH">OH</option>
                  <option value="OK">OK</option>
                  <option value="OR">OR</option>
                  <option value="PW">PW</option>
                  <option value="PA">PA</option>
                  <option value="PR">PR</option>
                  <option value="RI">RI</option>
                  <option value="SC">SC</option>
                  <option value="SD">SD</option>
                  <option value="TN">TN</option>
                  <option value="TX">TX</option>
                  <option value="UT">UT</option>
                  <option value="VT">VT</option>
                  <option value="VI">VI</option>
                  <option value="VA">VA</option>
                  <option value="WA">WA</option>
                  <option value="WV">WV</option>
                  <option value="WI">WI</option>
                  <option value="WY">WY</option>
                </select>
              </div>

            </div>

          </fieldset>

        </div>

        {/* Credit Card Information */}
        <div id="cart-body-right" className="cart-body">
        <h2>Credit Card Information</h2>
        <fieldset id="cc-fieldset">

        <div id="cc-number" className="input-div">
        <input type="number" placeholder="Credit Card Number" />
        </div>
        <div id="cc-valid" className="input-div-container">
        <div id="cc-expiration" className="input-div">
        <input type="text" placeholder="MM/YY" />
        </div>
        <div id="cc-cvv" className="input-div">
        <input type="text" placeholder="CVV"  />
        </div>
        <div id="cvv-help" className="input-div">
        <img height="18px" width="18px" src="store/img/question-mark.png" />
        </div>
        </div>
        </fieldset>

        <div id="cart-stats">
        <div className="stats">
        <span>cart total:</span>
        <span>something</span>
        </div>
        <div className="stats">
        <span>cart total:</span>
        <span>something</span>
        </div>
        <div className="stats">
        <span>cart total:</span>
        <span>something</span>
        </div>
        </div>

        <div id="terms-conditions">
        <div className="checkbox">
        <input type="checkbox" id="tc-checkbox" value="0" />
        <label htmlFor="tc-checkbox">Bla bla bla </label>
        </div>
        </div>

        </div>

        {/* Cart Footer */}

        <div className="cart-footer" id="cart-footer-left">
        <div id="coupon">
        <div id="coupon-input">
        <input type="text"/>
        </div>
        <div id="coupon-button">
        <button>hello</button>
        </div>
        </div>
        </div>

        <div className="cart-footer" id="cart-footer-right">

        </div>

        </div>
      </form>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))
:root {
  --gold: #e5cb51;
  --silver: #666666;
  --light-silver: #ddd;
}

::placeholder {
  color: var(--silver);
}

h2 {
  text-align: center;
  color: white;
  color: var(--light-silver);
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

body {
  background-color: black;
}

p {
  font-family: Raleway;
}

#cart {
  margin: auto;
  margin-top: 100px;
  width: 800px;
  display: grid;
  grid-template-areas:
    "h h"       /* Header */
    "bl br"     /* Body left right */
    "fl fr";    /* Footer left right */
}

#cart-header {
  background-color: black;
  border: 1.5px solid var(--gold);
  border-bottom: 0px;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  grid-area: h;
  display: flex;
  justify-content: center;
  padding: 1em 0;
}

#cart-body-left {
  grid-area: bl;
}

#cart-body-right {
  grid-area: br;
  border-left-width: 0;
}

#cart-footer-left {
  grid-area: fl;
  border-bottom-left-radius: 1em;
}

#cart-footer-right {
  grid-area: fr;
  border-bottom-right-radius: 1em;
}

.cart-body {
  width: 400px;
  height: 400px;
  border: 1.5px solid var(--gold);
  background-color: black;
}

.cart-footer {
  height: 50px;
  width: 400px;
  background-color: var(--gold);
}

#email {
  box-sizing: border-box;
  padding-bottom: 1em;
}

#number {
  box-sizing: border-box;
}

#state > select{
  height: 100%;
  border: 1.5px var(--silver) solid;
  border-radius: 3px;
}

#cc-paypal-option {
  padding-left: 50%;
  margin: 1em;
  border: 1px solid white;
  border-bottom-left-radius: .5em;
  border-bottom-right-radius: .5em;
  padding-bottom: 1em;
}

#cc-paypal-option > button {
  height: 31px;
}

#cart-stats {
  margin: 1em;
  border: 1.5px var(--gold) solid;
  border-radius: .5em;
}

#cart-stats > div:nth-child(2) {
  border-top: 1px var(--gold) solid;
  border-bottom: 1px var(--gold) solid;
  padding: .5em 0;
  margin: .5em 0;
}

#coupon {
  height: 40px;
  width: 300px;
  margin: 5px 50px;
  background-color: black;
  display: flex;
}

#coupon > div {
  width: 200px;
  position: relative;
}

#coupon-input input {
  position: absolute;
  height: 100%;
  right: 0;
  width: 0;
  opacity: 1;
  transition: all .2s ease-in;
}

#coupon-button button {
  height: 100%;
}

#cart-footer-left:hover input[type="text"] {
  width: 100px;
  opacity: 1;
  transition: all .2s ease-out;
}

.header-line {
  width: 75px;
  height: 0px;
  border: 1px solid var(--gold);
  margin: auto 0;
  background-color: var(--gold);
}

.header-icon {
  height: 2em;
  width: 120px;
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  margin: .5em 0px;
  padding-top: .1em;
}

.active-icon {}

.header-icon:hover {
  background-color: var(--gold);
}

.header-icon:hover > p{
  color: black;
}

.header-icon > p {
  text-align: center;
  color: var(--light-silver);
  font-weight: bold;
  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 1.2em;
  letter-spacing: 2px;
  line-height: 1.45;
}

.input-label {
  visibility: visible;
  position: absolute;
  display: block;
  color: white;
  top: 0;
  font-size: 1em;
  opacity: 1;
  transform: translateY(-1.5em);
  transition: all 0.2s ease-out;
  margin-left: 10px;
  display: inline;
}

input:placeholder-shown + label {
  opacity: 0;
  visibility: hidden;
  text-align: center;
  transform: translateY(.5em);
}

.input-div-container {
  display: flex;
}

.input-div {
  position: relative;
  padding: 1em;

  /* height: 33px; */
}

/* #first-name,
#last-name {
  width: 198.5px;
} */

.input-div > input {
  width: 100%;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1.5px var(--silver) solid;

  display: block;
}

.input-div > input:focus, #state > select:focus {
  outline: none;
  border: solid var(--gold) 1.5px;
  box-shadow: 0 0 5px var(--gold);
}

.stats {
  margin: .5em;
  display: flex;
  justify-content: center;
}

.stats > span {
  padding: 0 1em;
  color: var(--light-silver);
}

.checkbox {
  position: relative;
  margin: 1em;
  margin-top: 1.3em;
}

.checkbox input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.checkbox label::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  background-color: white;
  content: '';
}

.checkbox input[type="checkbox"]:checked + label::before {
  background-color: var(--gold);
  color: white;
}

.checkbox input[type="checkbox"]:checked + label::after {
  display: block;
  position: absolute;
  top: 1px;
  left: 8.5px;
  width: 10px;
  height: 20px;
  /* background: black; */
  border: solid black;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  content: '';
}

@media screen and (max-width: 900px) {
  #cart {
    width: 400px;
    display: grid;
    grid-template-areas:
      "h"
      "bl"
      "fl"
      "br"
      "fr";
  }

  #cart-header {
    width: 400px;
  }

  .header-icon {
    width: 75px;
  }

  .header-icon p {
    font-size: .7em;
    letter-spacing: 2px;
    line-height: 2.5;
  }

  #cart-body-right {
    border-left-width: 1.5px;
  }

  #cart-footer-left {
    border-radius: 0px;
  }

  #cart-footer-right {
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Here is how it looks like when I render it without react

How it looks like after I paste my code into jsx

I hope I have provided enough code and if not I can add on to it

Improve this question
1
  • Please revise the code snippet to exhibit the undesirable behavior with React, and/or to demonstrate the correct behavior otherwise. Screenshots that do not represent the provided code are not helpful. At the very least, it's easy enough to say that your statement re: CSS behavior when using React is conjecture. Commented Oct 1, 2018 at 23:01

1 Answer 1

Reset to default
3

I'm not sure this is a react specific issue. I pasted your code into JSFiddle and did not run into the same issues you are having. Positioned elements will only default to root if there are no other positioned ancestors. Might be worth looking through your HTML to see if there is a positioned parent or ancestor messing with your positioning.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Very interesting indeed, I pasted all my code into JSFiddle and it worked fine, could it be maybe because im using react-route?
@Isoeth I do not believe this is a react-router issue either. It is hard to tell without looking at the elements and the computed styles, but I believe you are running into a position issue with an ancestor element.
You are right again! I will have to further investigate what wrong with my code but thanks for your help
No problem! If you can't remove the positioning of an ancestor, you might want to consider positioning a parent element to prevent this from happening. Another option is to use relative, but you may run into the some height issues. Good luck!
After some more investigating I figured it must have been CSS properties that messed it up. And since if you import CSS in one part of the app it applies to all components but I found a workaround. But thanks for testing I would have never thought of that :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.