I have two seperated buttons that have created, but they closely packed to another there is no space in between i have tried to use ml-auto. There is not much difference on the UI side and need some help around it.
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group row">
<div class="col-xs-3 ml-auto">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>
First of all I think both of your buttons need to sit inside a .row element. Right now they are on different rows. Then you can apply a class like .mr-2 (margin right of 2 units, or increase the number if you want more) to the first button wrapper. Then you will have some spacing between your buttons.
<div class="row">
<div class="form-group">
<div class="col-xs-3 mr-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<a class="btn btn-large btn-success" id="viewCourse" href="#Url.Action("ViewCourses", "Home")">View Grades</a>
<script type="text/javascript">
$('#ViewCourses').on('click', function (e) {});
</script>
</div>
</div>
</div>
You can see a working solution here: https://codepen.io/razvan-tudosa/pen/YzqvQVm
More info about how to space stuff you can find in the twitter bootstrap docs: https://getbootstrap.com/docs/4.5/utilities/spacing/
Related
I have a button which toggles a modal window i would like the button to get the current Model.ID of it item that the button is attached to then pass that Model.ID into the window i would like to do this without using JavaScript.
At the moment the first Model.ID out of all of them is passed in but i want the current one
To do this would i need to put the modal toggle in a form with Method GET then post the data back to a partial view inside the modal window.
HTML Code
<button type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop2" >Modal</button>
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Delete</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure that you want to delete #Model.ID this action cannot be reversed
</div>
<div class="modal-footer">
<div>
<form action="#Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" value="Delete">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
You can specify some custom parameter for your button, like
<button type="button" data-bs-toggle="modal" something="#Model.ID" data-bs-target="#staticBackdrop2" >Modal</button>
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Delete</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure that you want to delete #Model.ID this action cannot be reversed
</div>
<div class="modal-footer">
<div>
<form action="#Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" value="Delete">Delete</button>
</form>
</div>
</div>
</div>
</div>
</div>
Now, at the event that opens the modal, you will have to find the referrer, which is the button. Its something attribute should hold your model's id.
The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method.
Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.
I have a page that has the following code:
<div class="form-control">
<input type="submit" value="Save" class="btn btn-primary"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
and below the form:
<!-- 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">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</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>
the input type submit " <input type="submit" value="Save" class="btn btn-primary"/> " works, however when I click on the modal button, and the modal opens, the button inside "Save Changes" does not work.
I have also changed the button inside the modal to the same code as the Save button, but it also doesn't work. it doesn't call the OnPost button.
I have also tried adding a handler " asp-page-handler="Save" " and renaming the OnPostAsync to OnPostSaveAsync but does not work.
The inspect does not execute anything on the browser also.
I'm using razor pages asp net6 and the modal code comes from the bootstrap5 docs.
Your <div class="modal"> is likely located as a direct child of <body> instead of being inside its <form>...
... but <button type="submit"> won't work unless the <button> itself is a descendant of the <form> element that should be submitted.
Fortunately, if the <button> is not a descendant of a <form>, then you can manually bind it using the <button form=""> attribute, which contains the id="" of the <form> you want to submit.
Note that the form="" attribute can also be used with all HTML form controls: on all <input> elements, <textarea>, and <select> - which allows you to work-around the fact we can't nest <form> elements.
What I'm trying to do is to save a custom form and after that be able to open it from the default page in for of a button, I have a form to create the custom forms, meaning, that in this page you are meant create a new .aspx page to be accessed through the default page, and i don't know how to create nor save it and I don't also know how to modify or update the default page to be able to access the custom .aspx pages saved.
This is what is meant to be on each created .aspx file (This is an example, this is generated on one of these pages)
<div id="MainContent_div1" class="panel">
<div id="Section 1" class="panel panel-warning">
<div class="panel-heading">Example</div>
<div class="panel-body">
<h3>Example</h3>
<p>Sample description</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test1">Test1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test2">Test2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test3">Test3</a>
</div>
</div>
</div>
</div>
<br>
<div id="Section Test1" class="panel panel-warning">
<div class="panel-heading"> Sample Section 1</div>
<div class="panel-body">
<h3>Sample Section 1</h3>
<p>Sample description 2</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample1">Sample1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample2">Sample2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample3">Sample3</a>
</div>
</div>
</div>
</div>
</div>
Any help, edits or suggestions will be much appreciated.
I have below code in my .cshtml file,
<div class="input-group col-lg-2 navbar-right" style="margin-top: 7px">
<input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
<i class="fa fa-search"></i>
</button>
</span>
</div>
When I minimize the window the textbox appears on top of other controls and width of the textbox changes too.
I tried below css but it doesn't work,
<style type="text/css">
.form-control {
width: auto;
position: absolute;
}
</style>
Any ideas what I am doing wrong here?
Have you tried to remove the position: absolute and set width:100%;
Try this:
<div class="form-group">
<div class="col-md-offset-7 col-md-2">
<input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
<i class="fa fa-search"></i>
</button>
</div>
</div>
Then remove the position:absolute
referring to What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
your code does not have col-md-* or col-sm-* so properties on minimizing the browser window are simply undefined.
add classes as
<div class="input-group col-lg-2 col-md-4 col-sm-2 navbar-right" style="margin-top: 7px">
I need to display a partial (view component) in a bootbox control.
This partial receive some parameters from my current view and build a form to be submitted.
Until MVC 5 I did that rendering my partial to a string and send it back to view.
In MVC 6 I can't get this to work.
What is the correct way to do this?
After some research, I find out a way to do this, very easily. Just use the jquery's "load" function. The example bellow is using default WebApplication created by VisualStudio.
Main view code (Views/Home/About.cshtml):
<button class="btn btn-default details" >Click me</button>
<div class="modal" id="modal"></div>
#section scripts{
<script>
$(function () {
$(".details").click(function () {
$("#modal").load("Contact", function () {
$("#modal").modal();
})
});
})
</script>
}
Modal view code (Views/Home/Contact.cshtml):
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<address>
One Microsoft Way<br />
Redmond, WA 98052-6399<br />
<abbr title="Phone">P:</abbr>
425.555.0100
</address>
<address>
<strong>Support:</strong> Support#example.com<br />
<strong>Marketing:</strong> Marketing#example.com
</address>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->