нельзя уменьшить ширину ввода формы основания zurb - PullRequest
Новая
       6

нельзя уменьшить ширину ввода формы основания zurb

0 голосов
/ 30 апреля 2018

Я новичок в Zurb Foundation и использую его в своем проекте React 16. И просто не удалось уменьшить ширину формы ввода и кнопки внутри компонента с именем CountdownForm.jsx . Эти два элемента ( form-input и кнопка ) занимают всю ширину страницы. И я хотел бы держать их по центру и 30% ширины.

Буду очень признателен за любую помощь.

У меня есть следующий код в моем 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;

А потом в моем дочернем компоненте с именем CountdownForm.jsx Я написал, как показано ниже 

  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;

У меня также есть файл с именем _countdownForm.scss для стилизации формы, и я включил в этот файл ниже 

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

ширина ввода формы должна была быть задана сеточной системой фундамента, которую я определяю в моем Main.jsx (нижняя часть) 

<div className="row">
        <div className="column small-centered medium-6 large-4">
          {props.children}
</div>

Я использую "foundation-sites": "6.4.4-rc1" и "реагировать": "^ 16.0.0". Github проекта https://github.com/rohan-paul/ReactCountdownTimer

1 Ответ

0 голосов
/ 30 апреля 2018

Никогда не возражайте .. Получил это решено ..

Мне пришлось настроить компонент Countdown.jsx, чтобы исправить это, а не Main.jsx »(и CSS-класс .coutdownForm, определенный в _countdownForm.scss, не оказал влияния на этом этапе приложения при решении этой проблемы, так как центрирование ввода формы был обработан в секции рендера компонента Countdown.jsx)

Итак, я просто изменил Countdown.jsx следующим образом:

FROM 

else {
        return <CountdownForm onSetCountdown={this.handleSetCountdown}/>;
      }

К * * +1010 

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

https://github.com/rohan-paul/ReactCountdownTimer/blob/master/app/components/Countdown.jsx

...