I have a form field built in Foundation 6 but it does not allow for decimal input.
HTML
<input type="number" name="decimal_amount" max="10" placeholder="" required>
When I enter 8.5 I get this error:
Please enter a valid value. The two nearest values are 8 and 9.
Here is the entire HTML block:
<head>
<!-- Foundation CSS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.1.2/foundation.min.css">
<!-- 1140px Grid styles for IE -->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->
<!-- The 1140px Grid - http://cssgrid.net/ -->
<link rel="stylesheet" href="../css/1140.css" type="text/css" media="screen" />
<!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
<script type="text/javascript" src="../js/css3-mediaqueries.js"></script>
<!-- Foundation JavaScript via CDN -->
<script src="https://cdn.jsdelivr.net/foundation/6.1.2/foundation.min.js"></script>
</head>
<div class="large-6 columns">
<label class="left">Ranking (scale 1-10, decimals allowed)
<input type="number" name="decimal_amount" max="10" placeholder="" required>
</label>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
Here is the error console
It is really a question of HTML5. Add the step="0.1" to the input to describe the type of decimal precision. Here is an example to the 100th's.
<input type="number" name="decimal_amount" max="10" step="0.01" placeholder="" required>
http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step
Related
We have a datepicker in our mvc asp.net core application.
But i want to make saturday and sunday unselectable in it is this possible?
Thanks in advance.
Joni
Yes possible, you can do this with bootstrap date picker
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
Date : <input type="text" name="date" class="form-control datepicker" autocomplete="off">
</div>
</body>
<script type="text/javascript">
$('.datepicker').datepicker({
daysOfWeekDisabled: [0,6]
});
</script>
</html>
I am trying to implement a date-time calendar using Bootstrap, and when I'm using the datetimepicker, no dates or times are being made available to select. The libraries needed for datetimepicker are already downloaded and in the respective folders within the directory.
Here is my code:
<head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<!-- Theme CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> -->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" integrity="sha384-0s5Pv64cNZJieYFkXYOTId2HMA2Lfb6q2nAcx2n0RTLUnCAoTTsS0nKEO27XyKcY" crossorigin="anonymous"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class='col-sm-6'>
<div class="form-group">
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUdatetime'>
<input class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap-datetimepicker.js"> .</script>
<script src="vendor/bootstrap/js/locales/bootstrap-datetimepicker.fr.js"></script>
<script type="text/javascript">
$(function () {
$('#carPUdatetime').datetimepicker();
});
</script>
</body>
Your problem is that you called datepicker on the div and not the input.
Change
<input class="form-control" type="text" required/>
to
<input id="testInput" class="form-control" type="text" required/>
and update your javascript to
$(function () {
$('#testInput').datetimepicker();
});
Move the id='carPUdatetime' from the div to the input:
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii">
<input id='carPUdatetime' class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
That's not exactly an answer to your question, but the value of the for attribute in the label must be an HTML control, not div.
Apart from that, the code in your question works fine and the dates are displayed.
If you want to keep the calendar with the div, then give the input a different id from the div:
<label for="carPUdatetime"> Date and Time: </label>
<div class='input-group date form_datetime' data-date-format="dd-MM-yyyy - HH:ii" id='carPUcalendar'>
<input id='carPUdatetime' class="form-control" type="text" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#carPUcalendar').datetimepicker();
});
</script>
I've read other post that indicate the or tags were left unclosed or had something placed after the tag. Am unsure of any other cause as I get errors for Stray End Tags from Line 78 to Line 96 (Starting from ng switch OS)
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Lab 3.4 - Registration Form Web App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5
elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- jQuery – required for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- All Bootstrap plug-ins file -->
<script src="js/bootstrap.min.js"></script>
<!-- Basic AngularJS -->
<script src="js/angular.min.js"></script>
</head>
<body>
<h1>Phone Cloud Registration App</h1>
<form>
<!--Note to self: Labels are associated with input's id and not name attirbute-->
<p>
<label for="username">Enter username: </label>
<input type="text" id ="username" data-ng-model="username"/>
</p>
<p>
<label for="password">Enter password: </label>
<input type="text" id="password" data-ng-model="password"/>
</p>
<p>
<label for="rpassword">Re-enter password: </label>
<input type="text" id="rpassword" data-ng-model="rpassword" />
<span data-ng-show="rpassword != password" data-ng-model-options = "{updateOn: 'blur'}">Password does not match the above.</span>
</p>
<br/>
<h2>Phone Operating System</h2>
<!--Radio Buttons-->
<input type="radio" name="OS" value="Android" data-ng-model="OS" required/>Android
<input type="radio" name="OS" value="IOS" data-ng-model="OS"/>IOS
<input type="radio" name="OS" value="Windows" data-ng-model="OS"/>Windows
<p>Phone Model</p>
<label for="phoneModel">
Select phone model:
</label>
<!--Drop Down List -->
<div>
<select name = "phoneModel" id = "phoneModel">
<div data-ng-switch = "OS">
<div data-ng-init = "AndroidModels = ['HTC 8X','Samsung Galazy 7','Sony Xperia Z5']" data-ng-switch-when = "Android">
<option data-ng-repeat = "a in AndroidModels">{{a}}</option>
</div>
<div data-ng-init = "IOSModels = ['Iphone 6','Iphone 6s','Iphone 6s Plus']" data-ng-switch-when = "IOS">
<option data-ng-repeat="b in IOSModels">{{b}}</option>
</div>
<div data-ng-init = "WindowsModels =['HTC One M9','Microsoft 950','Microsoft 950XL']" data-ng-switch-when="Windows">
<option data-ng-repeat = "c in WindowsModels">{{c}}</option>
</div>
</div>
</select>
</div>
<br/>
<p>Summary</p>
<ul>
<li>Username: {{username}}</li>
<li>OS: {{OS}}</li>
<li>Phone: {{phoneModel}}</li>
</ul>
</form>
</body>
</html>
*EDIT: Issue was with nesting <div> tags and any other tag that isn't <option> within the <select> tag. THANK YOU SO MUCH KIND SIR.
You should only have option or optgroup elements directly nested in a select element.
The permitted content of a select element from MDN:
Zero or more <option> or <optgroup> elements.
Remove all of the other elements from inside your select and at the same time I'd recommend removing the whitespace from attributes such as:
data-ng-switch = "OS" should be data-ng-switch="OS".
Hey guys I am trying to use this: http://www.codingdrama.com/bootstrap-markdown/
. I am using the Ionic framework and working on a single page web application.
This are the includes in the header of my index.html:
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- JQuery animated scrolling plugin -->
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<!-- MARKDOWN -->
<link href="css/bootstrap-markdown.min.css" rel="stylesheet">
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="js/vendor/markdown.js"></script>
<script src="js/vendor/bootstrap-markdown.js"></script>
<script src="js/vendor/he.js"></script>
<script src="js/vendor/to-markdown.js"></script>
Currently, I am running this example from the website:
<form>
<input name="title" type="text" placeholder="Title?" />
<textarea name="content" data-provide="markdown" rows="10"></textarea>
<label class="checkbox">
<input name="publish" type="checkbox"> Publish
</label>
<hr/>
<button type="submit" class="btn">Submit</button>
Unfortunately, the outcome is nothing like the example. I just see a blank form that is not even close to the expected output.
I have also tried the includes(first 4 lines) from this example: http://bootsnipp.com/snippets/99r9D . However, I am still having no luck. Can anyone who has experience with this bootstrap plugin help me out?
This is what I see:
Please check the below snippet. Its working for me,
Submit button may not work here because of permission issue. ,
Added some extra style to show the checkbox properly.
.checkbox {
margin-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form>
<input name="title" type="text" placeholder="Title?" class="form-control" />
<textarea name="content" data-provide="markdown" rows="10"></textarea>
<label class="checkbox">
<input name="publish" type="checkbox">Publish
</label>
<hr/>
<button type="submit" class="btn">Submit</button>
</form
Try this code.it works with preview.
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
<script src="https://use.fontawesome.com/f9b4728164.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://www.codingdrama.com/bootstrap-markdown/js/to-markdown.js"></script>
<script src="http://www.codingdrama.com/bootstrap-markdown/js/markdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<form>
<textarea id="myEditor" name="content" data-provide="markdown" rows="10">
</textarea>
</form>
I am trying to create a bootstrap select list in a html file using Dreamweaver CS6 preview. I have the following code that should work, but it doesn't show the select box as it should - when you select an item a tick should appear next to that item. Also the appearance of the box looks different to the example on http://silviomoreto.github.io/bootstrap-select/.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-select.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-select.min.js"></script>
<script> $('.selectpicker').selectpicker(); </script>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="post">
Name: <input type="text" name="name">
<br>
E-mail: <input type="text" name="email">
<br> <input type="submit">
</form>
</body>
</html>
I don't see any problem with your code. Here's a working fiddle:
http://jsfiddle.net/cuovoqzw/
HTML:
<h1>Hello, world!</h1>
<span class="label label-default">Default</span>
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
<form action="welcome.php" method="POST">
Name: <input type="text" name="name">
<br />
E-mail: <input type="email" name="email">
<br />
<input type="submit">
</form>
JS:
$('.selectpicker').selectpicker();
The most probable reason I see is that you've included multiple instances of Bootstrap CSS files in your code. Just include only the required ones and delete the rest.