I wanna make my horizontal buttons fill my modal view.
This is what I made, using this button classes: click here
HTML:
<div class="modal fade" id="usuario_info" abindex="-1" role="dialog" aria-labelledby="myInfoUser" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRbezqZpEuwGSvitKy3wrwnth5kysKdRqBW54cAszm_wiutku3R" name="aboutme" width="96" height="96" border="0" class="img-circle">
<h3 class="media-heading" id="bookId"></h3>
</center>
<br>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Subtitle</h3>
</div>
<p class="cuerpo-info-user">Something</p>
</div>
<button type="button" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-phone"></i></span>
Call him
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="fa fa-ban"></i></span>
More information
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-success">
<span class="btn-label"><i class="icon_check"></i></span>
Success
</button>
<button type="button button-infousuario" class="btn btn-labeled btn-danger">
<span class="btn-label"><i class="icon-cancel"></i></span>
Remove him
</button>
<button type="button" class="btn btn-labeled btn-danger button-infousuario">
<span class="btn-label"><i class="icon-trash"></i></span>
Remove everything
</button>
</dsiv>
</div>
</div>
</div><!-- End modal -->
My result:
I tried with:
.button-infousuario{
display:inline-block;
}
but not working.
Thanks for helping!
If I understood you correctly, you can make your buttons fill your modal view by setting their width: 100%. But the text will appear in the center of the button. To prevent that you can set text-align: left
.button-infousuario{
width: 100%;
text-align: left;
}
Related
Here I added 2 buttons on the header of the accordian, but when I click the button the entire accordian collapses or expands. Is there a way to add buttons to it in such a way that clicking them won't collapse or expand the accordion?
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
aria-controls="panelsStayOpen-collapseTwo">
<div>26-08-21</div>
<div style="margin-left: -20px;" class="col-1"></div>
<div>project_id</div>
<div class="col-3"></div>
<div>title</div>
<div class="col-3"></div>
</button>
<button type="button" class="btn btn-sm btn-success">
<em class="far fa-edit"></em> Edit
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="far fa-trash-alt"></i> Delete
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<br>
<button style="margin-left: 20px;" type="button" class="btn btn-sm btn-outline-primary">Download CSV</button>
</div>
</div>
</div>
With the on click of buttons, you need to use $event.stopPropagation()
public onButtonClick($event): void {
// Do something on click
$event.stopPropagation()
}
Question:
In the below sample code, we can see that each message has a unique MessageSid.
In the HTML code, I would like to set
data-target="#deleteModal" to data-target="#{{message.MessageSid}}"
and similarly
id="deleteModal" to id="{{message.MessageSid}}"
How can I do this? I would like each modal to be individual to each message.
MessageDetail Model
export class MessageDetail {
MessageSid: string;
Body: string;
Time: string;
Direction: string;
FromPhoneNumber: string;
ToPhoneNumber: string;
}
HTML code
<div id="listOfMessages" class="mt-5">
<div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
<img src="/assets/img/avatar.png" alt="Avatar">
<p>{{message.Body}}</p>
<button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" data-target="#deleteModal"><i class="fa fa-times"></i></button>
<span class="time-right">{{message.TimeCreated}}</span>
<!-- Confirm Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this message?</p>
<p>{{message.Body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Confirm Delete Modal-->
</div>
</div>
I have tried this solution on my own. But it seems only Modals 1,4,7 in the list work. The ones in between do not pop up when clicked.
<div id="listOfMessages" class="mt-5">
<div class="container" *ngFor="let message of messageList" [ngClass]="classDirection(message)">
<img src="/assets/img/avatar.png" alt="Avatar">
<p>{{message.Body}}</p>
<button class="btn btn-danger btn-circle btn-circle-sm m-1 float-right" data-toggle="modal" attr.data-target="#{{message.MessageSid}}"><i class="fa fa-times"></i></button>
<span class="time-right">{{message.TimeCreated}}</span>
<!-- Confirm Delete Modal -->
<div class="modal fade" id="{{message.MessageSid}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this message?</p>
<p>{{message.Body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="deleteMessage(message, $event)">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Confirm Delete Modal-->
</div>
</div>
You should do in the HTML:
...
<div [id]="'#' + message.messageSId"> </div>
...
Inside the tag you should do with [attr]="typeScriptExpression" (property binding), not with attr={{typeScriptExpression}} (interpolation)
Reference to study: https://angular.io/guide/template-syntax
Thank you. I figured out the issue. Some MessageSids began with numbers and apparently you cannot have a tag with an ID that begins with a number. Prefixing a character solved the issue.
I'm building a page that's supposed to display entries from a database in the form of textboxes, and each has a button that makes a call to the controller to delete that entry, based on its Id key. My boss then wanted me to add a modal to warn the user - your typical "Do you really want to...?"
To do so, I need to generate a modal codesnippet for each entry, and assign the relevant ids and data-targets automatically.
My current design looks like this:
#model System.Data.DataRow
<div class="input-group my-1">
<input type="text" class="form-control border-secondary tinybox" value="#Model[1]" name="ArtCategory">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary tinybox py-0" name="CatDelete" value="#Model[0]" data-toggle="modal" data-target="#("#" + Model[0] + "DeleteCategoryModal")">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="modal fade" id="#(Model[0] + "DeleteCategoryModal")">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Vill du verkligen radera denna kategori?</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Kategorinummer: #Model[0]
</div>
<!-- Modal footer -->
<div class="modal-footer">
#using (Html.BeginForm("DeleteCategory", "Backoffice", FormMethod.Post, new { id = Model[0] }))
{
<button type="submit" id="DeleteCategory" Name="CatDelete" value="#Model[0]" class="btn btn-dark">Bekräfta</button>
<script>
$('#DeleteArticle').click(function () {
$('#DeleteArticleModal').modal('hide');
});
</script>
}
<button type="button" class="btn btn-dark" data-dismiss="modal">Avbryt</button>
</div>
</div>
</div>
</div>
This code is submitted as a partialview and rendered a number of times. Model[0] is a numerical value. The idea is that the modals' id codes will be "3DeleteCategoryModal" for deleting category 3, etc.
The problem? The modals won't open. I click a button, nothing happens. For whatever reason, it can't find the modal segment with the right name. Curiously, when I wiew the compiled source code, it looks just fine:
<div class="col-12 px-1">
<div class="input-group my-1">
<input type="text" class="form-control border-secondary tinybox" value="Stuff" name="ArtCategory">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary tinybox py-0" name="CatDelete" value="3" data-toggle="modal" data-target="#3DeleteCategoryModal">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="modal fade" id="3DeleteCategoryModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Vill du verkligen radera denna kategori?</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Kategorinummer: 3
</div>
So. How do I make this work?
screenshot of the page
Hi, i'm losing my head trying to figure it out why this modal is shown like this. The code i followed was copied from the bootstrap website.
Here it is
<button type="button" class="btn btn-info btn-lg" (click)="showPerformedActivityModal()">Show Performed Activities</button>
<!--Modal -->
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"
[ngStyle]="{'display': myModalIsOpen ? 'block' : 'none', 'opacity': 5}">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<app-table [config]="config" [columns]="columns" [entity]="entity" [sort]="sort" [sortOrder]="sortOrder">
</app-table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="refreshResources()">Select Activities</button>
<button type="button" class="btn btn-default" (click)="closeModal()">Close</button>
</div>
</div>
</div>
</div>
</div>
This does the job : http://jsfiddle.net/sRmLV/1140/
You need to use new DIV and custom CSS, change the class 'modal-dialog-centered' by 'vertical-align-center'
HTML
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
CSS
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none;}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching
full width */
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events:all;}
Here is my code :
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2">
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
</div>
<div class="col-sm-9 col-md-10">
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</div>
</div>
<hr>
</div>
And Here is the fiddle.
https://jsfiddle.net/SimplytheVinay/0g8fm8u6/
I tried multiple combination of classes. Even setting the height of Label manually doesn't work. Somehow label is occupying more height than its size. Tried setting margins as well. No Luck.
Pretty new to web development, So correct me If I am missing anything.
You can set the H2 also for the button https://jsfiddle.net/7n0t19hr/
<div class="col-sm-9 col-md-10">
<h2>
<!-- Split button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Refresh">
<span class="glyphicon glyphicon-refresh"></span> </button>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default">
Mark all as read
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
Delete
</button>
</div>
</h2>
</div>
</div>
<hr>
</div>
The problem is that you are not closing the h2 tag.
<h2><span class="label label-primary" id="notify">Notifications</span><h2>
See. Fix that and you will be able to manipulate the height and padding or whatever.