i have a Bootstrap Modal
<div id="responsive" class="modal" tabindex="-1" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h4>Some Input</h4>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
</div>
<div class="col-md-6">
<h4>Some More Input</h4>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
<p><input class="form-control" type="text"></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#responsive">
New Cash Account
</button>
when i click every thing goes funny like this, why? help please!!!!
this application i in MVC 5 and using the bootstrap scaffolding
when it shoudl display
Bootstrap 3 (as your question is tagged), requires the modal-content to wrapped in modal-dialog div..
<div id="responsive" class="modal" tabindex="-1" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
Demo: http://www.bootply.com/123094
The progress-bar may be some to other conflicting element on your page.
Related
I'm using the TinyMCE Editor version 5.6.1. Whenever I load my popup for the first time, I get the following:
When I close the Popup and re-display it again, I get the following:
There are no errors in the console and loading the Popup is as plain as you can get it:
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is the code which calls the Modal
#{
ViewData["Title"] = "Product Administration";
}
<br />
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="shadow-lg p-1 mb-1 bg-primary rounded d-flex">
<h5 class="text-white flex-grow-1">Product Administration ...</h5>
<div>
<a onclick="showInPopup('#Url.Action("AddEdit","Product",null,Context.Request.Scheme)','New Product')"
class="btn btn-success text-white">
<i class="fas fa-random"></i>New Product</a>
</div>
</div>
Here is the code for the Modal:
#model ProductEdit
#{
Layout = null;
}
<script>tinymce.init({
selector: 'textarea',
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_css: '//www.tiny.cloud/css/codepen.min.css'
});</script>
<div class="row">
<div class="col-lg-12">
<form asp-action="AddEdit" asp-route-id="#Model.Id" onsubmit="return jQueryAjaxPost(this, RefreshMe, false);" autocomplete="off">
<input type="hidden" asp-for="#Model.Id" />
<div id="errValidation" class="alert alert-dismissible alert-danger" data-content="ok">
<button id="closeValidation" type="button" class="close">×</button>
<div id="errTitle" class="font-weight-bolder">Oh snap!</div>
<div id="errDetails">An Error Occured!</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.CategoryId" class="control-label"></label>
<select asp-for="#Model.CategoryId"
class="form-control"
asp-items="#(new SelectList(Model.ProductCategories,"Id","Display"))">
</select>
<span asp-validation-for="#Model.CategoryId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.SectionId" class="control-label"></label>
<select asp-for="#Model.SectionId"
class="form-control"
asp-items="#(new SelectList(Model.ProposalSections,"Id","Display"))">
</select>
<span asp-validation-for="#Model.SectionId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.ManufacturerId" class="control-label"></label>
<select asp-for="#Model.ManufacturerId"
class="form-control"
asp-items="#(new SelectList(Model.Manufacturers,"Id","Display"))">
</select>
<span asp-validation-for="#Model.ManufacturerId" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.InternalPartNumber" class="control-label"></label>
<input asp-for="#Model.InternalPartNumber" class="form-control"></>
<span asp-validation-for="#Model.InternalPartNumber" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.ManufacturerPartNumber" class="control-label"></label>
<input asp-for="#Model.ManufacturerPartNumber" class="form-control"></>
<span asp-validation-for="#Model.ManufacturerPartNumber" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.Description" class="control-label"></label>
<input asp-for="#Model.Description" class="form-control" rows="2"></>
<span asp-validation-for="#Model.Description" class="text-danger"></span>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.SellPrice" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.SellPrice" class="form-control"></>
</div>
<span asp-validation-for="#Model.SellPrice" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.Cost" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.Cost" class="form-control"></>
</div>
<span asp-validation-for="#Model.Cost" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.ProductWebsite" class="control-label"></label>
<input asp-for="#Model.ProductWebsite" class="form-control"></>
<span asp-validation-for="#Model.ProductWebsite" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Note" class="control-label"></label>
<textarea asp-for="#Model.Note" class="form-control" rows="5"></textarea>
<span asp-validation-for="#Model.Note" class="text-danger"></span>
</div>
<div class="d-flex">
<div class="form-group mr-2">
<input asp-for="#Model.Active" />
<label asp-for="#Model.Active" class="control-label text-success"></label>
</div>
<div><button type="submit" value="Save" class="btn btn-success mr-2">Save Changes</button></div>
<div><input type="reset" class="btn btn-warning"></></div>
</div>
</form>
</div>
</div>
<script>
$('#errValidation').hide();
$(function () {
$("#SectionId").chosen({ no_results_text: "Oops, Section not found!", disable_search_threshold: 4 });
$("#CategoryId").chosen({ no_results_text: "Oops, Category not found!" });
$("#ManufacturerId").chosen({ no_results_text: "Oops, Manufacturer not found!" });
});
$("#closeValidation").click(function () {
$("#errValidation").hide();
});
function RefreshMe() {
$('#products').DataTable().ajax.reload(null, false);
showSuccessToast('Product Saved', 'top-center');
}
</script>
The showInPopup method is the following:
showInPopup = (url, title) => {
$.ajax({
type: "GET",
url: url,
success: function (res) {
$('#form-modal .modal-body').html(res);
$('#form-modal .modal-title').html(title);
$('#form-modal').modal('show');
}
})
}
Any ideas about what might be happening? If I refresh the page it works again only for the first load.
Thanks.
--- Val
From the second pictures, the textare is not rendered by tinymce, because the html which ajax returned can not be rendered by tinymce. TinyMCE works when the page is building. So a better method is to use #Html.Partial to load the partial view (ProductEdit).
In the view Product Administration, change the modal body.
<div class="modal-header">
<h5 class="modal-title">#Context.Request.Scheme</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
#Html.Partial("addedit.cshtml",Model)
</div>
Change this javascript method.
var showInPopup = (url, title) => {
$('#form-modal').modal('show');
}
And move tinymce.init({ //... }) to this view Product Administration.
Then, TinyMCE will work well.
I'm using VueJS to have it dynamically add new inputs once a button is clicked. With my current code it is not adding the inputs. Why is that?
<div class="row" v-for="count in task.pos.length">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_number">Order Number:</label>
<input id="po_number" class="form-control" type="text" placeholder="Purchase Order" v-model="task.pos[count-1].purchase_order">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label" for="po_amount">Order: Amount:</label>
<input id="po_amount" class="form-control" type="text" placeholder="Purchase Amount" v-model="task.pos[count-1].po_amount">
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-xs mb5 text-white" v-on:click.prevent="addEditNewPOEntry()"><i class="fa fa-plus"></i> Add PO</button>
<button class="btn btn-warning btn-block btn-xs" v-on:click.prevent="saveEdit(task)">Done</button>
</div>
addEditNewPOEntry: function(){
this.newTask.po.push({'purchase_order': this.task.purchase_order, 'purchase_amount': this.task.purchase_amount});
this.$set(this, 'task.pos.length', this.task.pos.length+1);
},
I have some problem on how to display a bootstrap modal using vue.js and laravel 5.3. I just added the vue model inside blade.php but modal seems no working. Please see sample code below:
html:
<div id="project">
<button class="btn btn-primary" #click="showModal = true"><i class="icon-plus"></i> Add new</button>
<!-- Modal -->
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Add Project</h4>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="title" class="form-control" required="required" placeholder="Project Title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="date" name="date" class="form-control" required="required" placeholder="Project Date">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="category" class="form-control" required="required" placeholder="Project Category">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea name="desc" id="inputDesc" class="form-control" rows="3" placeholder="Project Description"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="dropzone" id="project-thumbnail">
</div>
</div>
</div>
</div>
</form>
</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>
script:
new Vue({
el: '#project',
data: {
showModal: false
}
})
Just add show class and v-if="showModal" to your modal:
<div class="modal fade in show" tabindex="-1" role="dialog" v-if="showModal" aria-labelledby="myModalLabel">
Build something cool!
There is nothing in your code to trigger it. If you aren't use bootstrap's data-modal then you need to use the Javascript API to open it documented here:
http://getbootstrap.com/javascript/#via-javascript
I.e. you need a method on your Vue that calls:
$('#myModal').modal('show');
I am developing an asp.net mvc4 application with Bootstrap 3 and i've _Layout.cshtml in "Shared" folder , in Views, i've two pages, "Index and "Register" and i've included Layout in both of these Views but It seems that Layout is included in only "Index and not in "Register" View. Following are my Index and Register Views
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2 align="center" class="bg-info">Login</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"><strong>UserName : </strong></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="UserName">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><strong>Password</strong></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
<h2 align="center" class="bg-info">SignIn With Other Services</h2>
</form>
<form class="form-horizontal" role="form" method="post" action="/Home/FacebookLogin">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">SignIn with Facebook</button>
</div>
</div>
</form>
<h2 align="center" class="bg-info">Don't Have an Account?</h2>
<form class="form-horizontal" role="form" method="post" action="/Home/Register">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
![#{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2 align="center" class="bg-info">Register</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"><strong>UserName : </strong></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="uname" name="uname" placeholder="UserName">
<input type="button" class="btn btn-primary" id="check" value="Check Availability" >
<h4 class="bg-warning"></h4>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><strong>Password</strong></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="upass" name="upass" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label"><strong>Retype Password</strong></label>
<div class="col-sm-10">
<input type="password" class="form-control" id="retype" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>]
Can you please check below answer
Section has been defined but not rendered for the layout page "~/Views/Shared/_Layout.cshtml": "head"
Also check for it
I'm attempting to render, side by side, form elements within a bootstrap modal dialog. Reason for this is that they're for all intents and purposes the same options, just representing options for different items and the current way it renders for users is basically:
<table>
<tr>
<td><!--Option Group 1--></td>
<td><!--Option Group 2--></td>
<td><!--Option Group 3--></td>
</tr>
</table>
So using the modal dialog example in the Bootstrap 3 documentation combined with the form-horizontal exampl in the Bootstrap 3 documentation plus some use of span to attempt to do a 50% width for each (and hopefully left-to-right tiling of the sections), I came out with:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addLabel">Title of Dialog</h4>
</div>
<form class="form-horizontal" role="form">
<div class="modal-body">
<div class="row">
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add Request</button>
</div>
</form>
</div>
</div>
http://jsfiddle.net/isherwood/3zeMh/
The problem is that somewhere along the way, it is forcing each item to go new line so I have two "forms" that are 50% of the parent width (intentional) that are rendered vertically (not intentional). How can I make the two render side by side?
<div class="span6">
should be
<div class="col-sm-6">
2 times.
http://jsfiddle.net/isherwood/3zeMh/4
It needs a little further cleanup, but that's the primary issue. Here's one possible refinement: http://jsfiddle.net/isherwood/3zeMh/6
I'd probably make the labels wider and keep everything block for mobile, though.