материализация css стиль datepicker не работает правильно внутри формы - PullRequest
Новая
       32

материализация css стиль datepicker не работает правильно внутри формы

0 голосов
/ 18 января 2020

Я использую материализовать css DatePicker для моего проекта. Но проблема заключается в том, что стилирование указателя даты не работает правильно внутри формы, а средство выбора времени работает правильно. Размер DatePicker растягивается. Но за пределами формы DatePicker работает правильно. Что мне делать в этой ситуации. Снимки экрана здесь За пределами формы Внутри формы Вот мой код

Я хочу стилизацию как снаружи форма 

 <form action="" className="col s12 m6 l6" onSubmit={this.handleSubmit}>
                    <h5 className="pink-text">Register New Renter</h5>
                    <div className="row">
                        <div className="input-field col s12 m6">
                            <label htmlFor="firstName">First Name</label>
                            <input type="text" id="firstName" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="lastName">Last Name</label>
                            <input type="text" id="lastName" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="address">Address</label>
                            <input type="text" id="address" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <select defaultValue="Choose your option" id="assignedFlatNo" onChange ={this.handleChange}>
                            <option value={null}>Select Flat</option>
                                {this.props.houses[id].flatNames.map((name) => {
                                    return <option key={name} value={name}>Flat: {name}</option>
                                })
                                }
                            </select>
                            <label>Select Flat</label>
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="phoneNo">Phone Number</label>
                            <input type="text" id="phoneNo" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="advanceAmount">Advance Amount</label>
                            <input type="text" id="advanceAmount" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="rentPerMonth">Rent Per Month</label>
                            <input type="text" id="rentPerMonth" onChange={this.handleChange} />
                        </div>
                        <div className="input-field col s12 m6">
                            <label htmlFor="rentDate">Date of Rent</label>
                            <input type="text" id="rentDate" className="datepicker" />
                        </div>

                    </div>

                    <div className="input-field col s12 m6">
                        <button className="btn pink lignten-1 z-depth-0">Create</button>
                    </div>
                </form>

1 Ответ

0 голосов
/ 03 февраля 2020

Я думаю, вам нужно установить опцию контейнера в 'body'. По крайней мере, это решило проблему для меня. 

M.Datepicker.init(input, {
    container: 'body'
});
...