bootstrap-select drop-down get hidden by another drop-down - javascript

Why does some parts of the first drop-down menu get hidden by another drop-down menu below in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Note there is no responsive meta tag here -->
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>MarkerDB</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-inline" action="/between/" method="get">
<div class="input-group">
<span class="input-group-addon">TestA</span>
<select name="tests" class="selectpicker form-control" data-live-search="true" title="Plese select a test ...">
<option selected value="1">Test1</option>
<option selected value="2">Test2</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search!</button>
</span>
</div>
</form>
<hr>
<form class="form-horizontal" action="/compare/" method="get" role="form">
<div class="input-group">
<span class="input-group-addon">TestB:</span>
<select name='cultnames' class="selectpicker show-menu-arrow form-control" multiple data-max-options="2" data-live-search="true">
<option value="Test3">Test3</option>
<option value="Test4">Test4</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search!</button>
</span>
</div>
</form>
<hr>
<HR>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script>
$('.selectpicker').selectpicker();
</script>
</body>
</html>

If you put z-index:0 on the input-group in the 2nd form it works ok.
...
<form class="form-horizontal" action="/compare/" method="get" role="form">
<div class="input-group" style="z-index:0;">
...
http://jsfiddle.net/kme2j8ma/

Related

Material design select with floating label

I need to add a floating label to this select menu. I found this framework https://tronic247.com/material/ and it seem to have a select component but no floating label, So how to add it / Thanks for any help.
<!DOCTYPE html>
<html>
<head>
<title>My Material design Web Page</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
<!-- CSS at head -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://res.cloudinary.com/tronic247/raw/upload/v1620900079/material.min.css" rel="stylesheet" />
</head>
<body>
<div class="container p-5">
<label for="rating">Choose a rating</label>
<select class="filled">
<optgroup label="Good">
<option value="5">5+</option>
<option value="10">10+</option>
<option value="" disabled="">10+</option>
</optgroup>
<optgroup label="Bad">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
</select>
</div>
<!-- JS at footer for optimized loading -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://res.cloudinary.com/tronic247/raw/upload/v1620900084/material.min.js"></script>
</body>
</html>
As far as I can see from the documentation, the library you use does not have an option for floating labels. Try some other library that does have floating labels, like Material Design Lite or another that has built-in this option.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
<!-- Numeric Textfield with Floating Label -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
<label class="mdl-textfield__label" for="sample4">Number...</label>
<span class="mdl-textfield__error">Input is not a number!</span>
</div>
</form>

select2 js plugin is not working

I just started using select2 jquery plugin . I am trying it on codepan . I added all cdn link (css,js, jquery etc) .But my select items do not change yet . here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div style="width:600px;">
<form action="post">
<select name="" id="myselection">
<option value="dhaka"> Dhaka </option>
<option value="braishal"> Barishal </option>
<option value="Khulna"> Khulna </option>
<option value="rajshahi"> Rajshahi </option>
<option value="dinajpur"> Dinajpur </option>
</select>
</form>
</div>
<!-- Scripts -->
<script src="scripts/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myselection').select2();
});
</script>
</body>
</html>
JQuery must be imported before Select2 script for it to work.
So the correct import order should be:
jQuery
Select2
Page specific Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div style="width:600px;">
<form action="post">
<select name="" id="myselection">
<option value="dhaka"> Dhaka </option>
<option value="braishal"> Barishal </option>
<option value="Khulna"> Khulna </option>
<option value="rajshahi"> Rajshahi </option>
<option value="dinajpur"> Dinajpur </option>
</select>
</form>
</div>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js">
</script>
<script src="scripts/index.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myselection').select2();
});
</script>
</body>
</html>

pass selected value of my combo box to another input value

I want to pass the selected value of my combo box to the the input value which has a id of "val".
I tried passing the value using jquery
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
But it's not working. Please help.
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
</script>
</body>
</html>
.change is not neccessary. On the Button click you can directly access the selected value of your dropdown. Please check the below code.
$(document).ready(function() {
$('#btn').click(function(e) {
alert($('#combobox option:selected').val());
});
});
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
</body>
</html>
you need to remove the click event in #btn
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
https://jsfiddle.net/
Please try this.
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
});
</script>
</body>
</html>
You have nested your event handlers. Change within click. That is always a sign that the code is wrong. You will be adding a new change handler on every click, which is not what you want.
It is not 100% clear what you are trying to do, but you can start like this:
$(function() {
$('#combobox').change(function() {
var selected = $(this).val();
$('#val').val(selected);
alert($('#val').val());
});
});
Note: val() on a select will return the selected value, so you do not need to use option:selected and its text.

Bootstrap tooltip is not working on my php file

I have using bootstrap v3.3.7 on for my php project. I have included all minified files. But my tooltip is not working.
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="content1">
<div style="padding-left:120px; padding-right:120px">
<form class="form-horizontal" role="form" method="post"
id="formID" enctype="multipart/form-data">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Name of business</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" placeholder="Enter name of your business" name="tbname" value="<?=$b_name?>" >
</div>
</div>
<br>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="right" title="specify your nearby location">
<option value="">-- Select Area --</option>
<?php
$q = mysqli_query($con, "select * from tbl_areas");
while($result = mysqli_fetch_assoc($q))
{
echo "<option value='$result[areaid]'>$result[area]</option>";
}
?>
</select>
</div>
</div>
<div class="col-sm-7"> <input type="submit" name="btnad" id="btnad" value="Register" class="btn btn-info"/></div>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="right">
<?php include 'include\front_right.php'?>
</div>
</div>
</div><!--row end-->
</div>
I have used here tooltip for only 'select' tag. but still not working.
Please give me solution for this.
Please chekc this demo how it is working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Have you included jquery?
Here is a working example:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="bottom" title="specify your nearby location">
<option value="">-- Select Area --</option>
<option value="1">Area 1</option>
<option value="2">Area 2</option>
</select>
</div>
</div>
</div>

JQM Flip toggle switch submit-function

I like to use a jQuery mobile flip toggle switch to submit two status informations to control the two status of a relais.
Instead of using:
<input class="scene_btn" type="submit" onClick="request('key=1')" value="on" data-theme="d"</input>
<input class="scene_btn" type="submit" onClick="request('key=2')" value="off" data-theme="d"</input>
I'd like to use a jquery flip toggle switch, to switch on and off a relais.
<form>
<label for="flip-1">Flip toggle switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
Does anybody know, how to to programm this?
Working example: http://jsfiddle.net/Gajotres/mC2ph/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css"/>
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<form id="test-form">
<label for="flip-1">Flip toggle switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
JavaScript:
$(document).on('pageinit', '#index', function(){
$(document).on( "slidestop", "#flip-1" ,function( event, ui ) {
console.log($("#flip-1").val());
$('#test-form').submit();
});
});
You can get solution here,
http://demos.jquerymobile.com/1.2.0/docs/forms/switch/events.html
There is a specification about "Methods" and "event" so, it may be helpful for you.

Categories