Foundation-sites: Form input width is taking 100% (entire page) even though I have set the grid to be otherwise

[rohan-paul]

Expected Behavior

In my react app, the CountdownForm.jsx component has a form (input and button ) .

The width of the form-input was supposed to be set by foundation's grid system which I am defining in my Main.jsx

So, I have the following code in my Main.jsx

var Main = (props) => {
  return (
    <div>
      <Navigation/>
      <div className="row">
        <div className="column small-centered medium-6 large-4">
          {props.children}
        </div>
      </div>
    </div>
  );
}
module.exports = Main;

And then in my child component CountdownForm.jsx I have written as below

  render: function () {
    return (
      <div>
        <form ref="form" onSubmit={this.onSubmit} className="countdown-form">
          <input type="text" ref="seconds" placeholder="Enter time in seconds"/>
          <button className="button expanded">Start</button>
        </form>
      </div>
    );
  }
});

module.exports = CountdownForm;

I also have a file named _countdownForm.scss for styling the form and I have included the below in this file

.countdown-form {
  width: 30%;
  justify-content: center;
}

Current Behavior

But, not able to reduce the width of the form-input and button within the CountdownForm.jsx. These two elements (form-input and button) are taking the entire width of the page. And I would like to keep them centred and 30% width.

Your Environment

I am using "foundation-sites": "6.4.4-rc1" and "react": "^16.0.0"

• Browser(s) name and version(s): Google Chrome
• Operating System and version : Ubuntu 16.04
• Link to your project:

And the project Github is here

[DanielRuf]

I guess your structure is not correct.

[DanielRuf]

And countdownForm is not included in your app.scss.

[SassNinja]

@rohan-paul there are several problems in your code:

1. you've included the latest foundation version with XY grid as default but are using the classes from the old float/flex grid
2. your CountdownForm component gets not included on the route /counter because the Main component doesn't get included here

You have to adjust the Countdown component to fix this, not the Main

return (
  <div className="grid-x">
    <div className="cell small-centered medium-6 large-4">
      <CountdownForm onSetCountdown={this.handleSetCountdown} />
    </div>
  </div>
);

[rohan-paul]

Thanks so very much mate !! Perfectly solved the issue..