Jquery - How to make footer sticky to bottom position?

user5711656
October 4, 2024
92 views
2 votes
3 Answers

I am trying to make my footer sticky to the bottom of a section. I am using position: fixed, but it is still not working.

In other words, I have a section with a width of 30%. I want to add form elements in that section I also need to add a sticky button at the bottom of that section that only covers the 100% width of the section or 30% of page width.

Is that feasible?

body {
  height: 100vh
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1300;
  background: #ffffff;
  padding: 16px 42px;
  box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25);
  border-top: 1px solid #bebec1;
}

<div style="width:30%;height:100%;border:1px solid">
  <div class="MuiBox-root css-11b71wf" data-testid="create-contract-content">
    <div class="wrapper-container css-1rnkd8n MuiBox-root css-0">
      <div class="title-container css-1112he MuiBox-root css-0">
        <h2 class="MuiTypography-root MuiTypography-body1 css-1ecwa68-MuiTypography-root">Add New Contract</h2>
      </div>
      <form novalidate="">
        <div class="MuiGrid-root MuiGrid-container box css-crtrjo-MuiGrid-root">
        </div>
        <div class="fixed-footer css-imiwo4 MuiBox-root css-0">
          <div class="css-gg4vpm MuiBox-root css-0">
            <div>
              <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-wpz0ho-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" dpw-variant="secondary">CANCEL<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button>
              <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-14tsggr-MuiButtonBase-root-MuiButton-root" tabindex="0" type="submit" dpw-variant="primary">CREATE<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

update if I going with position relative and botton one position absolute. button goes up when scroll

Answers

You can achieve this layout. But to do this, you need to change layout of the footer. I provide updated code for it. But with my code, when you click the create button, it will not trigger submit of form. To solve the issue, you can do it in javascript.

document.getElementById('create-button').addEventListener('click', function() {
    document.getElementById('contract-form').submit();
});

body {
    height: 100vh
}

.fixed-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1300;
    background: #ffffff;
    padding: 16px 0;
    box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25);
    border-top: 1px solid #bebec1;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

<div style="width:30%;height:100%;border:1px solid; position: relative;">
    <div class="MuiBox-root css-11b71wf" data-testid="create-contract-content">
        <div class="wrapper-container css-1rnkd8n MuiBox-root css-0">
            <div class="title-container css-1112he MuiBox-root css-0">
                <h2 class="MuiTypography-root MuiTypography-body1 css-1ecwa68-MuiTypography-root">Add New Contract</h2>
            </div>
            <form id="contract-form" novalidate="">
                <div class="MuiGrid-root MuiGrid-container box css-crtrjo-MuiGrid-root">
                </div>
            </form>
        </div>
    </div>
    <div class="fixed-footer css-imiwo4 MuiBox-root css-0">
        <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-wpz0ho-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" dpw-variant="secondary">CANCEL<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span></button>
        <button id="create-button" class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-14tsggr-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button" dpw-variant="primary">CREATE</button>
    </div>
</div>

To make a sticky header or footer then you need to add position: sticky; to your classes and then set the distance from the top or the bottom to 0px, for example, if you want those elements to stick to the top or the bottom of the container, respectively.

In addition, I put an overflow scroll in the vertical direction with overflow-y: scroll;

However, I am not sure that making a sticky footer is the best way to approach the problem of putting buttons at the bottom of a container. You might also want to look at CSS flexbox or CSS grid layout.

body {}

h2 {
  margin: 0px;
}

.container {
  width: 30%;
  height: 100vh;
  border: solid 3px green;
  overflow-y: scroll;
}

.fixed-header {
  position: sticky;
  top: 0px;
  left: 0px;
  width: 100%;
  background: yellow;
}

.fixed-footer {
  position: sticky;
  bottom: 0px;
  background: pink;
  padding: 16px 0px;
}

<div class="container">
  <div class="fixed-header">
    <h2>
      Add New Contract
    </h2>
  </div>
  <form novalidate="">
    <div>
      <input /> 1<br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /> 2<br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /> 3<br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /> 4<br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /> 5<br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /> 6<br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /> 7<br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /><br/>
      <input /> 8<br/>
    </div>
    <div class="fixed-footer">
      <button type="button">CANCEL</button>
      <button type="submit">CREATE</button>
    </div>
  </form>
</div>

Hope it will fix your issues:

      body {
        height: 100vh;
        margin: 0;
        padding-bottom: 80px; /* Adjust this value based on your footer height */
      }
      .fixed-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1300;
        background: #ffffff;
        padding: 16px 42px;
        box-shadow: 0px -3px 4px rgba(0, 0, 0, 0.25);
        border-top: 1px solid #bebec1;
      }

    <div style="width: 30%; height: 100%; border: 1px solid; overflow-y: auto">
      <div
        class="MuiBox-root css-11b71wf"
        data-testid="create-contract-content"
      >
        <div class="wrapper-container css-1rnkd8n MuiBox-root css-0">
          <div class="title-container css-1112he MuiBox-root css-0">
            <h2
              class="MuiTypography-root MuiTypography-body1 css-1ecwa68-MuiTypography-root"
            >
              Add New Contract
            </h2>
          </div>
          <form novalidate>
            <div
              class="MuiGrid-root MuiGrid-container box css-crtrjo-MuiGrid-root"
            ></div>
          </form>
        </div>
      </div>
    </div>
    <div class="fixed-footer css-imiwo4 MuiBox-root css-0">
      <div class="css-gg4vpm MuiBox-root css-0">
        <div>
          <button
            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-wpz0ho-MuiButtonBase-root-MuiButton-root"
            tabindex="0"
            type="button"
            dpw-variant="secondary"
          >
            CANCEL
          </button>
          <button
            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium base-btn ,undefined css-14tsggr-MuiButtonBase-root-MuiButton-root"
            tabindex="0"
            type="submit"
            dpw-variant="primary"
          >
            CREATE
          </button>
        </div>
      </div>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – How to make footer sticky to bottom position?

Answers