css Question posted in
Some basic documentation can be found here.

Css – How to change the appearance of just one button that is part of a larger class?

I would like to hide the save button in a Vue Modal, but when I access the button like so,

.btn.btn-primary {
    display: none;
}

It changes the appearance of every .btn-primary. It doesn’t work to specify .modal on the styling because I have other modals that will also lose their buttons. If I use <style scoped> nothing is changed. Additionally, I have tried using the b-modal methods, but they do not work because my modal is utilizing a different set of standards and is not a b-modal. Does anyone have any ideas that I haven’t tried or a better way to implement css to hide the save button?

The Modal HTML:

<template>
    <modal class="modal" :modal-id="modalId" :title="modalTitle" :preloader="preloader" @close-modal="closeModal" :ok-disabled="true">
        <template slot="body">
            <app-overlay-loader v-if="preloader" />
            <div class="form-group row">
                <div class="col-sm-8">
                    <label class="description">
                        <div class="font-weight-bold"> {{ $t('Description') }} </div>
                        <span class="fs-6 text-secondary"> Articulos de accion que se complo hoy </span>
                        <div class="mt-2"> {{ description }}</div>
                    </label>
                </div>
                <div class="form-group row align-items-center col-sm-4">
                    <label class="location">
                        <div class="font-weight-bold mb-4"> {{ $t('Ubicación') }} </div>
                        <div class=""> {{ location }}</div>
                    </label>
                </div>
            </div>
        </template>
    </modal>
</template>
Tags:

2

Answers


  1. 0 
    #modal-id .btn.btn-primary {
    display: none;
}

    You can use modal’s ID like above style.

    Login or Signup to reply.
  2. 0

    This doesn’t work unless you assign modal-id to the HTML attribute id

    An easy way to approach this is to either assign it to the id like :id="modal-id"
    and then using CSS

    #modal-id .btn.btn-primary {
    display: none;
}

    or attach a custom modal class like :class="'modal ' + modal-class"
    and then using CSS to target that modal class

    .modal-class .btn.btn-primary {
    display: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search