I removed the spacing between multiple input fields and the submit button using float:left.
But I dont know how to keep this hole block centered on the page.
Here is a Fiddle:https://jsfiddle.net/bb61c412/43/
And the code:
.form-control {
float: left;
border-radius: 0px;
}
.btn {
float: left;
border-radius: 0px;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Remove the floats and use flexbox instead.
JSfiddle Demo
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
.form-control {
border-radius: 0px;
}
.btn {
border-radius: 0px;
}
.form-inline {
display: flex;
justify-content: center;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-12 col-lg-12" style="margin-left:0px;padding-right:0px;margin-top:50px;padding-left:0px; height:100vh;">
<div style="background-color:white;width:100%;height:100%;">
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
<form>
<div class=form-inline style='text-align:center;'>
<select name="Form1" class="form-control">
<option value="0">Form1</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form2" class="form-control">
<option value="0">Form2</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<select name="Form3" class="form-control">
<option value="0">Form3</option>
<option value="1">Option2</option>
<option value="2">Option3</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
</div>
</div>
Otherwise you will have to review How to remove the space between inline-block elements?
Please try this:
Change:
<div style="margin-left:30px;margin-right:50px;padding-top:30px;">
to
<div style="margin: 0px auto; padding-top: 30px; width: 427px;">
It is best practice to have all your .js files or CDN(s) at the bottom of your HTML before the closing body tag.
You want to render your .js scripts last to help with your asset pipeline.
Related
I am trying to align the text on top of the input box without manually aligning it. Any pointers on how to do this?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input class="select-vehicle-list" list="plate-number-list" id="exampleDataList" placeholder="Plate number">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
Using the legend tag
You can use the fieldset + legend combo to get a similar effect using pure CSS. See the snippet below:
fieldset {
border-radius: 5px;
width: max-content;
border: 1px solid #D4D4D5;
}
legend {
font-size: 12px;
}
#exampleDataList {
width: 15rem;
border: none;
}
#exampleDataList:focus {
outline: none;
}
<fieldset>
<legend>Select Plate number</legend>
<div class="select-vehicle">
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
</fieldset>
Alternative
You can give label a relative position and move it towards the position like in the picture you have given. See the snippet below:
.select-vehicle {
display: flex;
flex-direction: column;
}
.form-label {
font-size: 12px;
position: relative;
background: #fff;
width: max-content;
padding-inline: 5px;
top: .5rem;
left: .8rem;
}
#exampleDataList {
width: 15rem;
padding: .8rem 1rem;
border: 1px solid #D4D4D5;
border-radius: 5px;
}
<div class="select-vehicle">
<label for="exampleDataList" class="form-label">Select Plate number</label>
<input placeholder="Plate number" list="plate-number-list" id="exampleDataList">
<datalist id="plate-number-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</div>
More on css positions here.
In the title "legend" was mentioned and the pic resembles a <fieldset> and Bootstrap has foobared the fieldset to be unrecognizable. Here is the markup with BS classes for a fieldset that resembles a fieldset:
<fieldset class="border rounded p-2">
<legend class="float-none w-auto"></legend>
</fieldset>
I added .h6 and .mb-0 to the <legend> to decrease both font-size and margin-bottom. Are you sure you need a <label> or are you adding more form controls to the fieldset?
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style></style>
</head>
<body>
<main class="container">
<section class="row">
<form>
<fieldset class="border rounded p-2">
<legend class="float-none w-auto mb-0 h6">Select State of Registeration: </legend>
<input id='state' name="state" class="form-control" list="state-list" placeholder='State'>
<datalist id="state-list">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>
</fieldset>
</form>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script></script>
</body>
</html>
I have three elements in my div dropdown list, input date and button they are all in on div , i want all of them to be in the same line , not under each other
<div id="cont">
Status :
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p>Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="">Search</button>
</div>
Use CSS with display: inline-block
.inline {
display: inline-block;
}
<div id="cont">
Status:
<select id="dropdown" class="inline">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p class="inline">Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="" class="inline">Search</button>
</div>
Although the above works, it's better practice to put the specific elements in a span tag. Like so ...
.inline {
display: inline-block;
}
<div id="cont">
<span class="inline">Status:
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</span>
<!-- Date Picker -->
<span class="inline">
<p>Date: <input type="text" id="datepicker"></p>
</span>
<span class="inline">
<button type="submit" id="searchBtn" value="">Search</button>
</span>
</div>
You can add the display: inline-block property to the divs. This will make them get rendered inline with the content, but they keep their block properties, so you can still set their width and height for example.
Example:
.inline {
display: inline-block;
width: 50px;
height: 20px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
<div class="inline" id="red"></div>
<div class="inline" id="blue"></div>
<div class="inline" id="green"></div>
My favourite tutorial site about the topic: http://learnlayout.com/inline-block.html
This can be used for every element, which supports the display property. Some elements are even set to this by default, like the span element.
https://jsfiddle.net/v9qxobaf/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style media="screen">
#cont {
margin-left: -20px;
}
.status, .date, .button {
float: left;
padding-left: 20px;
}
</style>
<body>
<div id="cont">
<div class="status">
<label>Status: </label>
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</div>
<div class="date">
<!-- Date Picker -->
<span> Date: <input type="text" id="datepicker"></span>
</div>
<div class="button">
<button type="submit" id="searchBtn" value="">Search</button>
</div>
</div>
</body>
</html>
wrap each in a div and display: inline-block.
I want to set border-right: 1px solid #2e2e2e to a .form-group element, but it doesn't match the height of its content and it looks ugly.
Here's a demo:
/* My styles */
.form-group {
border-right: 1px solid #2e2e2e;
padding: 0 10px;
}
.bootstrap-select.btn-group .dropdown-toggle {
padding: 15px 40px 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>
Edit: Run it in Full page mode.
Set height:auto; to .form-control
float:left of the child elements and fixed height of your bootstrap-select are causing this issue.
Code Snippet
/* My styles */
.form-group {
border-right: 1px solid #2e2e2e;
padding: 0 10px;
}
.bootstrap-select.btn-group .dropdown-toggle {
padding: 15px 40px 15px 0;
}
.mycustomform {} .mycustomform .btn-group {
height: auto;
}
.mycustomform .form-group::before,
.mycustomform .btn-group::before {
content: "";
display: table;
}
.mycustomform {} .mycustomform .form-group::after,
.mycustomform .btn-group::after {
content: "";
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline mycustomform">
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>
use the below code, hope it works
.form-group{
border-right:1px solid #000;
padding-right:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.0/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<div class="form-group">
<select class="selectpicker form-control">
<option>Option #1</option>
<option>Option #2</option>
<option>Option #3</option>
</select>
</div>
<button type="submit" class="btn btn-info">Send</button>
</form>
watch in big screen
set margin-bottom:15px; for the div inside .form-group
No sure if this will help anyone, but I have run into issues where the .form-group class does not want to have a dynamic height. Adding height: auto to .form-group will fix this.
I want the select options to show up when you press a button but not have the bar showing the selected option to appear inside the button.
This is what i have so far:
<!DOCTYPE html>
<html>
<body>
<button>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
This is what I want it to look like, then I will place an image inside the button
<!DOCTYPE html>
<html>
<body>
<button>
<select style="display: none;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</button>
</body>
</html>
$("#btn, .close").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper {
display: none;
position: fixed;
width: 100vw;
height: 100vw;
top: 0;
left: 0;
z-index: 10;
background: rgba(0,0,0,0.3);
}
.select-wrapper select {
font-size: 24px;
position: absolute;
left: 50vw;
transform: translateX(-50%);
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" src="http://lorempixel.com/120/60/" id="btn">
<div class="select-wrapper">
<input type="button" value="close" class="close">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
I encountered similar problem that the dev refused to just use list due to some backend issue.
found a simple cheat to make the select tag show all the options, that look like a dropdown, and then I just toggle the whole select tag. Not exactly what you asking for, but looks like it.
$("#btn, .selector").click(function() {
$(".select-wrapper").toggleClass("active");
});
.select-wrapper{
display: none;
}
.select-wrapper.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
add variable:
<br>
<input type="button" value="add" id="btn">
<div class="select-wrapper">
<select size="4" class="selector">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
</div>
</body>
I want to increase the width of select box arrow like fa fa caret. i am not getting it how to do. I used img tag inside the each field and given position absolute and adjusted with left top properties but i think this is not proper way of doing this and even i click on the image arrow not select options are opening so i removed this. Please tell me proper solution for it.
.search-categories{
background: #E40444 !important;
color: #fff !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>
You can use the css triangle to make the arrow.
HTML
<div class="selectwrap">
<select>
<option>Option 1</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
CSS
select {
border: 1px solid #ccc;
height: 34px;
width: 250px;
padding: 6px 12px;
line-height: 1.42857143;
}
.selectwrap {
position: relative;
float: left;
}
.selectwrap:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000;
right: 4px;
top: 14px;
pointer-events: none;
}
It's very complicated to style form elements cross-browser because very browser has different look for form elements (especially checkbox, radio, select, progress).
I suggest using some plugin like select2 so you can easily style very element browser-independent.
$(document).ready(function() {
$('select').select2({
width: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" rel="stylesheet" />
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
<select>
<option>Op 1</option>
<option>Op 2</option>
<option>Op 3</option>
<option>Op 4</option>
</select>
better use some select element customisation plugin like select2, selectize. The appearance that these plugins create can be customised through css.
You cannot fully control the appearance of select element in cross browser manner with css alone.