Unable to center select list and paginator inside bootstrap-vue column in modal footer

user_391054 0
Viewed 253

I'm attempting to align some items inside the footer scoped slot inside a bootstrap-vue modal, and for some reason no matter what I try, I cannot get my content in one column to move to the right

          <template #modal-footer="{ ok, cancel }">
              <div class="row w-100">
                  <div class="col-9 text-right border border-primary">
                    <b-form inline class="d-flex">
                      <b-form-select class="justify-content-end"
                          v-model="perPage"
                          :options="pagerSelectOptions"
                      >
                      </b-form-select>

                      <b-pagination
                          v-model="currentPage"
                          :total-rows="totalRows"
                          :per-page="perPage"
                          size="md"
                          hide-goto-end-buttons
                      ></b-pagination>
                    </b-form>
                  </div>
                  <div class="col-3 text-right border border-primary">
                      <b-button class="mr-4"
                          :disabled="restoreButtonDisabled"
                          dusk="deleted-pursuit-restore-ok-button"
                          variant="primary"
                          @click="restore"
                      >
                        <b-spinner
                            v-if="loading"
                            small
                            type="grow"
                        >
                        </b-spinner>
                        {{ restoreButtonText }} <b-badge
                            v-if="selectedPursuits.length > 0"
                            variant="outline-primary"
                        >{{ selectedPursuits.length }}
                          </b-badge>
                      </b-button>
                      <b-button
                          :disabled="loading"
                          @click="cancelModal"
                          dusk="deleted-pursuit-restore-cancel-button"
                      >
                        Cancel
                      </b-button>
                  </div>
              </div>
          </template>

Here is how it looks now (border is there just to highlight the columns). enter image description here

All I want is to center the select and page within the left column. I have tried every justify variant and other class options, but I cannot get the items to budge. What do I need to do to get the items centered in the column?

bootstrap-modal bootstrap-4 vue.js footer css
1 Answers

I think the problem is that the ul in bootstrap-vue pagination has a margin that overrides the previous props. You could fix that by setting the pagination margin to 0 (i.e. m-0 bootstrap way) and apply the margin/padding manually to other elements to make it look good. So, something like this:

<template #modal-footer="{ ok, cancel }">
    <div class="row mx-2">
        <div class="col-9 text-right border border-primary d-flex justify-content-center py-2">
            <b-form inline>
                <b-form-select class="justify-content-end"
                               v-model="perPage"
                               :options="pagerSelectOptions"
                >
                </b-form-select>

                <b-pagination
                    class="m-0"
                    v-model="currentPage"
                    :total-rows="totalRows"
                    :per-page="perPage"
                    size="md"
                    hide-goto-end-buttons
                ></b-pagination>
            </b-form>
        </div>
        <div class="col-3 text-right border border-primary border-left-0 py-2">
            <b-button class=""
                      :disabled="restoreButtonDisabled"
                      dusk="deleted-pursuit-restore-ok-button"
                      variant="primary"
                      @click="restore"
            >
                <b-spinner
                    v-if="loading"
                    small
                    type="grow"
                >
                </b-spinner>
                {{ restoreButtonText }}
                <b-badge
                    v-if="selectedPursuits.length > 0"
                    variant="outline-primary"
                >{{ selectedPursuits.length }}
                </b-badge>
            </b-button>
            <b-button
                :disabled="loading"
                @click="cancelModal"
                dusk="deleted-pursuit-restore-cancel-button"
            >
                Cancel
            </b-button>
        </div>
    </div>
</template>
user_25684690
Related