I have a crazy problem when I code an admin page. When i enter the "8" to this dialog, its how me like this picture. Every button else is ok.
Here my code:
<div class="modal-header">
<h4>{{'TITLE'|translate}}</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
<form class="form-horizontal" ng-submit="addPoint()" id="add-point-form">
<div class="control-group">
<label class="control-label">{{'AMOUNT'|translate}}</label>
<div class="controls">
<input type="number" ng-model="input.amount" required>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="close()">{{'CANCEL'|translate}}</button>
<button type="submit" class="btn btn-primary" form="add-point-form">{{'CONFIRM'|translate}}</button>
</div>
I don't know why 8?
Related
When i push button open popup window, but this window work not correctly. I cant fill all lines and page footer climbs on the window popup
how fix it?
i use only bootstrap and i dont see any z-index
i have PartialView but i think that is view broke
this is view
#{
ViewData[index: "Title"] = "Create";
}
<h3>Create Employee</h3>
<hr/>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEmployeeLabel">Add Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Create">
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()"/>
<div class="form-group">
<label asp-for="FistName"></label>
<input asp-for="FistName" class="form-control"/>
<span asp-validation-for="FistName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="LastName"></label>
<input asp-for="LastName" class="form-control"/>
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Position" class="control-label"></label>
#Html.DropDownList("PositionId", (IEnumerable<SelectListItem>) ViewData["PositionId"], "- Select -", new {id = "PositionId"})
<span asp-validation-for="Position" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Salary"></label>
<input asp-for="Salary" class="form-control"/>
<span asp-validation-for="Salary" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateStart"></label>
<input asp-for="DateStart" class="form-control"/>
<span asp-validation-for="DateStart" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DateEnd"></label>
<input asp-for="DateEnd" class="form-control"/>
<span asp-validation-for="DateEnd" class="text-danger"></span>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>
</div>
</div>
if need i can uploaded this progect to google disk.
That is because you create a modal in a separate razor view,it would use Layout by default.
Add the following code to your bootstrap modal and no need to add html outside the modal:
#{
Layout = null;
}
#*<h3>Create Employee</h3>
<hr />*#
its simple fix html bootstrapping. i transferred next code before </form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal" id="save-employee">Save</button>
</div>```
I am trying to submit my modal title as post data, however it isn't being sent.
I have given the element a name attribute. Elements in the modal body are submitting as I would expect. Trying to submit the element whose name is "editModalTitle" below
HTML:
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
Form data here
Edit 1: Added full html for modal.
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<form action="/editItem" method="post" id ="editModalForm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" name="eModalTitle"></h5>
<!-- hidden value for modal title to post -->
<input type="hidden" id="Modal_title_to_post" name="Modal_title_to_post" value="eModalTitle">
<!-- hidden value for modal title to post -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Quantity:</label>
<div class="row">
<div class="col">
<select class="form-control" id="qtSelect">
<option>Set to</option>
<option>Add</option>
<option>Subtract</option>
</select>
</div>
<div class="col" id= "qtD">
<input type="text" class="form-control" id="qt" name="quantityTB" placeholder="Quantity">
</div>
</div>
</div>
<div class="form-group" id="prD">
<label>Price:</label>
<input type="text" class="form-control" id="pr" name="priceTB" placeholder="Enter new price here...">
</div>
<div class="form-group">
<label>Notes:</label>
<div class="row">
<div class="col">
<select class="form-control" id="ntSelect">
<option>Set notes to:</option>
<option>Add to notes:</option>
</select>
</div>
<div class="col">
<input type="text" class="form-control" id="ntInput" name="notesTB"placeholder="Enter notes here...">
</div>
</div>
</div>
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="loc" name="locationTB" placeholder="Enter new location here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="eSvBtn" class="btn btn-primary">Save changes</button>
</div>
</div>
</form>
</div>
</div>
Updated code with hidden value for the modal title :)
I have an issue when trying to check a checkbox inside a form inside a modal.
Here the code
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
The problem is that i can't check that checkbox but if i came to it by tab clicks and then space it, it gets checked. anyone know how to made it checked by mouse click?.
Thanks.
It is working as you posted so you most likely have some JavaScript attached to it causing your issue.
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
I'm using angular-strap aside with Bootstrap3. My aside html template is given below -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
This works so far-
But if I change the code -
<div class="aside" tabindex="-1" role="dialog">
<div class="aside-dialog">
<div class="aside-content">
<div class="aside-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="aside-title">Settings</h4>
</div>
<div class="aside-body" ng-controller="SettingsCtrl">
<form name="createCustomerForm" role="form">
<div class="form-group">
<label for="settings_email">Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" id="settings_email" name="settings_email" type="text">
</div>
</div>
<div class="form-group">
<label for="language">Language: </label>
<button id="language" type="button" class="btn btn-default" data-html="1"
data-animation="am-flip-x" ng-options="country.name for country in countries track by country.id"
data-placeholder="Select country..."
ng-model="selectedLang" ng-change="onLanguageSelected(country)"
bs-select>
Action <span class="caret"></span>
</button>
</div>
</form>
</div>
<div class="aside-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
Then it captures the whole window -
How can I make it to remain same size?
You can just add a max-width tag on your content class in aside template that you are loading.
Assume
I have got the following HTML code. I have no idea why the POST is sent with no parameters (I checked the parameters are not being sent with the firefox debugger):
<div class="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<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"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next...">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
</div>
I suspect the nested input fields may have something to do with it, but I need to have them nested to have proper formatting.
You need to assign a name to your input fields. For example:
<input type="text" class="form-control"
id="user_message" name="user_message" placeholder="In next..." />
Form data is posted as name/value pairs. If you don't provide name attributes, nothing will be posted.
As a side note, I would also recommend you to correctly close your input tags.
<div class="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<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"id="myModalLabel">Add opinion</h4>
</div>
<form role="form" action="api/sendEntry" method="post">
<div class="modal-body">
<div class="form-group">
<label for="user_message">The following: </label>
<input type="text" class="form-control" id="user_message" placeholder="In next..." name="user_message">
<label for="user_date">Until: </label>
<input type="date" class="form-control" id="user_date" name="user_date">
</div>
</div>
<div class="modal-footer">
<button type="submit"class="btn btn-default">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</form>
</div>
</div>
Receive your data with $_POST['user_date'] and $_POST['user_message']