Help: Element does not stick at the bottom and contents moving up when resized.

jamols09 commented 3 years ago

This is about Bulma.

I need help regarding the content of the div they compress going top whenever resized to smaller view and also the button does not stick to the end of the .content class.

Overview of the problem

This is about the Bulma Docs I'm using Bulma version [0.9.3] My browser is: Microsoft Edge

Description

Steps to Reproduce

scss

.inventory-options-page-wrapper {
  &.option-set-3,
  &.option-set-2,
  &.option-set-1 {
    //display
    display: flex;
    //alignments
    justify-content: center;
    //dimensions
    width: 100%;
    max-width: 540px;
    min-height: 560px;
    //spacing
    margin: 0 auto;

    .wrapper-outer {
      @include vuero-s-card();

      display: flex;
      padding: 0;
      border: 0;

      .set-3-wrapper,
      .set-2-wrapper,
      .set-1-wrapper {
        width: 100%;

        .set-inner {
          height: 100%;

          .content {
            @include vuero-s-card();

            padding: 40px;
            height: 100%;

            .description {
              height: 50px;
            }

            .buttons {
              margin: 0;
              margin-top: auto;
              display: flex;

              .button {
                max-width: 200px;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}

//overwrite form 2

.inventory-options-page-wrapper {
  &.option-set-2 {
    max-width: 840px;

    .wrapper-outer {
      .set-1-wrapper {
        .set-inner {
          .content {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }
      .set-2-wrapper {
        .set-inner {
          .content {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: 0;
          }
        }
      }
    }
  }
}

template

<div class="page-content-inner">
    <div class="inventory-options-page-wrapper option-set-2">
      <div class="wrapper-outer">
        <div class="set-1-wrapper">
          <div class="set-inner">
            <div class="content">
              <div class="logo columns is-centered">
                <div class="column">
                  <img
                    class="dark-image is-larger"
                    src="/@src/assets/illustrations/placeholders/promotion-dark.svg"
                    alt=""
                  />
                </div>
              </div>
              <div class="description columns is-centered">
                <div class="column has-text-centered">
                  <h6>Creates a product to be sold.</h6>
                </div>
              </div>
              <div class="title columns is-centered">
                <div class="column has-text-centered">
                  <h4>Individual</h4>
                </div>
              </div>
              <div class="buttons columns is-centered">
                <div class="column has-text-centered">
                  <V-Button
                    color="info"
                    :loading="isLoading"
                    raised
                    @click="accept"
                  >
                    Create
                  </V-Button>
                </div>
              </div>
            </div>
          </div>
        </div>
(...commented out 2nd form...)

Expected behavior

I wanted to stick the button to the end of the container even upon resizing and also stop all the content moving upside when being compressed so that the elements don't leave a huge gap. I've already tried solutions from https://stackoverflow.com/questions/63099883/bulma-flexbox-footer-not-sticking-to-the-bottom-of-the-page also this one https://stackoverflow.com/questions/53076202/stick-div-at-the-bottom-of-equally-height-cards

Sample behavior when compressed (As you can see all elements stays the same when compressed unlike the images below)

They don't work for me.

Actual behavior

Normal view Compressed (All elements gets compressed their height gets affected resulting in leaving huge gaps below the button

As you can see from here the button still has a lot of space

JamesonPrice14 commented 3 years ago

Unsubscribe

Best,

Jameson Price (404) 751-7644 @.***

On Fri, Sep 10, 2021 at 8:51 AM Oliver M. @.***> wrote:

This is about the Docs.

I need help regarding the content of the div they compress going top whenever resized to smaller view and also the button does not stick to the end of the .content class. Overview of the problem

This is about the Bulma Docs I'm using Bulma version [0.9.3] My browser is: Microsoft Edge Description Steps to Reproduce

scss

.inventory-options-page-wrapper { &.option-set-3, &.option-set-2, &.option-set-1 { //display display: flex; //alignments justify-content: center; //dimensions width: 100%; max-width: 540px; min-height: 560px; //spacing margin: 0 auto;
.wrapper-outer {
  @include vuero-s-card();

  display: flex;
  padding: 0;
  border: 0;

  .set-3-wrapper,
  .set-2-wrapper,
  .set-1-wrapper {
    width: 100%;

    .set-inner {
      height: 100%;

      .content {
        @include vuero-s-card();

        padding: 40px;
        height: 100%;

        .description {
          height: 50px;
        }

        .buttons {
          margin: 0;
          margin-top: auto;
          display: flex;

          .button {
            max-width: 200px;
            width: 100%;
          }
        }
      }
    }
  }
}
} }

//overwrite form 2

.inventory-options-page-wrapper { &.option-set-2 { max-width: 840px;
.wrapper-outer {
  .set-1-wrapper {
    .set-inner {
      .content {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
  .set-2-wrapper {
    .set-inner {
      .content {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
      }
    }
  }
}
} }

template

Creates a product to be sold.

Individual

Create

(...commented out 2nd form...) Expected behavior I wanted to stick the button to the end of the container even upon resizing and also stop all the content moving upside when being compressed so that the elements don't leave a huge gap. I've already tried solutions from https://stackoverflow.com/questions/63099883/bulma-flexbox-footer-not-sticking-to-the-bottom-of-the-page also this one https://stackoverflow.com/questions/53076202/stick-div-at-the-bottom-of-equally-height-cards Sample behavior when compressed [image: image] They don't work for me. Actual behavior Normal view [image: image] Compressed [image: image] As you can see from here the button still has a lot of space [image: image] — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub , or unsubscribe .

accpickatwu commented 2 years ago

i do in css is

.the-name {

bottom: 50px; witdh (what ever witdh) }

jgthms / bulma