Learner Question: Having trouble keeping a couple of buttons in place (SPFX, React, JSX)

Question

I have a Parent class component and a child. The child is going to be a footer component within a <Modal /> (MS Fabric UI). The problem is that the prev and next buttons which I'm attempting to keep static at the bottom of the modal, move in relation to the content in the modal. To elaborate, they hug the bottom of the lowest field of whatever page they are on, so when pages are changed, they jump up and down. I want them fixed. I've managed to do this on another web part I made but because this is a modal I think it's slightly different in regards to the div blocks and CSS.

The <Footer />component is within a div block that houses the <Modal /> and a div block that houses the entire render(). There is no styling CSS on either of the 2 housing <divs>. The form that I have created allows a user to click on an item and then this shows the modal with the items details. The modal has several pages which can be changed with prev/next button. These are the buttons that I want to fix. This description is necessary for you to understand how the JSX is laid out.

I don't want to use position: fixed or absolute, for obvious reasons.

Below is the end of the render, I'm not sure if this is enough for you to understand....

       <div className={styles.footerContainer}>
          <Footer 
              handler={this.handler}
              CurrentStep={this.state.CurrentStep}
          />
       </div>
     </Modal>
   </div> 
  </div>   
  );
 }

Here's the footer render:

export class Footer extends React.Component<any, any > {
    public render():  React.ReactElement<{}> {
        return (
           <div>
              <div className={styles.previousButtonContainer}>
                <DefaultButton className={styles.previousButton}
                    disabled={false}
                    checked={true}
                    text="Previous"
                    onClick={this._prev}
                  />
            </div>
         <div className={styles.nextButtonContainer}>
               <DefaultButton className={styles.nextButton}
                    disabled={false}
                    checked={true}
                    text="Next"
                    onClick={this._next}
               />  
          </div> 
        </div> 

And here's the footers styling (the entire webparts styling comes from one CSS file):

.footerContainer{
    display: flex;
    position: relative;
    justify-content: space-evenly;
    bottom: 0%;
    height: 60px;
    flex-grow: 0;
    overflow: hidden;
    }
    .nextButtonContainer{
      float: right;
    }
    .nextButton {
      position: relative;  
      border-radius: 8px;   
    }
    .previousButtonContainer {
      float: left;
    }
    .previousButton {
      position: relative;  
      border-radius: 8px;
    }

Sorry if this isn't enough info.

Answer 1

This related to CSS inherit usually.

Try to add custom CSS out side of webpart contanier.

For example:

import * as React from 'react';
import styles from './ReactSpfx.module.scss';
import { DefaultButton } from 'office-ui-fabric-react';

export default class Footer extends React.Component {
    render() : React.ReactElement{
        return (
            <div>
            <div className={styles.previousButtonContainer}>
              <DefaultButton className={styles.previousButton}
                  disabled={false}
                  checked={true}
                  text="Previous"
                  //onClick={this._prev}
                />
          </div>
       <div className={styles.nextButtonContainer}>
             <DefaultButton className={styles.nextButton}
                  disabled={false}
                  checked={true}
                  text="Next"
                  //onClick={this._next}
             />  
        </div> 
      </div> 
      );
    }
}

Parent component

<Modal          
              titleAriaId={this._titleId}
              subtitleAriaId={this._subtitleId}
              isOpen={showModal}
              onDismiss={this._closeModal}
              isModeless={true}
              containerClassName={contentStyles.container}
                    >          
              <div >

              <div className={contentStyles.header}>
            <span id={this._titleId}>Lorem Ipsum</span>
            <IconButton
              styles={iconButtonStyles}
              iconProps={{ iconName: 'Cancel' }}
              ariaLabel="Close popup modal"
              onClick={this._closeModal as any}
            />
          </div>
              <div id={this._subtitleId} className={contentStyles.body}>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in
                  leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum
                  vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a
                  odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus,
                  maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat
                  eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend
                  efficitur.{' '}
                </p>
              </div>
              </div>
              <Footer />
            </Modal>

.module.scss

.webpartcontaner{
 web part css
}
.footerContainer{
  display: flex;
  position: relative;
  justify-content: space-evenly;
  bottom: 0%;
  height: 60px;
  flex-grow: 0;
  overflow: hidden;
  }
  .nextButtonContainer{
    float: right;

  }
  .nextButton {
    position: relative;  
    border-radius: 8px;          
  }
  .previousButtonContainer {
    float: left;

  }
  .previousButton {
    position: relative;  
    border-radius: 8px;

  }

Sample test demo: