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>
Related
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>
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>
I am using bootstrap3 and trying to create a horizontal form in which one of the rows should show the controls inline.
In the code below I would like the three selects to be on the same line as the input-group.
I have tried the approaches here: Form inline inside a form horizontal in twitter bootstrap? but I cannot get it to work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="input-group col-xs-4">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
</body>
</html>
Have you tried using a table?
<table>
<tbody>
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</td>
<td>
<select>
<option>Select1</option>
</select>
</td>
<td>
<select>
<option>Select2</option>
</select>
</td>
<td>
<select>
<option>Select3</option>
</select>
</td>
</tr>
</tbody>
</table>
You can try using the row class and not the form group class, tried it with Boostrap 3.
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
https://jsfiddle.net/FJB_ZA/Lmzubdw3/
You need to make changes in your structure to make it fit in one line.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="col-xs-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select1</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
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>
Hi how will I reduce the distance of the two dropdowns between each other?
Here is the code:
<div class="row">
<p class="col-md-offset-1"><b>Type of Meal:</b></p>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
<div class="form-group col-md-2">
<div class="col-md-8">
<select class="form-control">
<%-- options --%>
</select>
</div>
</div>
</div>
Thanks!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Starfleet officer</p>
<form class="form-inline">
<select class="form-control form-group">
<option>Spock</option>
<option>Kirk</option>
</select>
<select class="form-control form-group">
<option>Picard</option>
<option>Riker</option>
</select>
</form>
</div>
<div class="col-md-8">
</div>
</div>
</div>