Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class?
.btn.btn-primary {
display: none;
}Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal would impact other modals as well. Using <style scoped> doesn't produce any changes either. The b-modal methods are also not suitable for my custom modal implementation. Are there any alternate solutions or a more effective approach to hiding the save button using CSS?
The code snippet of the Modal HTML structure:
<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>