MDBReact stepper


Topic: MDBReact stepper

Paul TP asked 10 months ago

I have implemented stepper within a form and it works fine. Is it feasible to change horizontal display to vertical display on small devices or when viewing on small devices?

handleStepper = () => {
    const { formActivePanel1, swapFormActive } = this.props;
    return (
      <MDBStepper form>
          <MDBStep form>
              <a onClick={() => swapFormActive(1)(1)}>
                  <MDBBtn
                      color={formActivePanel1 === 1 ? 'indigo' : 'default'}
                      circle
                  >
                      1
                  </MDBBtn>
              </a>
              <p>Test 1</p>
          </MDBStep>
          <MDBStep form>
              <a onClick={() => swapFormActive(1)(2)}>
                  <MDBBtn
                      color={formActivePanel1 === 2 ? 'indigo' : 'default'}
                      circle
                  >
                      2
                  </MDBBtn>
              </a>
              <p>Test 2</p>
          </MDBStep>
          <MDBStep form>
              <a onClick={() => swapFormActive(1)(3)}>
                  <MDBBtn
                      color={formActivePanel1 === 3 ? 'indigo' : 'default'}
                      circle
                  >
                      3
                  </MDBBtn>
              </a>
              <p>Test 3</p>
          </MDBStep>
          <MDBStep form>
              <a onClick={() => swapFormActive(1)(4)}>
                  <MDBBtn
                      color={formActivePanel1 === 4 ? 'indigo' : 'default'}
                      circle
                  >
                      4
                  </MDBBtn>
              </a>
              <p>Test 4</p>
          </MDBStep>
          <MDBStep form>
              <a  onClick={() => swapFormActive(1)(5)}>
                  <MDBBtn
                      color={formActivePanel1 === 5 ? 'indigo' : 'default'}
                      circle
                  >
                      5
                  </MDBBtn>
              </a>
              <p>Test 5</p>
          </MDBStep>
      </MDBStepper>
    );
  }

Jakub Chmura staff premium answered 10 months ago

Hi @Paul TP,

Sorry, it's impossible. You can try to overwrite CSS to achieve what you want but we do not support these changes.

Best, Kuba


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: React
  • MDB Version: 4.27.0
  • Device: Laptop
  • Browser: chrome
  • OS: Linux Fedora 32
  • Provided sample code: No
  • Provided link: No
Tags