I have a problem when creating a form with boostrap. especially on select. Please help:(
<div class="form-group">
<label for="jenis_pendidikan" class="col-md-2 control-label">Jenis Pendidikan</label>
<div class="col-md-6">
<select id="jenis_pendidikan" class="form-control" name="jenis_pendidikan">
<option>SD</option>
<option>SMP</option>
<option>SMA/SMK</option>
<option>Perguruan Tinggi</option>
</select>
</div>
</div>
Result:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Catamaran:100|Luckiest+Guy|Quicksand:300|Asap:700|Montserrat:700|Open+Sans|Roboto|Signika:700" rel="stylesheet"/>
</head>
<body>
<div class="form-group">
<div class="col-md-6">
<label for="jenis_pendidikan">Jenis Pendidikan</label>
<select id="jenis_pendidikan" class="form-control" name="jenis_pendidikan">
<option>SD</option>
<option>SMP</option>
<option>SMA/SMK</option>
<option>Perguruan Tinggi</option>
</select>
</div>
</div>
</body>
</html>
Have a look at the above snippet it is work.
You need to put the label just above your select.
Hope this helps!
Related
Hi I am trying to work on this simple program to display information of the selected item based on dropdown menu.If plotnumber 1 is selected from the dropdown menu I want to display rate and area of plotnumber1 and later on calculate the toal price of the plot.Also wanted to add a term called installment for the payment options; likewise when purchasing the plot downpayment option is provided,and the rest of the payment in required to be made in terms of installment; likevise for the first 1.5 months installment is 30% and for the remaining quarters the installment is 70%; I want information for the rate and area to be populated for the selected plotnumber from the dropdown menu.
**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************`
app.js
var plot = [
{ plotnumber:1,
area:1000,
rate:5000
},
{plotnumber:2,
area:2000,
rate:1500},
{plotnumber:3,
area:3000,
rate:1100}
];
for(var i = 0; i < plot.length;i++){
document.getElementById("#selectNumber").append("<option value = '" + plot[i].plotnumber + "'>" + plot[i].area + plot[i].rate + "</options>");
}`
```<!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.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" type = "text/css" href="style1.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top">
<div class="budget">
<form id="signup" class="form">
<h1>Plot Registration Form</h1>
<div class="form-field">
<label for="username">Customer Name:</label>
<input type="text" name="username" id="username" autocomplete="off">
<small></small>
</div>
</form>
<br>
<form id="myForm">
<label for="plotnumber">Plot Number:</label>
<select id="selectNumber">
<option>Choose a Plot number</option>
</select>
</form>
</div>
</div>
<div class="plot-selection">
<p id = "demo"></p>
</div>
<script src =app.js></script>
</body>
</html>```
I am using bootstrap 5 and bootstrap-select .
I have a PSD like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
<div class="col-md-6 mx-auto">
<label for="color_id">Colors</label>
<select class="form-control selectpicker" id="color_id" name="color_id[]" data-live-search="true">
<option value="1" data-content="<span class=badge bg-danger>Red</span>">
Red
</option>
<option value="2" data-content="<span class=badge bg-warning>Warning</span>">
Warning
</option>
</select>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap-select.js"></script>
</body>
</html>
When I open the inspact I see this code
I see that these codes are missing
bg-danger
But I see this demo.
[3
Both the text color is white and the background color is white. Nothing is clear.
Use this for multiple classes:
<option value="1" data-content="<span class='badge bg-danger'>Red</span>">
Red
</option>
You didn't use the quotation marks here:
class="badge bg-danger"
This question already has answers here:
move the position of bootstrap datepicker
(5 answers)
bootstrap date picker position
(2 answers)
Closed 2 years ago.
I have these datepickers and I want to move the position of each one to the right of each input instead of being in the left.
I tried so many css solutions but nothing seems to work.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function () {
$('#beginning_date').datepicker({
language: 'fr'})
$('#ending_date').datepicker({
language: 'fr'})
});
</script>
</body>
</html>
Just use orientation: 'right'
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'right'
})
});
</script>
</body>
</html>
We can use oreientation: 'top right' for show the datepicker on top the input instead of the bottom.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.fr.min.js"></script>
</head>
<body>
<div class="form-group col-md-6">
<label for="inputPassword4"> beginning date
</label>
<input dir="rtl" type="text" class="form-control" id="beginning_date" name="beginning_date">
</div>
<div class="form-group col-md-6">
<label for="inputEmail4"> ending date
</label>
<input dir="rtl" type="text" class="form-control" id="ending_date" name="ending_date">
</div>
<script type="text/javascript">
$(function() {
$('#beginning_date').datepicker({
language: 'fr',
orientation: 'top right'
})
$('#ending_date').datepicker({
language: 'fr',
orientation: 'top right'
})
});
</script>
</body>
</html>
Change left property value for the div.datepicker element to auto, and set right property value to the previous value of left property.
div.datepicker {
left: auto;
right: 15px;
}
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.
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.