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
Related
I have a bootstrap datetimepicker in my form. But when i select datetime, input box size keeps changing. After input it, i can't change the datetime with datetimepicker. I think, it's because datatble.min.js conflict with datetimepicker.js. But, but i still haven't solved it. Any help would be appreciated.
Before
Before add datetimepicker
Add
Add Date
Add Time
After
Input box size changed
Modal
<div id="modal_form" class="modal fade" role="dialog" aria-hidden="true" aria labelledby="formModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="formModalLabel"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" role="form" action="<?= base_url("catalog/insert") ?>" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label class="col-md-3 control-label">Start Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="start">
<span class=" input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">End Date</label>
<div class="col-md-9">
<div class="input-group date form_datetime form_datetime bs-datetime">
<input type="text" size="16" class="form-control" name="end">
<span class="input-group-addon">
<button class="btn default date-set" type="button">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Descirption</label>
<div class="col-md-9">
<textarea class="form-control" rows="3" name="desc" id="desc" val=""></textarea>
<span class="help-block"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn grey-salsa btn-outline" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn green btn-primary" data-dismiss="modal" type="submit" id="btnsave">Save</button>
</div>
</div>
</div>
</div>
I suggest you use some special libraries which are made for this. https://www.daterangepicker.com/
https://flatlogic.com/blog/best-javascript-datepicker-libraries/
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 a navbar that looks like this:
When I try and shrink the page to simulate a mobile device however, it doesn't collapse quite right:
It's supposed to collapse so that the button that is sort of hidden behind the "Register" text becomes the toggle for the menu. Here is my code:
<div class="sticky-header-navbar-container">
<div class="well">
<div class="navbar navbar-default navbar-fixed-top navbar-collapse navHeaderCollapse" id="navbar">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar">Home</span>
<span class="icon-bar">About</span>
<span class="icon-bar">Contact</span>
<span class="icon-bar">Playground</span>
<span class="icon-bar">Login</span>
<span class="icon-bar"><a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a></span>
</button>
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Playground
</li>
<li>
<form class="navbar-form" role="search">
<div class="input-group" style="width: 100%">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li style="padding-right: 20px">
<a href="#" class="tooltip-bottom" data-toggle="modal" data-target="#registration-modal"
data-tooltip="Only Required to Comment and Rate!">Want to Register? Click Here!</a>
</li>
</ul>
</div>
</div>
</div>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">
Remember Me
</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span></button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If that's all the related code then you shouldn't need anything outside the default classes.
See Default Navbar Docs.
You shouldn't need these modal links in the header and then again within the navbars links, these are whats covering up the mobile toggle button.
And your HTML structure is off and/or missing some pieces. Again if you refer to the Docs you'll see the inconsistencies, you need to put your toggle button inside the navbar-header class, navbar-form does not belong inside of a li item etc.
See working example Snippet.
*Note that because you links that utilize a lot of space at around 875px you'll see your navbar overflow to a new line (a CSS media query turns the background red when this happens in my example). One solution is to reduce the length of the link title(s) to prevent this:
ie Want to Register? Click Here! to just Register!.
#media (max-width: 875px) {
html,
body {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li> Home
</li>
<li> About
</li>
<li> Contact
</li>
<li> Playground
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term-header"> <span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li> Login
</li>
<li> Want to Register? Click Here!
</li>
</ul>
</div>
</div>
</nav>
<div id="about-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">About This Page</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="contact-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us!</h4>
</div>
<div class="modal-body">
<p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p>
<p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p>
<div class="form-group">
<form role="form">
<div class="form-group">
<label for="contact-name" class="sr-only">Your Name</label>
<input type="text" id="contact-name" class="form-control" placeholder="Your Name" required>
</div>
<div class="form-group">
<label for="contact-email" class="sr-only">Your Email</label>
<input type="email" id="contact-email" class="form-control" placeholder="Your Email" required>
</div>
<div class="form-group">
<textarea id="contact-message" class="form-control" rows="6" cols="50" placeholder="Your message..." required></textarea>
</div>
<button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span>
</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login with Github!</h4>
</div>
<div class="modal-body">
<form class="navbar-form">
<label for="login-inputEmail" class="sr-only">Email address</label>
<input type="email" id="login-inputEmail" class="form-control" placeholder="Email Address" required>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="separator" style="padding-bottom: 15px"></div>
<div class="checkbox" style="padding-right: 15px;padding-left: 10px">
<label>
<input type="checkbox" value="remember-me">Remember Me</label>
</div>
<button type="button" class="btn btn-success btn-bg" id="signin-btn"><span class="glyphicon glyphicon-log-in"></span>
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="registration-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">How To Register</h4>
</div>
<div class="modal-body">
<p>In order to log in you need a Github account as we use that for log in here.</p>
<p>If you already registered for a Github account then press the Login button and log in using your Github Credentials.</p>
<p>If you have yet to register Click Here!
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
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']