Why can't I click on the icon? If I click it, I don't get an alert.
$('#copy_address').click(function(e) {
alert("Teszt");
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="control-label col-sm-3" for="kapcsolat_email">E-mail cím</label>
<div class="col-sm-9 inner-addon right-addon">
<i class="fa fa-clipboard" aria-hidden="true" id="copy_address"></i>
<input class="form-control" id="ajanlatkeres_email" name="ajanlatkeres_email" type="text" value="<?php echo html($data['ajanlatkeres_email']); ?>" />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove pointer-events: none;property from css of class .inner-addon i. Check the working snippet below
$('#copy_address').click(function(e) {
alert("Teszt");
});
.inner-addon {
position: relative;
}
.inner-addon i {
position: absolute;
padding: 10px;
/*pointer-events: none;*/ /*remove this property*/
}
.left-addon in {
left: 0px;
}
.right-addon i {
right: 10px;
cursor:pointer !important;
z-index:999;
}
.left-addon input { padding-left: 30px; } .right-addon input { padding-right: 30px; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="control-label col-sm-3" for="kapcsolat_email">E-mail cím</label>
<div class="col-sm-9 inner-addon right-addon">
<i class="fa fa-clipboard" aria-hidden="true" id="copy_address"></i>
<input class="form-control" id="ajanlatkeres_email" name="ajanlatkeres_email" type="text" value="test#test.com" />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
function togchq3chn(x) {
for (i = 1; i < 10; i++) {
var k = "kd" + i;
var c = "cd" + i;
if (x.id == k) {
document.getElementById(c).style.display = "block";
}
}
}
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd1" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd1" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd2" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd2" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3" onclick="togchq3chn(this)">
<i class="fas fa-check" id="cd3" style="position: relative; display:none; top:-2px; left: 2px; "></i>
</div>
</div>
</body>
</html>
Once i click on the check box it get selected but if i again click on the same check box the yes tick is not getting disabled.
I try that else section else{document.getElementById(c).style.display = "none";} but when i do this code. at time one checkbox i can get selected. this will work like a toggled.
Requirement: On the checkbox if i click again the yes tick will get respective checkbox yest tick disappeared.
You don't need to give one unique ID to each <div> and to each <i>. You don't need to loop 10 times on click, generate IDs, test if each ID matches the element you clicked, then show/hide another element with a composed ID.
What you are trying to do can be done with a simple toggle() on click. (And one jQuery!)
$(".chqsqr").click(function() {
$(this).find("i").toggle()
});
.chqsqr {
width: 25px;
height: 25px;
border: 1px solid rgb(180, 180, 180);
border-radius: 2px;
}
.shcursor {
cursor: pointer;
}
.inlineblock {
display: inline-block !important;
}
.bluefont {
color: rgb(0, 98, 167) !important;
}
.f17 {
font-size: 1.7em !important;
}
i.fas {
position: relative;
display: none;
top: -2px;
left: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock">
<i class="fas fa-check"></i>
</div>
</div>
<div class="col-md-1">
<div class="chqsqr shcursor inlineblock" id="kd3">
<i class="fas fa-check" ></i>
</div>
</div>
If I understood your question then you wanted something like this?
function clickFunction(prop){
var nameProp = document.getElementsByName(prop.name);
var idProp = document.getElementById(prop.id);
if (idProp.checked) {
for(var i=0; i < nameProp.length; i++){
nameProp[i].disabled = false;
}
}
}
<tr><td><input type="checkbox" name="box" id="box1" value="1" tabIndex="1" onClick="clickFunction(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="box" id="box2" value="1" tabIndex="1" onClick="clickFunction(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="box" id="box3" value="1" tabIndex="1" onClick="clickFunction(this)">Test 3</td></tr>
I have a validation form in bootstrap4 when I enter less than 5 characters it shows me an error.
When I enter 5 or more than 5 characters I want to put a green check-mark and border on that particular input field.
<div class="container">
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="username">username:</label>
<input type="text" class="form-control" id="name" placeholder="username" required>
</div>
<input type="submit" class="btn btn-primary" value="submit" >
</form>
</div>
<script src="./dist/bootstrap-validate.js"></script>
<script>
bootstrapValidate('#name', 'min:5:Enter at least 5 charecters');
</script>
</body>
</html>
https://github.com/NinoosMoshi/form-validation.git
You need a few things in your code...
you got the condition correct, need to add/remove classes as a result of bootstrapValidate
import the icon library (i used font awesome v5)
in the classes you add/remove, you gotta place the icon for the check mark
UPDATE:
in light of questioner's comment of multiple fields in the form
Following code should help:
$(document).ready(function() {
bootstrapValidate('#usr', 'min:5:Enter at least 5 characters!', function(isValid) {
if (isValid) {
$("#formHolder").addClass('validClass');
$("#formHolder").removeClass('invalidClass');
} else {
$("#formHolder").addClass('invalidClass');
$("#formHolder").removeClass('validClass');
}
});
bootstrapValidate('#lastName', 'min:7:Enter at least 7 characters!', function(isValid) {
if (isValid) {
$("#formHolder2").addClass('validClass');
$("#formHolder2").removeClass('invalidClass');
} else {
$("#formHolder2").addClass('invalidClass');
$("#formHolder2").removeClass('validClass');
}
});
});
.validClass>input {
border: 2px solid green;
}
.validClass .form-control:focus {
border-color: green;
box-shadow: 0 0 0 0.2rem rgba(33, 93, 30, 0.56)
}
.invalidClass>input,
.invalidClass .form-control:focus {
border: 2px solid red;
}
.inputWrapper {
display: inline-block;
position: relative
}
.validClass:after {
font-family: "Font Awesome 5 Free";
content: "\f00c";
visibility: visible;
font-weight: 900;
color: green;
position: absolute;
right: 6px;
top: 55%;
}
.invalid-feedback {
position: absolute;
display: inline-block;
bottom: -100px;
left: 0px;
}
.submitBtn {
margin-top: 20px;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<div class="container mt-3">
<form>
<div class="form-group">
<div class='inputWrapper invalidClass' id='formHolder'>
<label for="usr">Name:</label>
<input type="text" class="form-control " id="usr">
</div>
<br/>
<div class='inputWrapper invalidClass' id='formHolder2'>
<label for="lastName">last Name:</label>
<input type="text" class="form-control " id="lastName">
</div>
</div>
<button type="submit" class="btn btn-primary submitBtn">Submit</button>
</form>
</div>
Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.
I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.
I have a Thymeleaf template that uses placeholders, where the placeholder attribute specifies a short hint that describes the expected value or format of an input field.
The placeholders work when the input text is empty. But if a field containing previously entered data needs to be edited, the previously entered text disappears and is replaced with placeholder text when the input receives focus.
Is there a way to avoid this ?
the Thymeleaf template
<form class="form-style-9" action="#" th:action="#{/guardian/save}" th:object="${guardian}" method="post">
<ul>
<li>
<input type="text" th:field="*{name}" id="nameInputTextId" name="field1" class="field-style field-split align-left" placeholder="NOMBRE" />
<input type="text" th:field="*{surName}" name="field2" class="field-style field-split align-right" placeholder="APELLIDOS" />
</li>
<li>
<input type="text" th:field="*{description}" name="field1" class="field-style field-split align-left" placeholder="DESCRIPTION" />
<input type="text" th:field="*{mobile}" name="field2" class="field-style field-split align-right" placeholder="TELEFONO" />
</li>
<li>
<input type="text" th:field="*{email}" name="field1" class="field-style field-split align-left" placeholder="EMAIL" />
</li>
<li>
<a href="/guardian/list">
<input type="button" value="CANCELAR" />
</a>
<input type="submit" value="GRABAR" />
</li>
</ul>
</form>
and the HTML generated
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="tdk" />
<!-- FAVICON -->
<link rel="apple-touch-icon" sizes="57x57" href="../../../images_sebloc/favicon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../../images_sebloc/favicon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../../../images_sebloc/favicon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="../../../images_sebloc/favicon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../../../images_sebloc/favicon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../../../images_sebloc/favicon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../../../images_sebloc/favicon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../../../images_sebloc/favicon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="../../../images_sebloc/favicon/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="../../../images_sebloc/favicon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../../../images_sebloc/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="../../../images_sebloc/favicon/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="../../../images_sebloc/favicon/favicon-16x16.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="_sebloc/favicon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<title>tdk</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,700" type="text/css" />
<link rel="stylesheet" href="/fonts/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css_sebloc/styles.css" />
<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="/css/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-datepicker.css" />
<link type="text/css" href="/css/jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #fefefe; padding-left: 2%; padding-bottom: 100px; color: #101010; }
footer{ font-size:small;position:fixed;right:5px;bottom:5px; }
a:link, a:visited { color: #0000ee; }
pre{ background-color: #eeeeee; margin-left: 1%; margin-right: 2%; padding: 2% 2% 2% 5%; }
p { font-size: 0.9rem; }
ul { font-size: 0.9rem; }
hr { border: 2px solid #eeeeee; margin: 2% 0% 2% -3%; }
h3 { border-bottom: 2px solid #eeeeee; margin: 2rem 0 2rem -1%; padding-left: 1%; padding-bottom: 0.1em; }
h4 { border-bottom: 1px solid #eeeeee; margin-top: 2rem; margin-left: -1%; padding-left: 1%; padding-bottom: 0.1em; }
</style>
<!--[if lte IE 8]>
<link rel="stylesheet" href="css_sebloc/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="/css_sebloc/side-menu.css" />
<!--<![endif]-->
<!-- Responsive -->
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css" />
<!--<![endif]-->
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.floatThead.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.simple-dtpicker.js"></script>
</head>
<body>
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<!-- Menu -->
<div id="menu" oncontextmenu="return false" ondragstart="return false" onmousedown="return false">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">
<img src="../../../images_sebloc/home.png" width="136" height="43" alt="POWEREDCUB SL" />
</a>
<!-- Notifications Menu -->
<ul class="pure-menu-list">
<li class="pure-menu-title">Notifications</li>
<li class="pure-menu-item">
<ul class="menu_notifications">
<!-- General Notification -->
<li>
<span><i class="fa fa-bell-o fa-fw"></i></span>
<!--
Alert counter of General notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter"><span>0</span></div>
</li>
<!-- No Connection Notification -->
<li>
<span><i class="fa fa-wifi fa-fw"></i></span>
<!--
Alert counter of No Connection notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter"><span>0</span></div>
</li>
<!-- No Power Notification -->
<li>
<span><i class="fa fa-battery-quarter fa-fw"></i></span>
<!--
Alert counter of No Power notification
1. Add to the div the class show_info
2. Modify the number
-->
<div class="alert_counter show_info"><span>1</span></div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<!-- Start Menu -->
<ul class="pure-menu-list">
<li class="pure-menu-title">Start</li>
<li class="menu-principal pure-menu-item ">
<i class="fa fa-mixcloud fa-lg fa-fw"></i> Home
</li>
<li class="menu-principal pure-menu-item">
<a href="/timeLapse/list" class="pure-menu-link">
<i class="fa fa-calendar-o fa-lg fa-fw"></i> Horarios Alarma
</a>
</li>
<li class="menu-principal pure-menu-item pure-menu-selected">
<a href="/guardian/list" class="pure-menu-link">
<i class="fa fa-calendar-o fa-lg fa-fw"></i> Guardianes
</a>
</li>
<li class="menu-principal pure-menu-item"><i class="fa fa-user fa-lg fa-fw"></i> Account</li>
<li class="menu-principal pure-menu-item"><i class="fa fa-cogs fa-lg fa-fw"></i> SetUp</li>
<li class="menu-principal pure-menu-item">
<i class="fa fa-tv fa-lg fa-fw"></i> Ideefe Web
</li>
<li class="menu-principal pure-menu-item">
<i class="fa fa-question-circle fa-lg fa-fw"></i> Help
</li>
</ul>
</div>
<div id="dm_version" class="version"><b>Device manager </b><span class="orange">V 0.1.2</span><br />© Ideefe and Wits 2016
</div>
</div>
<div id="main">
<!-- Header Menu -->
<div id="menu_header" class="header">
<ul class="menu_icon">
<li>
<span><i class="fa fa-user fa-lg"></i></span>
<!-- User -->
Sebloc demo<i class="fa fa-angle-down user_name_down"></i>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content">
<div class="pure-g">
<div class="pure-u-1-1 pure-u-xl-14-24 pure-u-med-1">
<!-- Content Left Wrap -->
<div id="devices" class="content_l_wrap">
<div class="windowHead">
<h2>NUEVO GUARDIAN</h2>
<!-- Pagination & Search Module -->
<div class="search_module">
</div>
<i class="fa fa-chevron-up"></i>
</div>
<div class="windowContent">
<div class="store_content" data-mcs-theme="dark-3">
<style type="text/css">
.form-style-9{
max-width: 750px;
background: #FAFAFA;
padding: 30px;
margin: 50px auto;
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 6px solid #901E3C;
}
.form-style-9 ul{
padding:0;
margin:0;
list-style:none;
}
.form-style-9 ul li{
display: block;
margin-bottom: 10px;
min-height: 35px;
}
.form-style-9 ul li .field-style{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}.form-style-9 ul li .field-style:focus{
box-shadow: 0 0 5px #B0CFE0;
border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
width: 49%;
}
.form-style-9 ul li .field-full{
width: 100%;
}
.form-style-9 ul li input.align-left{
float:left;
}
.form-style-9 ul li input.align-right{
float:right;
}
.form-style-9 ul li textarea{
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"],
.form-style-9 ul li input[type="submit"] {
-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
box-shadow: inset 0px 1px 0px 0px #3985B1;
background-color: #216288;
border: 1px solid #17445E;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
padding: 8px 18px;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover,
.form-style-9 ul li input[type="submit"]:hover {
background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
background-color: #28739E;
}
</style>
<form class="form-style-9" action="/guardian/save" method="post">
<ul>
<li>
<input type="text" id="nameInputTextId" name="name" class="field-style field-split align-left" placeholder="NOMBRE" value="" />
<input type="text" name="surName" class="field-style field-split align-right" placeholder="APELLIDOS" id="surName" value="" />
</li>
<li>
<input type="text" name="description" class="field-style field-split align-left" placeholder="DESCRIPTION" id="description" value="" />
<input type="text" name="mobile" class="field-style field-split align-right" placeholder="TELEFONO" id="mobile" value="" />
</li>
<li>
<input type="text" name="email" class="field-style field-split align-left" placeholder="EMAIL" id="email" value="" />
</li>
<li>
<a href="/guardian/list">
<input type="button" value="CANCELAR" />
</a>
<input type="submit" value="GRABAR" />
</li>
</ul>
<input type="hidden" name="_csrf" value="a5ecc9df-964e-4824-8402-926db7f377f6" /></form>
</div>
</div>
<div class="windowFoot">
</div>
</div>
</div>
<div class="pure-u-1-1 pure-u-xl-10-24 pure-u-med-1">
<!-- Content right Wrap -->
<div class="content_r_wrap">
<!-- Devices Map Module -->
<div class="windowHead">
<h2>LOCATION INFO</h2>
<i class="fa fa-chevron-up"></i>
</div>
<div class="windowContentMap">
<div>
API GOOGLE MAPS (iframe configuration must be width 100% height 100%)
</div>
</div>
<div class="windowFoot">
<div class="windowFootL"><span>ADDRESS:</span> Rue du Marteau Nº25 BTE65</div>
<div class="windowFootR"><span>WORKER:</span> Name Surname</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById("nameInputTextId").focus();
</script>
<!-- Js zone -->
<script src="../../../js/ui.js"></script>
</body>
</html>
I figure out the problem. Removing this file it solved the problem
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
I think this issue has nothing to do with the placeholder being set. It may be due to the reason that you specified the value attribute to be "" ie
in the textfields you specified value = "" .this makes the value of the text field empty and when the text field is empty the placeholder is shown.
try removing value = "".
I have integrated a drop-down menu into my search-bar(using Bootstrap)
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>
The textboxes in drop-down act as search filters.
Currently that drop-down menu doesn't hide unless the user clicks outside of that menu. Hence it blocks the other content.
I'm trying to achieve the following :
If I enter a particular data in the textbox and hit enter the drop-down contents should hide.
e.g. I enter 1234 as a search term insisde RequestNo. and Hit Enter the entire drop-down list should get hidden (or collapse back)
(I don't require mouse-hover to achieve this)
What additions should I do to my code to accomplish this?
You can use keycode to close dropdown on enter press
$('.dropdown-menu.dropdown-menu-right').keypress(function (e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
$('.dropdown-menu.dropdown-menu-right').keypress(function(e) {
if (e.keyCode == 13) {
$('.dropdown.dropdown-lg').removeClass('open');
}
});
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font-size:16px;background-color:#F7F7F7">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtRequestNo" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" />
</div>
<label for="CreatedBy" class="col-xs-2 col-form-label">Created By</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
</div>
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
</div>
</div>
</div>
</div>
</div>