I am trying to put the select option inside the input box (left-side)
<div class="row">
<div class="col one">
<label class="label">Loan amount</label>
<div class="input-group mb-3">
<select class="form-select btn-primary input-group-text" id="basic-addon1" aria-label="Default select example">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
<input class="form-control loan" type="text" style="direction: rtl;" placeholder="0.00" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
<label class="label" for="customRange1">Duration</label>
<div class="range">
<input type="range" class="form-range" id="customRange1" />
</div>
</div>
Here's a screenshot
here is demo code on how to put selection inside input with bootstrap v3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<select class="form-select btn-primary input-group-text btn btn-default
dropdown-toggle" id="basic-addon1" aria-label="Default select example" data-toggle="dropdown" style="padding: 8px;">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
</div><!-- /.row -->
</form>
</div>
</body>
</html>
Related
I can't get this button not to be overlapping?
This is the piece beating me:
<div class="row">
<div class="col-md-3 form-group">
<label for="agencySelect">Choose an Option</label>
<select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
<option value=""></option>
</select>
</div>
<div class="col-md-3 form-group">
<label for="clientSelect">Choose Another option</label>
<select id="clientSelect" onchange="loadClientTasks(selectedClient())">
<option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
</select>
</div>
<div class="col-md-3 form-group">
<div id="addTaskBtnSpot"><button id="addTaskBtn" type="submit" class="btn btn-primary mb-2" onclick="saveData()">Add</button></div>
</div>
</div>
Here is the Fiddle
Appreciate your help!
Can you check this and let me know is it what you want or something else..?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4" style="background-color:lavender;">
<div>
<label for="agencySelect">Choose an Option</label>
</div>
<div>
<select id="agencySelect" onchange="loadClientsFromSS(selectedAgency())">
<option value="">jkesndfkjnwejkfnd</option>
</select>
</div>
</div>
<div class="col-4" style="background-color:orange;">
<div>
<label for="clientSelect">Choose Another option</label>
</div>
<div>
<select id="clientSelect" onchange="loadClientTasks(selectedClient())">
<option value="">dlfajgflksahgldsjngsglsgbçdjhlkhbfsçd</option>
</select>
</div>
</div>
<div class="col-4" style="background-color:lavender;">
<div id="addTaskBtnSpot">
<button id="addTaskBtn" type="submit" class="btn btn-primary my-2" onclick="saveData()">Add
</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have a page which contains several fields and a header imported. The problem is on this page, the header and first field are not visible depending on the screen size. How can I fix the code?
I am not familiar with HTML and CSS. Could you explain me what is the problem? Maybe the problem is in the HTML structure?
This the page :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>My page</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div id="test">
<div id="">
<nav class="navbar navbar-light bg-light text-primary">
<div class="row">
<a class="navbar-brand">
<img src="ressources/my_logo.png" width="85" height="50" alt="Logo">
MY HEADER
</a>
</div>
</nav>
</div>
<form method="post" action="requetes/creerUtilisateur.php" role="form" id="formulaireUtiisateur" >
<h4>Créer un nouvel utilisateur :</h4>
<hr>
<input class="form-control" id="identifiant_camion" name="identifiant_camion" type="text" placeholder="Identifiant camion" required>
<hr>
<label for="type_chauffeur">Type de chauffeur</label>
<select class="form-control" id="type_chauffeur" name="type_chauffeur">
<option>Type 1</option>
<option>Type 1</option>
<option>Type 1</option>
</select>
<hr>
<input class="form-control" id="prenom_chauffeur" name="prenom_chauffeur" type="text" placeholder="Prénom" required>
<hr>
<input class="form-control" id="nom_chauffeur" name="nom_chauffeur" type="text" placeholder="Nom" required>
<hr>
<input class="form-control" id="mot_de_passe" name="mot_de_passe" type="password" placeholder="Mot de passe" required>
<hr>
<button class="btn btn-lg btn-primary btn-block" id="creer_utilisateur" type="submit">Créer utilisateur</button>
</form>
<form method="post" action="requetes/creerAnnonce.php" role="form" id="formulaireAnnonce">
<hr>
<h4>Diffuser une annonce aux utilisateurs:</h4>
<hr>
<div class="form-group">
<label for="type_annonce">Type de l'annonce</label>
<select class="form-control type_annonce" id="type_annonce" name="type_annonce">
<option>Type 1</option>
<option>Type 2</option>
</select>
<hr>
<label for="destinataire">Destinataire</label>
<select class="form-control" id="destinataire" name="destinataire">
<option>Chauffeurs 1</option>
<option>Chauffeurs 2</option>
<option>user1</option> </select>
<label for="annonce">Diffuser une annonce aux utilisateurs</label>
<textarea class="form-control" id="annonce" name="annonce" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="creer_annonce" type="submit">Diffuser l'annonce</button>
</form>
</div>
</body>
</html>
I examined the codes. I think it looks like there are problems with the opening and closing tags. No need to use extra row in navbar. Due to its structure, Bootstrap already offers the necessary css adjustments ready. I also recommend you to separate both navbar and form elements. I hope your problem is resolved now. Otherwise I will have to see the css files.
<div id="_navbar">
<nav class="navbar navbar-light bg-light text-primary">
<a class="navbar-brand">
<img src="ressources/my_logo.png" width="85" height="50" alt="Logo">
MY HEADER
</a>
</nav>
</div>
<div id="form-elements">
<form method="post" action="requetes/creerUtilisateur.php" role="form" id="formulaireUtiisateur">
<h4>Créer un nouvel utilisateur :</h4>
<hr>
<input class="form-control" id="identifiant_camion" name="identifiant_camion" type="text"
placeholder="Identifiant camion" required>
<hr>
<label for="type_chauffeur">Type de chauffeur</label>
<select class="form-control" id="type_chauffeur" name="type_chauffeur">
<option>Type 1</option>
<option>Type 1</option>
<option>Type 1</option>
</select>
<hr>
<input class="form-control" id="prenom_chauffeur" name="prenom_chauffeur" type="text" placeholder="Prénom"
required>
<hr>
<input class="form-control" id="nom_chauffeur" name="nom_chauffeur" type="text" placeholder="Nom" required>
<hr>
<input class="form-control" id="mot_de_passe" name="mot_de_passe" type="password" placeholder="Mot de passe"
required>
<hr>
<button class="btn btn-lg btn-primary btn-block" id="creer_utilisateur" type="submit">Créer utilisateur</button>
</form>
<form method="post" action="requetes/creerAnnonce.php" role="form" id="formulaireAnnonce">
<hr>
<h4>Diffuser une annonce aux utilisateurs:</h4>
<hr>
<div class="form-group">
<label for="type_annonce">Type de l'annonce</label>
<select class="form-control type_annonce" id="type_annonce" name="type_annonce">
<option>Type 1</option>
<option>Type 2</option>
</select>
<hr>
<label for="destinataire">Destinataire</label>
<select class="form-control" id="destinataire" name="destinataire">
<option>Chauffeurs 1</option>
<option>Chauffeurs 2</option>
<option>user1</option>
</select>
<label for="annonce">Diffuser une annonce aux utilisateurs</label>
<textarea class="form-control" id="annonce" name="annonce" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="creer_annonce" type="submit">Diffuser l'annonce</button>
</form>
</div>
I have used both row and col classes of bootstrap and not working properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-width,initial-scale=1">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row ">
<div style="background: cyan" class="offset-md-2 col-md-8">
<h1 style="color: red">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row" style="background: lightblue; height: 300px; width:500px;">
<div class="col-md-12">
<div class="col-md-4">Select Type:</div>
<div class="col-md-8">
<select name="user_type" ad="user_type">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div class="col-md-5"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
In this first field text select type and select are displaying in two rows. like all fields. I want the text and input field in single row. can anyone help me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-width,initial-scale=1">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row ">
<div style="background: cyan" class="offset-md-2 col-md-8">
<h1 style="color: red">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row" style="background: lightblue; height: 300px; width:500px;">
<div class="col-md-12">
<div style="float:left;" class="col-md-4">Select Type:</div>
<div class="col-md-8">
<select name="user_type" ad="user_type">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select> </div>
</div>
<div class="col-md-12">
<div style="float:left;" class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div style="float:left;" class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div style="float:left;" class="col-md-5"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
Make your life easy and don't put everything in a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-width,initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body style="background-color: lightgray">
<div class="container">
<div class="row ">
<div class="offset-md-2 col-md-8">
<h1 style="color: #333">Login</h1>
</div>
</div>
<form method="post" action="login">
<div class="row">
<div class="col-md-12">
<h5 style="float: left;margin-left: 30px; ">Select Type:</h5>
<select name="user_type" ad="user_type" style="float: left; margin-left: 20px; margin-top:5px; ">
<option value="0">Select Type</option>
<option value="Admin" name="admin" id="admin">Admin</option>
<option value="Teacher" name="teacher" id="teacher">Teacher</option>
<option value="Parent" name="parent" id="parent">Parent</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="col-md-4">User Name:</div>
<div class="col-md-8"><input type="text" name="user_name" id="user_name" maxlength="63"> </div>
</div>
<div class="col-md-12">
<div class="col-md-4">Password:</div>
<div class="col-md-8"><input type="password" name="password" id="password" </div>
</div>
<div class="col-md-5 m-2"><input type="submit" class="btn btn-primary" name="submit"> </div>
<div class="col-md-offset-2 col-md-5 m-2"><input type="reset" class="btn btn-danger" name="reset"> </div>
</div>
</form>
</div>
</body>
</html>
Hey i have a problem with my button location on my site
<form id="filter_view" method="POST"> {% csrf_token %}
<div class="form-row">
<div class="form-group col-md-1">
<label for="select_id">option</label>
<select id="select_id" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-1">
<label for="inputZip">write</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="form-group col-1 align-bottom">
<button type="submit" class="btn btn-secondary align-bottom">submit</button>
</div>
</div>
</form>
resulting in this site:
Website view
but i want the submit button in the row of my input-box, any ideas?
Use flexbox and align the button to the bottom of the column.
View fullscreen to see or visit this Codepen
.flex-bottom {
display: flex;
align-items: flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-row">
<div class="form-group col-md-1">
<label for="inputState">option</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-1">
<label for="inputZip">write</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="form-group col-1 flex-bottom ">
<button type="submit" class="btn btn-secondary ">submit</button>
</div>
</div>
</form>
You can add "form-inline" class inside form tag and add label without text in last form group.
.form-inline .form-control {
margin-left:5px;
margin-right:5px;
}
.form-inline .btn {
margin-left:5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline">
<label for="select_id">option</label>
<select id="select_id" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
<label for="inputZip">write</label>
<input type="text" class="form-control" id="inputZip">
<button type="submit" class="btn btn-secondary align-bottom">submit</button>
</form>
</body>
</html>
I have multiple group which each of them consist of a checkbox and a dropdownlist which group together, when the dropdown list for the particular group is changed then the checkbox also will automatically set to checked.
<div class="form-group">
<div class="input-group col-md-12">
<span class="input-group-addon">
<input type="checkbox" name="filter[]" value="1">
</span>
<select class="dateselectpicker form-control"id="filter"title="Filter">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group col-md-12">
<span class="input-group-addon">
<input type="checkbox" name="filter[]" value="2">
</span>
<select class="dateselectpicker form-control"id="filter1"title="Filter">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
For example, when i select the first filter, then the checkbox for first filter will set to checked. Only when dropdown list on change. How can i do this?
Updated: It is not working when selectpicker is applied.
You can simply do it using change event listener in jquery like this
$( "select" ).change(function() {
$(this).prev(".input-group-addon").find(":checkbox").prop("checked",true);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<div class="input-group col-md-12">
<span class="input-group-addon">
<input type="checkbox" name="filter[]" value="1">
</span>
<select class="dateselectpicker form-control" id="filter" title="Filter">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group col-md-12">
<span class="input-group-addon">
<input type="checkbox" name="filter[]" value="2">
</span>
<select class="dateselectpicker form-control" id="filter1" title="Filter">
<option>a</option>
<option>b</option>
</select>
</div>
</div>
</body>
</html>