MDBStepper doesn't automatically resize with content ch

Krzysztof Wilk staff commented 3 years ago

Thanks for reporting that. Could you share your code with me? It'll be helpful to solve the issue :)

Jean-Philippe Steinmetz commented 3 years ago

<MDBStepper>
    <MDBStepperForm linear>
        <MDBStepperStep itemId={WizardSteps.TITLE}>
            <MDBStepperHead text="Title" />
            <MDBStepperContent>
                <h5>What is the title of your event?</h5>
                <MDBInput id="title" label="Title" onChange={this.onChange} value={event.title} required validation='invalid' invalid />
                <br/>
                <h5>Provide a brief summary your event in one or two paragraphs.</h5>
                <MDBInput id="summary" label="Summary" onChange={this.onChange} textarea value={event.summary} required validation='invalid' invalid />
            </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep itemId={WizardSteps.START_DATE}>
            <MDBStepperHead text="Start Date/Time" />
            <MDBStepperContent>
                <h3>When will the event take place?</h3>
                <MDBDatepicker
                    id="startTime"
                    label="Date of Event"
                    btnIcon
                    inputStyle={{width: '22rem'}}
                    setValue={(value) => {
                        this.onDateChange("startTime", value);
                        this.onDateChange("endTime", value);
                    }}
                    value={dayjs(event.startTime).format('DD/MM/YYYY')}
                />
                <br/>
                <MDBTimepicker
                    id="startTime"
                    label="Date of Event"
                    btnIcon
                    defaultValue={dayjs(event.startTime).format('HH:mm')}
                    format='24h'
                    getValue={(value) => {
                        this.onTimeChange("startTime", value);
                        this.onTimeChange("endTime", dayjs(value, 'HH:mm', true).add(2,'h').startOf('hour').format('HH:mm'));
                    }}
                />
            </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep itemId={WizardSteps.END_DATE}>
            <MDBStepperHead text="End Date/Time" />
            <MDBStepperContent>
                <h3>When will the event finish?</h3>
                <MDBSwitch
                    defaultChecked
                    id="hasEndTime"
                    onChange={(evt) => {
                        const { event } = this.state;
                        event.endTime = evt.target.checked ? event.endTime : undefined;
                        this.setState({
                            ...this.state,
                            event,
                            showEndTime: evt.target.checked,
                        });
                    }}
                />
                {this.state.showEndTime && (
                <section>
                    <MDBDatepicker
                        id="endTime"
                        label="End Date"
                        btnIcon
                        inputStyle={{width: '22rem'}}
                        setValue={(value) => { this.onDateChange("endTime", value) }}
                        value={dayjs(event.endTime).format('DD/MM/YYYY') || dayjs(event.startTime).format('DD/MM/YYYY')}
                    />
                    <br/>
                    <MDBTimepicker
                        id="endTime"
                        label="End Time"
                        btnIcon
                        defaultValue={dayjs(event.endTime).format('HH:mm')}
                        format='24h'
                        getValue={(value) => {
                            this.onTimeChange("endTime", value);
                        }}
                    />
                </section>
                )}
                {!this.state.showEndTime && "The event has no end."
                }
            </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep itemId={WizardSteps.VENUE}>
            <MDBStepperHead text="Venue" />
            <MDBStepperContent>
                <h5>Where will this event take place?</h5>
                <EntityIdInput
                    id="requires"
                    defaultValue={event.requires}
                    placeholder="Venue title"
                    propName="title"
                    service={ProductService}
                    onChange={(evt) => {
                        this.onChange(evt);
                    }}
                />
            </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep itemId={WizardSteps.DESCRIPTION}>
            <MDBStepperHead text="Description" />
            <MDBStepperContent>
                <MDBScrollbar>
                    <h5>Provide a complete description of your event.</h5>
                    <RichTextEditor
                        id="description"
                        label="Description"
                        onChange={this.onChange}
                        style={{ height: '80vh' }}
                        textarea
                        value={event.description}
                    />
                </MDBScrollbar>
            </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep itemId={WizardSteps.ARTISTS}>
            <MDBStepperHead text="Artists" />
            <MDBStepperContent>
                <h5>Which users will perform the event?</h5>
                <UserIdInput id="artists" defaultValue={event.artists} onChange={this.onChange}/>
                <br/>
                <h5>Which users will produce the event?</h5>
                <UserIdInput id="producers" defaultValue={event.producers} onChange={this.onChange}/>
                <br/>
                <h5>Which users will promote the event?</h5>
                <UserIdInput id="promoters" defaultValue={event.promoters} onChange={this.onChange}/>
                <br/>
                <h5>Which users will VJ for the event?</h5>
                <UserIdInput id="vjs" defaultValue={event.vjs} onChange={this.onChange}/>
            </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep itemId={WizardSteps.ASSETS}>
            <MDBStepperHead text="Assets" />
            <MDBStepperContent>
                <h5>Please enter the media assets to use for the listing.</h5>
                <MDBTable style={{ height: '100%' }}>
                    <MDBTableHead>
                        <tr>
                            <th scope='col'>Cover Images</th>
                            <th scope='col'>Preview</th>
                        </tr>
                    </MDBTableHead>
                    <MDBTableBody style={{ height: '100%' }}>
                        <tr>
                            <td style={{ width: '75%' }}><MDBInput id="cover.hero" label="Hero Image URL" onChange={this.onChange} value={event.cover.hero} required validation='invalid' invalid /></td>
                            <td>{event.cover && event.cover.hero && <MDBCardImage src={event.cover.hero} style={{ height: '100px' }}/>}</td>
                        </tr>
                        <tr>
                            <td style={{ width: '75%' }}><MDBInput id="cover.landscape" label="Landscape Image URL" onChange={this.onChange} value={event.cover.landscape} required validation='invalid' invalid/></td>
                            <td>{event.cover && event.cover.landscape && <MDBCardImage src={event.cover.landscape} style={{ height: '100px' }}/>}</td>
                        </tr>
                        <tr>
                            <td style={{ width: '75%' }}><MDBInput id="cover.square" label="Square Image URL" onChange={this.onChange} value={event.cover.square} required validation='invalid' invalid/></td>
                            <td>{event.cover && event.cover.square && <MDBCardImage src={event.cover.square} style={{ height: '100px' }}/>}</td>
                        </tr>
                        <tr>
                            <td style={{ width: '75%' }}><MDBInput id="cover.portrait" label="Portrait Image URL" onChange={this.onChange} value={event.cover.portrait} required validation='invalid' invalid/></td>
                            <td>{event.cover && event.cover.portrait && <MDBCardImage src={event.cover.portrait} style={{ height: '100px' }}/>}</td>
                        </tr>
                        <tr>
                            <td style={{ width: '75%' }}><MDBInput id="cover.mini" label="Mini Image URL" onChange={this.onChange} value={event.cover.mini} required validation='invalid' invalid/></td>
                            <td>{event.cover && event.cover.mini && <MDBCardImage src={event.cover.mini} style={{ height: '100px' }}/>}</td>
                        </tr>
                    </MDBTableBody>
                </MDBTable>
                <h6>Detail Slideshow</h6>
                {slideshow}
                <MDBBtn
                    id={slideshow.${event.slideshow.length}}
                    value=''
                    onClick={() => this.onChange({
                        target: {
                            id: slideshow.${event.slideshow.length},
                            value: ''
                        }
                    })}>
                    <MdAdd size="20"/>
                </MDBBtn>
            </MDBStepperContent>
        </MDBStepperStep>
        <MDBStepperStep itemId={WizardSteps.FINISH}>
            <MDBStepperHead text="Finish" />
            <MDBStepperContent>
                <div style={{ float: 'right' }}>
                    <MDBBtn disabled={loading} onClick={() => this.onSubmit()} rounded>
                        {loading &&
                        <section>
                            <MDBSpinner size='sm' role='status' tag='span' className='me-2'/>
                            Creating...
                        </section>
                        }
                        {!loading && 'Create'}
                    </MDBBtn>
                </div>
                <br/>
                <h5>Listing Preview</h5>
                <EventProductEditor readonly={true} entity={this.state.event}/>
                <div style={{ float: 'right' }}>
                    <MDBBtn disabled={loading} onClick={() => this.onSubmit()} rounded>
                        {loading &&
                        <section>
                            <MDBSpinner size='sm' role='status' tag='span' className='me-2'/>
                            Creating...
                        </section>
                        }
                        {!loading && 'Create'}
                    </MDBBtn>
                </div>
            </MDBStepperContent>
        </MDBStepperStep>
    </MDBStepperForm>
</MDBStepper>

Wojciech Staniszewski staff commented 3 years ago

We will fix this bug in this or the next release. Sorry for the inconvenience.

jammerxd2 pro premium priority commented a year ago

A year later and this still isn't fixed. Which release was this fixed in?