Question

我正在为我的项目使用materializecss datepicker。但是问题是日期选择器样式在窗体内无法正常运行，但是时间选择器在正确运行。日期选择器的大小正在伸展。但是，除了日期选择器之外，表格还可以正常工作。在这种情况下我该怎么办。 此处的屏幕截图 Outside the form Inside the form 这是我的代码

我想要样式像表格的外部

 <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>

Answer 1

我认为您需要将容器选项设置为“ body”。至少，这为我解决了这个问题。

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

物化CSS Datepicker样式在窗体内无法正常工作

1 个答案: