MDBStepper doesn&#039;t automatically resize with conten

Topic: MDBStepper doesn't automatically resize with content changes

Jean-Philippe Steinmetz free asked 1 year ago

Expected behavior

When the content contained in MDBStepperContent exceeds the original size of the container due to dynamic additions, it should automatically resize to fit the new contents.

Actual behavior

The component doesn't resize and crops off the content.

Resources (screenshots, code snippets etc.)

Stepper before addition of dynamic content additions. enter image description here

Stepper after addition of content additions. enter image description here

Resizing the window forces a redraw of MDBStepper that fixes the issue. enter image description here

Krzysztof Wilk staff commented 1 year ago

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

Jean-Philippe Steinmetz free commented 1 year 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>

<pre class="prettyprint"><code><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>
</code></pre>

Please insert min. 15 characters.

Wojciech Staniszewski staff commented 1 year ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

User: Free
Premium support: No
Technology: MDB React
MDB Version: MDB5 1.3.0
Device: All
Browser: All
OS: All
Provided sample code: No
Provided link: No

Jean-Philippe Steinmetz

55Support score
5Questions 3Answers 0Snippets