Topic: MDBReact stepper
                  
                  Paul TP
                  free
                  asked 5 years 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
                        answered 5 years 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
 - Premium support: No
 - Technology: MDB React
 - MDB Version: 4.27.0
 - Device: Laptop
 - Browser: chrome
 - OS: Linux Fedora 32
 - Provided sample code: No
 - Provided link: No