I'm working on a login page on my site button for some reason the submit button isn't clickable when the sidenav is out (I'm using the materialize framework).
I have modified my sidenav a bit so that the overlay is removed when it is out and it doesn't close when clicked outside it.
$('.button-collapse').sideNav({
menuWidth: 260,
edge: 'left',
closeOnClick: true
}
);
//Unbind sidenav click to close
$(function(){
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
html,body {
height: 100%;
background-color:
}
header, main, footer, header{
padding-left: 0 auto;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
.rotate90 {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.text1 {
color: #212121;
}
.text2 {
color: #757575;
}
nav.top-nav {
background-color: #303F9F;
}
.title-text {
font-family: Roboto;
font-weight: bold;
}
a.bold, .bold {
font-family: Roboto;
font-weight: bold;
}
a.light, .light {
font-family: Roboto;
font-weight: normal;
}
#sidenav-overlay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<nav class="top-nav">
<div class="container">
<i class="material-icons">menu</i>
<div class="navbar-wrapper">
Icy Fire
</div>
</div>
</nav>
<ul id="slide-out" class="side-nav">
<h4 class="title-text center-align">Navigation</h4>
<div class="divider"></div>
<li>Account</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal bold">Pages<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
Index
</div>
</li>
</ul>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<h2 class="indigo-text">Login</h2>
<div class="divider"></div>
<form class="col s12" action="login.php" method="POST">
<div class="input-field">
<input id="username" type="text" class="validate" name="username" required>
<label for="username">Username</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate" name="password" required>
<label for="password">Password</label>
</div>
<div class="input-field">
<input type="checkbox" id="indeterminate-checkbox" name="remember" value="on" />
<label for="indeterminate-checkbox">Remember me</label>
</div>
<button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
<h5 class="indigo-text"><?php getMsg(); ?></h5>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
Here it is on my website: link
You have a <div class="drag-target"> that's revealed along with the menu. This is overlaying your entire form. You can see for yourself by right clicking over top of the submit button and clicking Inspect Element in the dropdown menu.
it is because of your drag target is drag-target right is 0 which blocks your button which is position to right
remove the css attribute
right: 0;
in your drag-target element
Related
I am working on a login split screen, and had it perfectly aligned with bootstrap:
It has been requested that the left side image change when the page reloads. I have found a way to do this with JavaScript, and worked it into my code, but it has made the images wonky. There is a space on the left side, an unnecessary scroll bar because the height is off as well, and the image is no longer responsive. Obviously I had to change the code to get the js to run, and the js runs perfectly, but now the layout is screwed up:
The css has stayed the same for both examples, but I feel I should share it anyways:
I have gotten so close, I just can't seem to figure out a way to fix the image. Any help would be greatly appreciated.
Here is the full code:
html:
<div class="container-fluid">
<div class="row no-gutter">
<!-- The image half -->
<div class="col-md-7 d-none d-md-flex bg-image">
<img id="myPicture" class="w-100">
</div>
<!-- The content half -->
<div class="col-md-5">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-7 mx-auto">
<h3 class="display-4">Student Login</h3>
<form action="index.html">
<div class="form-group mb-4">
<input id="inputStudentID" type="studentID" placeholder="Student ID"
required="required" autofocus=""class="form-control border-3 shadow-sm px-6">
</div>
<div class="form-group mb-4">
<input id="inputPassword" type="password" placeholder="Password"
required="required" class="form-control border-3 shadow-sm px-6">
</div>
<div class="custom-control custom-checkbox mb-4">
<input id="customCheck1" type="checkbox" checked class="custom-control-
input">
<label for="customCheck1" class="custom-control-label">Remember Me</label>
</div>
<button type="submit" style="margin-left: 1px"
class="btn btn-block text-uppercase mb-3 border-3 shadow-sm">Sign In</button>
<div class="text-center d-flex justify-content-between">
<p>Forgot Password?</p>
</div>
<div class="text-center d-flex justify-content-between">
<p>Need to <a href="https://my.ntc.edu/psp/csprod/?cmd=login">
Create Student Account?</a></p></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.login,
.image {
min-height: 100vh;
color: #999999;
font-family: "Roboto", sans-serif;
}
.bg-image {
background-size: cover;
background-position: center center;
}
p {
color: #999999;
}
a {
color: #4285f4;
}
a:hover {
text-decoration: none;
color: #0f459b;
}
.display-4 {
font-size: 40px;
color: #999999;
}
#inputStudentID,
#inputPassword {
padding: 25px 0 25px 12px;
}
.btn {
background-color: #4285f4;
color: white;
}
.btn:hover {
background-color: #0f459b;
color: white;
}
.has-error input[type="text"],
.has-error input[type="email"],
.has-error select {
border: 1px solid #a94442;
}
js:
<script type="text/javascript">
window.onload = choosePic;
var myPix = new Array("images/girls.png", "images/group.png",
"images/studentbw.png", "images/stairs.png",
"images/purple.png", "images/portrait.png");
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
}
</script>
Kindly use class="img-responsive" in image tag...
Kindly use class="img-responsive" in image tag...
<img id="myPicture" class="img-responsive" />
This change is enough for your issue....
This change is enough for your issue....
I am developing mobile app. I am using HTML, CSS, bootstrap, JavaScript for development. When the user taps on the textbox inside the footer, the keyboard pops up, screen is not moving up for android phones, but for ios it is working fine. I am trying to scroll down to the bottom div when the user taps on the textbox.
<body onload="hidebtn()">
<header class="topBar">
<ul class="nav nav-tabs row" id="myTab" role="tablist">
<li class="nav-item col">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
</li>
</ul>
</header>
<br><br>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="container">
<div class="row h-100">
<div id="topButtons" class="card-body" style="padding: 0; margin-top: 12px; height: 80px;"></div>
<div id="chatBody" class="card-body anyClass">
<p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
<p class="WC_message_fl sahlaIntro"> Type your Questions & Start chatting</p>
</br></br>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" >
</br></br>
<p class="WC_message_fl" id='msg_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="table"></div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" >
</br></br>
<p class="WC_message_fl" id='msg_sr_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="sr_table"></div></div>
</div>
</div>
<footer id="footerChtbt" style="position:fixed;bottom:0;right:0;left:0;line-height: 20px;background-color: #ECEFF1;font-size: 0.6rem;border-top: 1px solid #aaa;box-shadow: 0 1px 5px 0 #9B9B9B;">
<span id="sahlaResp" style="color:blue; position: relative;left: 7vw;top:0;"></span>
<div class="container">
<div class="row">
<div class="col-10">
<input id="query" type="text" class="form-control" placeholder = 'Ask Sahla bot...'" onkeyup="pressedkey(event)" onClick="clickedQuery()" style="outline:0;box-shadow:none;font-size:14px;" required/>
</div>
<div class="col-2" style="padding: 0; margin-top: 2px;">
<img src="images/send_icon.svg" name="submitbtn" onClick="sendbtn()" style="cursor: pointer; width: 38px;">
</div>
</div>
</div>
</footer>
I am trying to scroll down to the div on click of textbox
function clickedQuery() {
setTimeout(function(){ $("#chatBody").scrollTop($("#chatBody")[0].scrollHeight); }, 100);
};
I've been checking your code, that sincerely you could have cleaned a bit for us... You should send us a link were we can properly check the problem. However I'll try to guide you with the little info I have.
In my experience, browsers resize when the keyboard opens on mobile. The content "overlapped" by the keyboard is accessible scrolling down. The real overlap happens on apps that has set the option to not resize when opening the keyboard. In that case, you never put inputs that can be overlapped, or if you do, you can make them position over the top line of the keyboard when receive the focus.
To do that you normally use position: fixed to position your input just on top of the bottom line of the viewport which should match the top line of the keyboard.
body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #ccc;
}
input {
margin: 6px;
}
input:focus {
position:fixed;
bottom: 0;
width: calc(100% - 12px);
}
<footer>
<input id="input" type="text">
</footer>
But as you report that your content is being overlapped maybe there is something else that I can't check without an online version of your code. So another solution is to use JS to relocate your whole footer. Then you can style it as you will to make it look nicer.
Aside of that. I recommend you add a button that blurs the input field in case the users doesn't finally want to summit. That will close the keyboard.Something like this
Hope this solves your issue.
$('#input').on('focus', function(){
$(this).parent('footer').css('bottom', '50%');
});
body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 6px;
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<input id="input" type="text">
</footer>
Im trying to get the navbar to stick on scroll I ve applied what ive found on w3schools and looked at a few posts here Im not getting it to work though. My codepen is:
https://codepen.io/robot_head/full/qKQwqe/
my code is as follows
html:
<header class="header-logo">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">client</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Info</li>
</ul>
</div>
</div>
</nav>
<div class="header-img">
<img src="img/logo.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</header>
css:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
JS:
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
Since you're using Bootstrap 3, you can avoid using JS for the sticky navbar. In particular, note that I added the class navbar-fixed-top to the header. Here's the working code:
.header-logo {
height: 400px;
background-color: #06529d;
margin-bottom: 30px;
}
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
background-color: #06529d;
}
/*about us */
#about {
background-color: #06529d;
height: 600px;
color: #fff;
}
#lion-img {
display: block;
margin-left: auto;
margin-right: auto;
}
/*contact us */
#contact {
background-color: #febb2e;
height: 500px;
color: #000;
}
.form-area {
background-color: #FAFAFA;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
.control {
display: block;
width: 100%;
height: 50px;
padding: 6px 10px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
button#submit {
background-color: #8d1f2d;
border-color: #8d1f2d;
width: 100%;
height: 50px;
border-radius: 10px;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #06529d;
height: 300px;
padding: 25px;
}
.red {
color: red;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header class="header-logo">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Info</li>
</ul>
</div>
</div>
</nav>
<div class="header-img">
<img src="img/logo.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</header>
<div>
<div class="container text-center">
<img src="img/ceylon-hero.jpg" class="img-responsive" style="width:100%" alt="Image">
</div>
</div>
<div class="container-fluid bg-3 text-center" id="about">
<h3>ABOUT US</h3>
<br>
<div class="container text-center" id="lion-cage">
<img src="img/lion.png" class="img-responsive" id="lion-img" alt="Image">
</div>
<div class="container about-text">
<p>Hands long clothes execution dock careen lass overhaul code of conduct jib chandler broadside scuttle grog boom port salmagundi coffer Jack Tar mizzen gibbet come about. Wherry Davy Jones' Locker tack sutler Cat o'nine tails lanyard barkadeer jury
mast hail-shot spyglass plunder broadside port sloop galleon Pirate Round furl careen bilge rat weigh anchor. Arr keel schooner Jack Tar Blimey cackle fruit spirits trysail sheet loaded to the gunwalls lugger Cat o'nine tails line gibbet Pirate
Round cable bilge water chantey swing the lead Privateer.</p>
<br>
<p>Lugger bilge deadlights ye spirits wench bilged on her anchor bring a spring upon her cable Plate Fleet killick dead men tell no tales me Jack Tar Cat o'nine tails Corsair coxswain nipper fire ship yard ahoy. Log mizzen line ho tack blow the man down
heave down yard hulk crack Jennys tea cup fluke schooner main sheet sheet fathom dance the hempen jig Blimey hands cable hearties. Blow the man down lanyard Plate Fleet grog blossom Sink me wherry come about ho American Main Arr brigantine overhaul
gabion ahoy hornswaggle nipperkin log Sea Legs keelhaul Blimey.</p>
<br>
<p>Me run a rig Buccaneer swing the lead Sink me hardtack capstan smartly tender Brethren of the Coast scuppers brig jib Barbary Coast belaying pin belay careen coffer matey Spanish Main. Transom dead men tell no tales lookout hempen halter grapple square-rigged
Spanish Main handsomely fore loot shrouds bring a spring upon her cable red ensign man-of-war avast cable fathom grog keelhaul jack. Cackle fruit jack wherry chandler cutlass Buccaneer grog blossom crack Jennys tea cup warp bilge rat haul wind sheet
bilge water Jack Ketch matey chase red ensign deadlights execution dock gaff.</p>
</div>
</div>
<div class="container-fluid bg-3 text-center" id="contact">
<h3>CONTACT US</h3>
<br>
<div class="container">
<div class="col-sm-8 col-sm-push-2">
<form role="form">
<br style="clear:both">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="firstname" name="firstname" placeholder="First Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="control" id="lastName" name="lastName" placeholder="Last Name" required>
</div>
<div class="form-group">
<input type="text" class="control" id="phone" name="phone" placeholder="Phone" required>
</div>
</div>
<div class="col-sm-12">
<button type="button" id="submit" name="submit" class="btn btn-primary">SEND</button>
</form>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center" id="info">
<p>Footer Text</p>
</footer>
Notice that if you were to use Bootstrap 4, the class that you would have to add is either sticky-top or fixed-top.
The reason why your JS isn't working is that you're getting the navbar by ID, when navbar is actually a class. A quick fix to keep using your JS, is to add the ID navbar, like so:
<nav class="navbar navbar-inverse" id="navbar">
Your edited codepen looks like this: https://codepen.io/robot_head/pen/qKQwqe
I have Used Bootstrap here....My popover tootip position is not correct. As I want it to appear in the extreme right corner with the Glyphicon but it still appears at the left Position.
So, what I Tried earlier :
1) I just changed the CSS and tried to align the popover on the right but it did not work.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title : 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
.form-control {width:120px;}
.popover {
max-width:300px; }
#contact_query.btn.btn-primary
{
background-color:#74a5d0;
}
#call_icon.glyphicon.glyphicon-earphone {
position: fixed;
top: 8px;
right: 16px;
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary
{
font-size:13px;
}
#query-pos
{
font-size:13px;
}
#email-pos
{
font-size:13px;
}
#ph_1,#ph_2
{
font-size:13px;
}
}
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="right" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12" ><div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12" ><div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div></div>
</div><hr>
<div class="row">
<div class="col-xs-12"><p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p></p></div></div>
<div ><hr><p><b>Or you can</b><br/><p id="email-pos">E-mail us # example#example.com</p></p></div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>
Add position: fixed on the anchor that opens the popup instead of the icon. Because popover is trying the align the popover relative to the anchor that opens it. And the position of the anchor is still at left as its not position: fixed to the right.
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
Also changed the data-placement to left, as there is no space on right.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title: 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
.form-control {
width: 120px;
}
.popover {
max-width: 300px;
}
#contact_query.btn.btn-primary {
background-color: #74a5d0;
}
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary {
font-size: 13px;
}
#query-pos {
font-size: 13px;
}
#email-pos {
font-size: 13px;
}
#ph_1,
#ph_2 {
font-size: 13px;
}
}
<!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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a class="phone_icon" data-placement="left" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12">
<div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p>
</p>
</div>
</div>
<div>
<hr>
<p><b>Or you can</b><br/>
<p id="email-pos">E-mail us # example#example.com</p>
</p>
</div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>
I have an issue with my bootstrap show password eye icon, only appearing half of it I have tried everything that I can think of, including the following:
Removing other CSS/SCSS scripts
Altering the append input class.
Here's My issue demo here ill add relevant code only also below:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
What really does work? only if i add the exact bootstrap code css does the eye work, but that also makes the rest of my sites css get screwed up! Demo of what I mean:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
Relevent code:
Password Input Field
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100" data-toggle="password">
</div>
</div>
</div>
Bootstrap CDN CSS I use:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-
eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-
warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-
plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-
gift:before{content:"\e102"}.glyphicon-
leaf:before{content:"\e103"}.glyphicon-
fire:before{content:"\e104"}.glyphicon-eye-
open:before{content:"\e105"}.glyphicon-eye-
close:before{content:"\e106"}.glyphicon-warning-
sign:before{content:"\e107"}.glyphicon-
plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
Demo Of just The one input:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://antimalwareprogram.co/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-body">
<form>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
JSFiddle With Just Input field
Note: It works only when a ad blocker is enabled but only shows a emoji then!
Another Note: With Font Awesome, it doesnt show anything with ad blocker, but without it is still half an eye!
The bootstrap css that you are including is different to the JS that you are including. Use the official CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Also, make sure you close all your tags. Unclosed tags can do strange things to the layout.
Here is a working fiddle: https://jsfiddle.net/sveynh3z/
Apologies for being late to the party but I see that some of the snippets here don't appear to be working correctly so here's my one. Should it be of any use.
If you're getting an error viewing the snippet (using Chrome), please use the JSFiddle.
var timeoutId = 0;
$('#check').on('mousedown', function() {
$('#eye').removeClass( "glyphicon glyphicon-eye-close" );
$('#eye').addClass( "glyphicon glyphicon-eye-open" );
$('#password').attr('type', 'text');
timeoutId = setTimeout(1000);
}).on('mouseup mouseleave', function() {
$('#password').attr('type', 'password');
$('#eye').removeClass( "glyphicon glyphicon-eye-open" );
$('#eye').addClass( "glyphicon glyphicon-eye-close" );
clearTimeout(timeoutId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3>Show Password Example:</h3>
<div class="input-group">
<input type="password" id="password" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="check"><span id="eye" class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>