Here is what it looks like when I click it and it is not clickable it just have a color of black.
Here is what it should look like.
This for when I click Change Password
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark pro-pic"
href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Account</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated">
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="modal" data-placement="top" href="#account_edit"><i class="ti-settings "></i> Change Password</a>
This for the modal
<div class="modal fade" id="account_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- ############## -->
<form action="account_edit.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input disabled="disabled" type="email" name="user_email" value="<?php echo $row['user_email']; ?>" class="form-control" id="exampleInputEmail1" placeholder="" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" value="" class="form-control" id="exampleInputEmail1" placeholder="" required>
<input type="hidden" name="id" value="<?php echo $id; ?>" class="form-control" id="exampleInputEmail1" placeholder="" required>
</div>
<input type="submit" name="submit" value="Save" class="btn btn-success">
</form>
<!-- bodyyyyyyyyyyyy///// -->
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-primary" type="button">Close</button>
</div>
</div>
</div>
</div>
Related
Im pretty new to HTML and bootstrap
I made a centered form but i want to add a small button (red cross) on the right of my "chapter title" input field and i dont know how do i do it
Current html:
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
what do i need to add or change
Use float-right along with the negative margin utility class, for example mr-n4...
<div class="container">
<button class="btn btn-text float-right mr-n4 close">
<span aria-hidden="true">×</span>
</button>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
</div>
https://codeply.com/p/CliBMjnlsN
#Zim's answer works, but I just don't like working with floats so I came up another solution with absolute positioning.
<form>
<div class="form-group form-group-with-extra-button">
<input type="text" class="form-control" placeholder="Chapter title" required>
<button type="button" class="btn btn-extra">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<textarea class="form-control" rows="15"></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
.form-group-with-extra-button {
position: relative;
}
.form-group-with-extra-button .btn-extra {
position: absolute;
left: 100%;
top: 0;
color: var(--danger);
}
demo: https://jsfiddle.net/davidliang2008/1dpz0w52/24/
Thats not really what i wanted but i guess thats what im gonna stick to
<form>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Chapter title" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Delete chapter</a>
<a class="dropdown-item" href="#">Add chapter before</a>
<a class="dropdown-item" href="#">Add chapter after</a>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" rows="10"></textarea>
</div>
<div class="form-group" align="center">
<button class="btn btn-outline-secondary" id="add-chapter">Add chapter</button>
</div>
</form>
I'm using a primaly bootstrap from getbootstrap.com. I want to align properly the account type dropdown here. Also the dropdown list items are not properly aligned to the dropdown button. Please help.Thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center">
<div class="form-group">
<div class="col-sm-12">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Account type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Supplier</li>
<li>Client</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="supplieruname" class="col-sm-2 control-label">Username:</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
</div>
<div class="form-group">
<label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
</div>
<div class="form-group">
<label for="acctype" class="col-sm-2 control-label">Account Type</label>
<div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group"><input class="btn" type="submit" value="Save">
<input type="reset" class="btn" name="clear" value="Clear">
</div>
</div>
</form>
Add class btn-group to the dropdown.so the dropdown won't get the 100% width.Thus the dropdown menu will be aligned to center.Or add display:inline-block style to the .dropdown
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data" align="center">
<div class="form-group">
<div class="col-sm-12">
<div class="dropdown btn-group">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Account type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Supplier</li>
<li>Client</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="supplieruname" class="col-sm-2 control-label">Username:</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplieruname" placeholder="Username" tabindex="1" required></div>
</div>
<div class="form-group">
<label for="supplierpassword" class="col-sm-2 control-label">Set Password</label>
<div class="col-sm-4"><input type="text" class="form-control" id="supplierpassword" placeholder="Password" tabindex="2" float="right" required></div>
</div>
<div class="form-group">
<label for="acctype" class="col-sm-2 control-label">Account Type</label>
<div class="col-sm-4"><input type="text" class="form-control" id="acctype" placeholder="Company Name" tabindex="3" float="right" required></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group"><input class="btn" type="submit" value="Save">
<input type="reset" class="btn" name="clear" value="Clear">
</div>
</div>
</form>
For the time being, you can apply the following come back later to fix.
Fix it on the page.
<style>
.dropdown, .dropup {
position: fixed;
z-index: 999;
float:center;
}
.form-group{margin-bottom:20px;}
</style>
I am trying to set up a modal with tabs in it. This is for login/signup. However, instead of just substituting the the sign up form when it is clicked, it just stacks it below the login form. Bootply link: http://www.bootply.com/5ssZsWHIzv
Any help would be much appreciated!
Your col-md-6 class is in a wrong place, you should nest the two column outside of the tab content div. I've modified the code.
Bootply: http://www.bootply.com/fE04YpZxgN
<button class="btn btn-primary btn-sm" href="#signup" data-toggle="modal" data-target=".bs-modal-sm" style="margin-top: 10px">Sign In/Register
</button>
<div class="modal fade bs-modal-sm" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content clearfix">
<br>
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active">Sign In</li>
<li class="">Register</li>
</ul>
</div>
<div class="modal-body">
<div class="col-md-6">
<div id="myTabContent row" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="signinTab">
<form class="form-horizontal" id="loginForm">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div id="loginErrors">
</div>
<div class="control-group">
<label class="control-label" for="loginEmail">Email:</label>
<div class="controls">
<input id="loginEmail" name="email" type="text" class="form-control" placeholder="username#example.com">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
<input id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
<div class="btn-toolbar">
<button id="signin" name="signin" class="btn btn-success">Sign In
</button>
<button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div role="tabpanel" class="tab-pane fade" id="signup">
<form class="form-horizontal" id="signUpForm">
<fieldset>
<!-- Sign Up Form -->
<div id="signUpErrors">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email">Email:</label>
<div class="controls">
<input id="Email" name="Email" class="form-control" type="text" placeholder="example#example.com">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">First Name:</label>
<div class="controls">
<input id="firstName" name="firstName" class="form-control" type="text" placeholder="John">
</div>
</div>
<div class="control-group">
<label class="control-label" for="userid">Last Name:</label>
<div class="controls">
<input id="lastName" name="lastName" class="form-control" type="text" placeholder="Smith">
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="password">Password:</label>
<div class="controls">
<input id="password" name="password" class="form-control" type="password" placeholder="********">
<em>Must have atleast one number</em>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="reenterpassword">Re-Enter
Password:</label>
<div class="controls">
<input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********">
</div>
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="confirmsignup"></label>
<div class="controls">
<div class="btn-toolbar">
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up
</button>
<button type="button" id="closeModal" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="col-md-6 pull-right">
<a class="btn btn-block btn-social btn-facebook">
<span class="fa fa-facebook"></span> Sign in with Facebook
</a>
<a class="btn btn-block btn-social btn-foursquare">
<span class="fa fa-foursquare"></span> Sign in with Foursquare
</a>
<a class="btn btn-block btn-social btn-openid">
<span class="fa fa-openid"></span> Sign in with OpenID
</a>
<a class="btn btn-block btn-social btn-google">
<span class="fa fa-google"></span> Sign in with Google
</a>
<a class="btn btn-block btn-social btn-google">
<span class="fa fa-google"></span> Sign in with Google
</a>
</div>
</div>
</div>
</div>
</div>
I have the following code on 2 pages:
<input class="btn btn-primary" type="button" value="Sign Up" data-toggle="modal" data-target="#myModal"/>
<!-- my modal dialog-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Create New User</h4>
</div>
<div class="modal-body">
<form id="myform" action="add_user.php" method="POST">
<div class="form-group">
<input class="form-control" type="text" id="username" name="username" placeholder="Username"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-input" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<input class="form-control" type="password" id="password-confirm-input" placeholder="Confirm Password" onblur=";"/>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="User Type"/>
</div>
<div class="form-group" id="msg">
<input class="form-control" type="text" name=email placeholder="E-mail Address"/>
</div>
<div>
<label id="label" for="male"></label>
</div>
<br>
<div class="form-group pull-right">
<input class="btn btn-success" type="submit" id="create_user2" value="Create User"/>
</div>
</form>
</div>
</div>
</div>
</div>
This code works on the index.php page, a modal dialog pops up.
in another page, dashboard.php, it does not.
I have the exact same button and modal code in the body tags
Be sure you have bootstrap JS references in both pages:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I'm trying to make authentication/registration page via bootstrap on wordpress
Here is my code which I inserted with Bootstrap Modal.
The problem is that when I enter login/password and hit Enter button, it just closes modal. when I click to open the modal again, my typed information is there and I still can click login button to login. I coped code from WordPress login page (which engine I'm currently using).
How to make Enter log me automatically?
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 id="Login">
<ul class="nav nav-pills">
<li class="active">ავტორიზაცია</li>
<li>რეგისტრაცია</li>
</ul>
</h5>
</div>
<div class="pill-content">
<div class="pill-pane active" id="loginpill">
<div class="modal-body">
<form name="loginform" id="loginform" action="/wp-login.php" method="post">
<p>
<input type="text" name="log" id="user_login" class="input span5" style="height:50px;font-size:20px" placeholder="სახელი" size="40" /></label>
</p>
<p>
<input type="password" name="pwd" id="user_pass" class="input span5" style="height:50px;font-size:20px" placeholder="პაროლი" size="40" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> დამიმახსოვრე</label></p>
</div>
<div class="modal-footer">
პაროლის აღდგენა
<button class="btn" data-dismiss="modal" aria-hidden="true">დახურვა</button>
<input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary" value="შესვლა" />
<input type="hidden" name="redirect_to" value="/" />
<input type="hidden" name="testcookie" value="1" />
</div>
</form>
</div>
<div class="pill-pane" id="registrationpill">.v..</div>
</div>
</div>
Try putting the button that closes the modal outside of <form>:
<div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 id="Login">
<ul class="nav nav-pills">
<li class="active">ავტორიზაცია</li>
<li>რეგისტრაცია</li>
</ul>
</h5>
</div>
<div class="pill-content">
<div class="pill-pane active" id="loginpill">
<div class="modal-body">
<form name="loginform" id="loginform" action="/wp-login.php" method="post">
<p>
<input type="text" name="log" id="user_login" class="input span5" style="height:50px;font-size:20px" placeholder="სახელი" size="40" /></label>
</p>
<p>
<input type="password" name="pwd" id="user_pass" class="input span5" style="height:50px;font-size:20px" placeholder="პაროლი" size="40" /></label>
</p>
<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> დამიმახსოვრე</label></p>
</form>
</div>
<div class="modal-footer">
პაროლის აღდგენა
<button class="btn" data-dismiss="modal" aria-hidden="true">დახურვა</button>
<input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary" value="შესვლა" />
<input type="hidden" name="redirect_to" value="/" />
<input type="hidden" name="testcookie" value="1" />
</div>
</div>
<div class="pill-pane" id="registrationpill">.v..</div>
</div>
</div>