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.
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>
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 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
How can i convert this to an wordpress new page. I tried to add it tru html but that didn't work. My dropdown is all mest up. Nothing seems to be good. Can anyone help me out please?
Are point me in the wright direction. Are show me a preview how i can fix this problem.
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Smoelenboek</title>
<link rel="stylesheet" href="css/bootstrap-theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/tablesorter.js"></script>
<script id="data" type="text/javascript" src="js/search.js" xmlData="data/raetexport.xml"></script>
</head>
<body>
<STYLE TYPE="text/css">
body { background-image:url('background-alert-ipad.jpg'); }
</style>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<div id="controller">
<label class="control-label" for="searchinput"><Font color="#FFFFFF">Zoeken:</font>
<input type="text" id="term">
</label>
<div class="control-group">
<div class="controls">
<label class="control-label"><Font color="#FFFFFF">Opties:</font>
<select name="category" id="category">
<option value="none">Selecteer een optie</option>
<option value="roepnaam">Voornaam</option>
<option value="naamMedewerker">Achternaam</option>
<option value="team">Team</option>
</select>
</label>
</div>
</div>
</div>
</div>
</div>
<input name="Zoeken" type="button" id="searchButton" value="Search">
</fieldset>
</form>
<div id="result"> </div>
</body>
</html>
This was the correct fix.
Insert HTML Snippet WordPress plugin is the solution, It Adds HTML,
CSS and JavaScript code to your pages and posts easily. – user3599534
1 hour ago
Thank you.