Code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">`
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -->
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--custom css-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<h1>Welcome to Bootstrap 4.0 !</h1>
<p>This is the platform that was created by twitter and is used in every website today</p>
<form action="" class="form-inline">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control
form-control-lg" placeholder="Tanveer">
</div>
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control
form-control-lg" placeholder="tanveer#example.com ">
</div>
<button type="submit" class="btn btn-success btn-lg">Submit</button>
</form>
</div>
</div>
</div>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-full"
id="nav-main"> <a class="navbar-brand" href="#">Bootstrap 4.0</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> </div> </nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js""></script>
</body>
</html>
One vary basic and simple way to change a html tag to be in the center is to use align attribute:
<form align="center">
This sentence will be in the center!
</div>
Please try and change this code:
<form action="" class="form-inline" >
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
To:
<form action="" class="form-inline" align="center">
<div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control form-control-lg" placeholder="Tanveer">
<div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control form-control-lg" placeholder="tanveer#example.com "> Submit
</div>
</div>
</form>
Another way is to add the "text-align: center;" in your CSS file.
You can use below CSS to align form in the center with content.
form {
display: block;
margin: 0 auto;
text-align: center;
}
Related
I'm stuck on showing a search bar, based on a selected option in a dropdown.
My html has the following components:
The style: to hide when not selected;
<style>
.form-inline{
display: none;
}
</style>
My dropdown with the selections;
<div class="dropdown">
<select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
<option value="Wolfram" >Wolfram</option>
<option value="Approach_Zero">Approach zero</option>
<option value="Google">Google</option>
</select>
</div>
Then my content: my different divs that need to be shown when selected:
<div class="content">
<div id="Wolfram" class="form-inline">
<input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
<button class="btn btn-outline-success" id="search-button1">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Approach_Zero" class="form-inline">
<input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
<button class="btn btn-outline-success" id="search-button2">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Google" class="form-inline">
<input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
<button class="btn btn-outline-success" id="search-button3">
<i class="fa fa-search"></i>
</button>
</div>
</div>
The script that should take care of the logic:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script>
<script>
$(document).ready(function(){
$("#searchEngine").on('change', function(){
$(".form-inline").hide();
$("#" + $(this).val()).fadeIn(700);
});
});
</script>
But this doesn't seem to work and I can't see why. Anyone an idea what's going wrong??
EDIT
Based on the comments, I try to adjust the code and it works in the demo.
See below.
However(!), It doesn't work in my html but the only thing that I do differently is running the javascript in my html file. But this doesn't work for some reason. Why not??
$(document).ready(function () {
$("#searchEngine").on('change', function () {
$(".form-inline").hide();
$("#" + $(this).val()).fadeIn(700);
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class="card text-center">
<div class="card-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<style>
nav {
font-family: 'Roboto Mono', monospace;
}
.form-inline{
display: none;
}
</style>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'cv_index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'project_index' %}">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'blog_index' %}">Blog</a>
</li>
</ul>
</div>
<div class="dropdown">
<select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
<option value="Wolfram" >Wolfram</option>
<option value="Approach_Zero">Approach zero</option>
<option value="Google">Google</option>
</select>
</div>
<div class="content">
<div id="Wolfram" class="form-inline">
<input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
<button class="btn btn-outline-success" id="search-button1">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Approach_Zero" class="form-inline">
<input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
<button class="btn btn-outline-success" id="search-button2">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Google" class="form-inline">
<input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
<button class="btn btn-outline-success" id="search-button3">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="container">
{% block page_content %}{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
and my code looks like this (one html file):
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class="card text-center">
<div class="card-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<style>
nav {
font-family: 'Roboto Mono', monospace;
}
.form-inline{
display: none;
}
</style>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'cv_index' %}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'project_index' %}">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'blog_index' %}">Blog</a>
</li>
</ul>
</div>
<div class="dropdown">
<select id="searchEngine" class="form-control mr-sm-2" style="background-color:#00FFFF;">
<option value="Wolfram" >Wolfram</option>
<option value="Approach_Zero">Approach zero</option>
<option value="Google">Google</option>
</select>
</div>
<div class="content">
<div id="Wolfram" class="form-inline">
<input class="form-control mr-sm-2" id="search-input1" style="width: 18rem" placeholder="Search Wolfram">
<button class="btn btn-outline-success" id="search-button1">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Approach_Zero" class="form-inline">
<input class="form-control mr-sm-2" id="search-input2" style="width: 18rem" placeholder="Search Approach Zero">
<button class="btn btn-outline-success" id="search-button2">
<i class="fa fa-search"></i>
</button>
</div>
<div id="Google" class="form-inline">
<input class="form-control mr-sm-2" id="search-input3" style="width: 18rem" placeholder="Search Google">
<button class="btn btn-outline-success" id="search-button3">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<script>
$(document).ready(function () {
$("#searchEngine").on('change', function () {
$(".form-inline").hide();
$("#" + $(this).val()).fadeIn(700);
});
});
</script>
</div>
</nav>
</div>
</div>
<div class="container">
{% block page_content %}{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
What's going wrong?
Use:
$("[id='" + $(this).val() + "']").fadeIn(700);
instead of
$("#" + $(this).val()).fadeIn(700);
Reason: The IDs contain spaces and in such cases, you can use an attribute selector. In your code, an element with id 'Approach Zero' is translated as $("#Approach Zero") which is a different selector altogether.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/6052/
I'm trying to click on a button tab and allow it to open up my content but it will not work. I seem to have the right code but it's still not working. I want it to be able to open my content once I click the button tab. This is really confusing I think I have tried everything
<%per_sel = "false"
job_sel = "false"
per_link = "nav-link"
job_link = "nav-link"
per_class = "tab-pane fade"
job_class = "tab-pane fade"
per_dis = " disabled"
job_dis = " disabled"
if app_pg >=5 then
per_sel = "true"
per_dis = ""
end if
if app_pg = 5 then
per_class = "tab-pane fade show active"
per_link = "nav-link active"
end if
if app_pg >=6 then
job_sel = "true"
job_dis = ""
end if
if app_pg = 6 then
job_class = "tab-pane fade show active"
job_link = "nav-link active"
end if%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demographics</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/theme.css">
<script src="assets/js/bootstrap.bundle.min.js" defer></script>
</head>
<body class="d-flex flex-column vh-100">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="<%=per_link%>" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="<%=per_sel%>" <%=per_dis%>>Personal</button>
</li>
<li class="nav-item">
<button class="<%=job_link%>" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="<%=job_sel%>" <%=job_dis%>>Job</button>
</li>
</ul>
<div class="tab-content" id="appTabContent">
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</form>
</div>
<div class="<%=job_class%>" id="jobPanel" role="tabpanel" aria-
labelledby="job-tab">Job
</div>
<form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
</form>
</div>
<script src="assets/js/bootstrap.bundle.min.js"></script>
</body>
</html>
I'm on the Job screen in the image below and click the personal but it stays on the job screen.
You HTML doesnt respect the correct structure for HTML file as following:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- YOUR CONTENT HERE -->
</body>
</html>
With bootstrap 5, your code seems to work perfectly if you put this
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</div>
into a <body> tag take a look at the correct structure for HTML document here
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<div class="tab-pane fade active show " id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<div class="row my-2 g-4">
<div class="col-12 col-md-5">
<label for="firstName" class="form-label">First Name</label>
<input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
</div>
<div class="col-12 col-md-5">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
</div>
</div>
</div>
<div class="tab-pane fade" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
job
</div>
If you want to show specific tab on load, simply add active show classes to a tab-pane fade element.
<div class="tab-pane fade active show" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
And to be perfect you can add active class to nav-link element correponding to your tab-pane
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
EDIT: You must respect the bootstrap structure to get it working
Your .tap-pane MUST be children of .tab-content so you structure MUST look like that:
.tab-content > .tab-pane > form
OR
.tab-content > form.tab-pane
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab" aria-controls="personal" aria-selected="false">Personal</button>
</li>
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="job" aria-selected="false">Job</button>
</li>
</ul>
<!-- tab-content PARENT OF .tab-pane -->
<div class="tab-content">
<!-- tab-pane CHILDREN OF .tab-content -->
<div class="tab-pane fade" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
<h2>Personal Information</h2>
<!-- form CHILDREN of .tab-pane -->
<form>Your form here</form>
</div>
<div class="tab-pane fade active show" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
<h2>Job</h2>
<form>Your form here</form>
</div>
</div>
I have div container with class="input-group" i am having input field with drop down, which i am creating with the help of bootstrap4
what i am trying to do is when user clicks on any dropdown the selected option should gets populate inside that respective input field
Code Snippet
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<form>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<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 dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<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 dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
i have tried the onclick event but id dosn't print any values
How can i do this is there any easy way
You can use the following code:
$(".dropdown-item").click(function() {
$(this).closest(".input-group").find("input").val($(this).text())
});
Working demo
$(".dropdown-item").click(function() {
$(this).closest(".input-group").find("input").val($(this).text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<form>
<hr>
<div class="form-row">
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="itemCode">Item Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<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 dropdown-menu-right">
<a class="dropdown-item" href="#">Item Code 1</a>
<a class="dropdown-item" href="#">Item Code 2</a>
<a class="dropdown-item" href="#">Item Code 3</a>
</div>
</div>
</div>
</div>
<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-3">
<label for="brandCode">Brand Code</label>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<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 dropdown-menu-right">
<a class="dropdown-item" href="#">Brand Code 1</a>
<a class="dropdown-item" href="#">Brand Code 2</a>
<a class="dropdown-item" href="#">Brand Code 3</a>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
I have dropdown text box form and open clicking on the dropdown button nothing happens. Below is my code, I am working on an Angular 4 framework:
$('#demo-combo-box-2').click(function(event) {
event.preventDefault();
$(event.currentTarget).parents('.input-group').siblings('.combo-box-scroll').toggleClass('hidden');
});
.hidden { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<form role="form" class="form-inline">
<div class="form-group">
<div class="combo-box">
<div class="input-group">
<input type="text" class="form-control" aria-label="Combobox">
<div class="input-group-btn">
<button class="btn btn-primary btn-icon" type="button" id="demo-combo-box-2">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
<div class="combo-box-scroll hidden">
<div class="list-group">
<a class="list-group-item">Item 1</a>
<a class="list-group-item">Item 2</a>
<a class="list-group-item">Item 3</a>
<a class="list-group-item">Item 4</a>
<a class="list-group-item">Item 5</a>
</div>
</div>
</div>
</div>
</form>
in my Angular2 project I am using this navbar: http://bootsnipp.com/snippets/2qgMx
I removed the second nav and transferred some <link> and <script>-tags into my index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<title>Relax mal wieder</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Here is my app-root-html --> please refer <app-root>Loading...</app-root> in index.html:
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse animated fadeIn" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav animated fadeIn text16">
<li class="active"><span class="glyphicon glyphicon-cog"></span></li>
<li><span class="glyphicon glyphicon-download-alt"></span></li>
<li class="dropdown">
<span class="glyphicon glyphicon-usd"></span>Pay Something<span class="caret"></span>
<ul class="dropdown-menu animated flipInX" role="menu">
<li><span class="glyphicon glyphicon-list-alt"></span>PayOptOne Web</li>
<li><span class="glyphicon glyphicon-road"></span>PayOptTwo Web</li>
<li><span class="glyphicon glyphicon-barcode"></span>PayOptTree Web</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span><b> Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
<!-- Login -->
<div class="social-buttons">
<div class="iconSpecial"><i class="glyphicon glyphicon-user"></i>Login</div>
</div>
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">login</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Entrar Usuário" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Senha</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Esquecí minha senha ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Entrar</button>
</div>
<div class="checkbox text-dark">
<label>
<input type="checkbox"> Manter-me Logado
</label>
</div>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
The code snipped works fine, but for some reason the text in my opened combobox is white so I can't read the text. Only hovering over the subitems makes the text visible.
Problem in chrome and firefox and ie.
Hope you can help me. Thx in advance.