web-dev-qa-db-ja.com

反応日付ピッカーの入力幅は100％に調整されません

私はreact-datepicker入力ボックスの幅を調整しようとしていますが、意外にもそこにはほとんど情報がなく、その幅に影響を与えることができません。入力幅をそれを含むdivの100％にしたいと思います。

予想される行動

幅は、その親コン​​テナーの幅に拡張する必要があります。

私の反応日付ピッカー

<div className="myContainer">
  <DatePicker
    className="myDatePicker"
    fixedHeight
    readOnly={true}
    isClearable={false}
    placeholderText="End date"
    selected={this.props.defaultValue}
    onChange={(date) => this.props.handleDateChange(date)}
  />
</div>

予想される行動

次の場合、myDatePickerは親のmyContainerと同じ幅になりますが、幅は変更されません。

.myContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 1 0px;
}

.myDatePicker {   
  width: 100%;  // note: if I change this value to a fixed value (such as 500px) then the width is effected
}

最も近い代替の試み

最も近い試みはこれでしたが、ポップアップの幅にも影響を及ぼし、画面全体の長さを超えて伸びるため、これは解決策としても機能しません。

.myContainer div {
  width: 100%;
}

実際の行動

幅に特定のpx値が設定されていない限り、日付ピッカーは同じ長さのままです。

react-datepickerの入力幅を100％に設定する方法を誰かが理解していますか？

[〜＃〜] edit [〜＃〜]典型的なinputフィールドのように機能しない理由は、react-datepickerはinputであり、独自のスタイルを持つ（またはそれらに欠けている）他のdivの内部に深く埋め込まれています enter image description here

EDIT＃2：ここに問題を示すコードペンがあります- https://codepen.io/anon/pen/bjxENG

cssreactjsreact-datepicker
7
Rbar

私は同じ問題を抱えており、Rbarの回答のおかげでそれを解決しました。

DatePickerコンポーネントをカスタムコンテナーでラップします。次に、以下のように、そのコンテナとその子に幅を割り当てます。

import "./customDatePickerWidth.css";

<div className="customDatePickerWidth">
   <DatePicker dateFormat="dd/MM/yyyy" />
</div>

CustomDatePickerWidth.css内：

.customDatePickerWidth, 
.customDatePickerWidth > div.react-datepicker-wrapper, 
.customDatePickerWidth > div > div.react-datepicker__input-container
.customDatePickerWidth > div > div.react-datepicker__input-container input {
   width: 100%;
}
2
Ilyas Assainov

フレックス項目が縮小しないようにするには、フレックス縮小係数を0に設定します。

.myContainer .myItem {flex-shrink：0; }

.myContainer {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: 1 1 0px;
}

.myDatePicker {   
  width: 100%; 
}
<div class="myContainer">
  <input class="myDatePicker">
</div>

上記のスニペットは正常に機能するため、CSSまたは足場を妨害する他のコードが存在する必要があります。

0
Mosè Raguzzini

これは私のhtmlです

<div class="container">
    <div>
        <div class="react-datepicker-wrapper">
            <div class="react-datepicker__input-container">
                <input class="form-control" type="text" value="">
            </div>
        </div>
    </div>
</div>

反応日付ピッカーの周りにラッパーdivを使用し、特定のcssセレクターを使用して、ラッパーdivの反応日付ピッカーが入力の周りに適用され、divが幅100％になるように追加しました

これは、上記のスニペットをラップするdivに適用されるcssセレクターです

.container > div, 
.container > div > div.react-datepicker-wrapper, 
.container > div > div > div.react-datepicker__input-container {
  width: 100%;
}

その結果、入力ボックスの幅は100％に拡大されますが、ポップアウト日付ピッカーボックスは同じ幅のままです。

0
Infinity
//html file
  <div className="customDatePickerWidth">
              <DatePicker
                placeholderText="Select Schedule Date"
             />
  </div>

//css file    
.customDatePickerWidth, 
    .customDatePickerWidth > div.react-datepicker-wrapper, 
    .customDatePickerWidth > div > div.react-datepicker__input-container
    .customDatePickerWidth > div > div.react-datepicker__input-container input {
       width: 100%;
       height: 100%;
    }
    .react-datepicker__input-container  {
        width: inherit;
        height: inherit;
      }
      .react-datepicker__input-container input {
        width: inherit;
        height: 100%;
      }

      .react-datepicker-wrapper {
        width: 100%;
      }
0
user11304031

スタイル付きコンポーネントの使用

import styled from 'styled-components';
const DatePickerStyled = styled.div`
  /* STYLE FOR WITH */
  .react-datepicker-wrapper {
    width: 100%;
  }
`;

コンポーネントを囲みます

<DatePickerStyled>
  <DatePicker dateFormat="dd/MM/yyyy" />
</DatePickerStyled>
0
Xyox