I've been trying to customize a modal with a component passed as content. However, I can't seem to make it work. It just displayed a backdrop and the modal itself is not displaying. Watch this forked stackblitz code for more detail.
Basically I just need to customize the width of the modal. In the guide, it passed the content template reference as described in this section. But in my case, I am not passing a TemplateRef but a Component.
Remove the <ng-template let-modal> wrapper (and its closing half) from your NgbdModalContent's template.
#Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class NgbdModalContent {
#Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
Related
I am new to using Vue3 (composition API) with bootstrap 5 and came across a problem:
When I render a list, and pass each element as a prop as so:
<div :key="item.id" v-for="item in items">
<EditItem :item="item"/>
</div>
I can modify the props values just fine inside of EditItem.vue (the props are JSON objects), but when I am inside a modal I can only modify the values for the 1st index. My code looks something like this:
<script setup>
defineProps({
item: {
type: Object,
required: true
},
})
</script>
<template>
<!-- Let's me edit all items in list just fine -->
<input type='text' v-model="item.name">
<div> {{item.name}} </div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Edit Item
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<!-- Will only let me edit the first indexed list item -->
<label for="name" class="form-label">Item name</label>
<input type='text' class="form-control" id="name" placeholder="John Doe" v-model="item.name">
<div> {{ item.name }} </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
I think this happens due to the modal being treated as a different document/context so vue3 re-renders everything, so the indexing restarts from 1. I am not sure how to fix this issue, any help is appreciated. Thanks
Edit:
My problem is similar to the issue described in this question: How to show fresh bootstrap modal data when using Vue.js
However, it hasn't been answered properly and is from 2018
Edit 2:
Solved:
It was a simple fix, simply take the modal out of the v-for loop. Only have the button inside the loop. And yes, I realize you cannot edit the values of a prop inside of a child component. I simplified the code, as the code with the form I have is quite long due to the many fields in my JSON objects.
Props are readonly. To be able to edit array, you need to emit delete function where you have this array. Your "Lets me edit all items" not working too. It just edits a local variable, not an array.
This is how you make reusable form:
form.vue
<template>
<form #submit.prevent="$emit('onSubmit', data)">
<input type="text" v-model="data.name" />
<button type="submit">Save</button>
</form>
</template>
<script setup>
const props = defineProps({ item: { type: Object, required: true }})
const data = reactive(props.item)
defineEmits(['onSubmit'])
</script>
parent.vue
<template>
<form :item="item" #on-submit="editItem"></form>
</template>
<script setup>
function editItem(data) {
// Edit array here.
}
</stript>
I would like to add 3 spaces between two right align button. Is there any bootstrap solution for it without adding custom css?
I do this :
<div class="text-right">
<button class="btn-info btn">Log in</button>
<!-- Add 3 spaces between button -->
<button class="btn-info btn">Log Out </button>
</div>
Fiddle demo : http://jsfiddle.net/6816gq84/1/
You can add btn-toolbar class to the container div.
<div class="text-right btn-toolbar">
<button class="btn-info btn">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
Have a look here.
I do this rudimentary solution: How to add space between bootstrap buttons in same div?.
<div class="btn-group pull-right row">
<div class="col-md-3"><button class="btn btn-default" type="button">Clôturer</button></div>
<div class="col-md-1"></div>
<div class="col-md-3"><button class="btn btn-primary" type="button">Soumettre</button></div>
</div>
This also work fine for me:
<div style="display: flex ; justify-content: flex-end">
<button class="btn-info btn mr-3">Log in</button>
<button class="btn-info btn">Log Out </button>
</div>
I'm not sure any bootstrap solution already exists for what you want to do, but there are other way, depending what you mean by "custom css".
You can add a span balise for exemple and add an inline css defining the width to 3em (3 spaces). It's HTML/CSS but you don't modify the css of the button's class.
<div class="text-right">
<button class="btn-info btn">Log in</button>
<span style="width:3em;"> </span>
<button class="btn-info btn">Log Out </button>
</div>
I have a modal set up, using Bootstrap, which is working just fine. The modal brings up some text and an image. When I hover on the modal element, a button, there is a nice blue highlight that pops up, I'd like to keep that. The issue is, when I close the modal window the blue highlight stays on the button, I'd like to get rid of this.
I thought this CSS...
.modal-open .modal,
.btn:focus{
outline: none !important;
}
...would remove the highlight, but it I'm still left with the blue highlight after I close the modal. The following is the code for the modal...
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Some Title</h4>
</div>
<div class="modal-body">
<p>Some text about something, Some text about something, Some text about something.</p>
<a href='http://codepen.io'><img src='http://lorempixel.com/g/400/200'></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks in advance for any assistance.
This is by design and is important for accessibility. On close, modals should return focus to launching element. If the button wouldn't get it's focus back it would break keyboard/tabbed accessibility. Please refer to this github issue.
If you want to remove the glow, or blue "highlight" i recommend toggling an extra CSS class on modal show/hide. For example:
<button id="openButton" type="button" class="btn btn-info btn-lg btn-no-highlight" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
$(function(){
$('#myModal').on('hidden.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
$('#myModal').on('shown.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
});
.btn.btn-no-highlight {
background-color: #5bc0de;
border-color: #46b8da;
outline: none !important;
}
I have created a fiddle to demonstrate this: https://jsfiddle.net/e61r4ba3/
Try using this
$('#myModal').on('shown.bs.modal', function(e){
$('#myModaltrigger').one('focus', function(e){$(this).blur();});
});
My knowledge in ASP.NET is very limited, yet, I am building a UI/UX design for an application that will be built in ASP MVC and I've heard rumors of the following problem:
When a Boostrap modal fires a button event (onClick), it creates a postback which in turn, it refreshes the page, thus making it impossible for multiple bootstrap modals to work. Unless the modals do not require to interact with the back end, which means they would simply serve a client-side purpose.
I need to know how much of this is true and if there is a way to create a search or populate a bootstrap modal with information being entered in a second modal.
Unfortunately, I can't produce a working ASP code but I will produce the HTML portion of it so you have an idea.
Again, my question is, can I populate modal 1 with information entered in modal 2? Modal 2 is invoked from Modal 1. See the code and Demo for details
<div class="container">
<h1>Working with Multiple Modals</h1>
<div class="margin-lg">
<button type="button" class="btn-first-modal btn btn-primary btn-lg" data-toggle="modal" data-target="#first-modal">
Launch Modal
</button>
</div>
<div class="modal" id="first-modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">First Modal</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">My ID</label>
<input type="text" class="form-control" disabled/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal within-first-modal btn btn-primary">
Add ID
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="second-modal" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-second-modal-close close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">ID Generator</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-4">
<label class="label-control">Choose ID</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-second-modal-close btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
JS
var within_first_modal = false;
$('.btn-second-modal').on('click', function() {
if ($(this).hasClass('within-first-modal')) {
within_first_modal = true;
$('#first-modal').modal('hide');
}
$('#second-modal').modal('show');
});
$('.btn-second-modal-close').on('click', function() {
$('#second-modal').modal('hide');
if (within_first_modal) {
$('#first-modal').modal('show');
within_first_modal = false;
}
});
$('.btn-toggle-fade').on('click', function() {
if ($('.modal').hasClass('fade')) {
$('.modal').removeClass('fade');
$(this).removeClass('btn-success');
} else {
$('.modal').addClass('fade');
$(this).addClass('btn-success');
}
});
DEMO
This would let you make a request to the server and do something with the information that you get back.
$(".btn-second-modal").on("click", function () {
$.ajax({
url: "/urltoserver/action/",
cache: false
}).done(function (data) {
// SET YOUR FIRST MODAL PROPERTIES
// HIDE YOUR SECOND MODAL
// SHOW YOUR FIRST MODAL
});
});
I'm having trouble with displaying the modal for the specific image clicked on to view.
If i use a link with a class it will show all of the images in that album in seperate modals (have to close them all down). I want to show the appropriate modal for the image that I click "view" on so that it is corresponding.
If i set this to id and create an id in the top div it will display the first image in the album only, no matter what image i click on.
How could I solve this?
<a class="btn btn-link" href=".modal" data-toggle="modal"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<!--This is for the 360 viewer-->
<?php echo '<img src="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'"/>'?>
<!--360 viewer end-->
</div>
<div class="modal-footer">
<?php echo '<a class="btn btn-link" href="uploads/', $image["album"], '/', $image["id"], '.', $image["ext"],'">Download</a>'?>
</div>
</div>
One way to approach this is to store the various unique data components on each of the links and then have a generic handler which will load that data into the relevant elements of a single modal.
For instance, something along the lines of:
HTML
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/01.jpg" data-download="uploads/album/01.jpg"><i class="icon-fullscreen"></i> View</a>
<a class="btn btn-link" href="#imageModal" data-toggle="modal" data-image="uploads/album/02.jpg" data-download="uploads/album/02.jpg"><i class="icon-fullscreen"></i> View</a>
<!--POP OVER OF IMAGE-->
<div id="imageModal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Pansnap</h3>
</div>
<div class="modal-body">
<img id="snap"/>
</div>
<div class="modal-footer">
<a id="download" class="btn btn-link">Download</a>
</div>
</div>
Where you could load each image's data into the data attributes via PHP.
JS
$(document).on('click.modal.image-data', '[href=#imageModal]', function () {
$('#snap').attr('src',$(this).data('image'))
$('#download').attr('href', $(this).data('download'))
})
This will load the appropriate data in the modal elements.
JSFiddle