I need to make the drop down of the materialize css smaller in size.
The font the spacing and everything. I have trued with width: 50%; height: 50% but this doesnt reduce the size
Now:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div class="col l4">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col l4" ">
<select id="select ">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
try to refer grid layout of there..
You can just scale it?
.select-wrapper {
transform: scale(0.7);
}
You probably need to override the fixed width in the ul on smaller screens to make it wider.
.select-wrapper {
transform: scale(0.7);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
You need to override the li and the nested a. These are the default applied styles:
// The <li>
.dropdown-content li {
clear: both;
color: rgba(0,0,0,0.87);
cursor: pointer;
min-height: 50px;
line-height: 1.5rem;
width: 100%;
text-align: left;
}
// The nested <a>
.dropdown-content li>a, .dropdown-content li>span {
font-size: 16px;
color: #26a69a;
display: block;
line-height: 22px;
padding: 14px 16px;
}
Something like this would be a quick reduction from 50px to 40px:
.dropdown-content li,
.dropdown-content li>a {
height: 40px;
line-height: 0.9rem;
min-height: unset;
}
As a final note - if you use SASS in your projects, you can define the dropdown height (as well as the value of everything else in the framework) at the start of your project, rather than override it later down the line.
Codepen
Final final note!
The materialize select is a dropdown, in case you're wondering why I'm talking about dropdowns. Materialize hides the native select, replacing it with a text input that triggers a dropdown. Both a dropdown and a select will be affected by the style declarations above.
Related
I use Bootstrap 4 and following the documentation i implemented a toggle button group like this:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
The toggle is supposed to change the buttons active state so i added the following css to change the buttons color and background-color when toggled:
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
The problem is that the button doesnt toggle. It doesnt switch to the active state when clicked.
Then i found this working stackblitz. It doesnt use data-toggle="buttons",but it adds ng-bootstraps ngbButtonLabel and ngbButton to the label and input.
By following that example of the stackblitz and applying it to my code the toggle button functionality works correctly:
<div class="btn-group btn-group-toggle">
<label class="btn btn-secondary" ngbButtonLabel>
<input type="checkbox" ngbButton>Test
</label>
</div>
I would like to know, why doesnt the way i tried to implement it the first time following bootstraps documentaiton work?
this is just the selector problem. apply css by selecting particular element with its parent class. not need to apply any css using !important.
see the below snippet
.btn-group label.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn-group label.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>
I suggest you read this article about CSS Specificity.
If you are using bootstrap events (in this case you are using a button which toggles a css class) remember to import the optional JavaScript file.
body {
padding: 2rem;
}
.btn.btn-secondary,
.btn.btn-secondary:hover {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<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">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" checked autocomplete="off"> Checked
</label>
</div>
May it will help.
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
.btn.btn-secondary {
color: BLACK;
background-color: WHITE;
}
.btn.btn-secondary.active {
color: WHITE;
background-color: BLACK;
}
</style>
</head>
<body>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox">Test
</label>
</div>
</body>
</html>
I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!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.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.
I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!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.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.
here is the problematic bit of code
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
after clicking the button out of nowhere a dark blue outline appears around the button. I looked around forums and the Bootstrap Docs about it but I cannot seem to find a way to change it's color or remove it altogether
I have tried setting the outline and the box shadow without any success.
NOTE: I know it is a visual queue that should not be removed and prefer just changing the color of it but if I cannot do it other way I would want to remove it internally and add it in CSS.
EDIT: Just for clarification we are talking about the 'subscribe' button not the arrow button. I am adding the code with the suggested changes. Also removing the border for clarity.
I thought it was outline but not, of course i didn't saw your code, but after i see, the problem is here:
border: 2px var(--color-foreground-text-sub) solid;
remove this line. that's all.
Edit: and after click, override this:
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
:root {
--color-foreground-text-main: rgb(255, 72, 142);
--color-foreground-text-sub: rgb(0, 114, 153);
}
.btn.focus, .btn:focus {
outline: 0;
box-shadow: none!important;
}
html,
body {
height: 100%;
}
img {
max-width: 100%;
}
#cover {
background: #222 url('Resources/img/cover.jpg') center center no-repeat;
background-size: cover;
color: var(--color-foreground-text-main);
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#subscribe-button {
text-align: center;
background: var(--color-foreground-text-main);
color: white;
outline: 0;
}
#subscribe-button:hover {
background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Mandatory meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--Custom Styles-->
<link rel="stylesheet" href="SP_BaseStyle.css" />
<title>School Project</title>
</head>
<body>
<section id="cover">
<div id="cover-caption">
<div class="container">
<div class="col-12">
<br>
<div class="row">
<div class="p-0 pr-1 pb-1 m-0
col-12 col-sm-6 col-md-5">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="George Smith">
</div>
<div class="p-0 m-0 pr-1 pb-1
col-12 col-sm-6 col-md-5">
<label class="sr-only">Email</label>
<input type="text" class="form-control form-control-lg" placeholder="george.smith#email.com">
</div>
<button type="submit" class="btn btn-lg mb-1
col-12 col-md-2" id="subscribe-button">Subscribe!</button>
</div>
↓
</div>
</div>
</div>
</section>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Initialize Bootstrap functionality -->
<script>
// Initialize tooltip component
$(function() {
$('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
Just add this to your css:
button:focus {outline:0;}
That's small property named "outline" is mostly placed in pseudo classes. So to avoid it you may use outline:none or outline:0
I am working on a small project of mine.
It's a website for booking tours.
I'm still in the early stages, but this is what it looks like:
homepage
As you can see, each tour has his own "div" divided in 3 columns: A preview image, a short description and a button to book the tour.
I can easily add an image as a background, but if I shrink the page to a size like that from a mobile, a second div appears above the first one with the image in it, like this:
homepage mobile size
I have no idea why this occurs. Do any of you have any idea how to make the div for the image disappear on mobile or how to solve this problem?
HTML and CSS code is provided below, I am using bootstrap.
PS: Ignore the white-space around the button.
body {
margin: 0px;
padding: 0px;
}
.jumbotron {
border-radius: 0px;
margin-bottom: 0px;
}
.options {
margin-top: 30px;
}
.tours {
padding: 0px;
margin-bottom: 25px;
border-radius: 5px;
border: 1px solid grey;
max-width: 100%;
height: 20vh;
}
.preview-img {
height: 100%;
}
.short-descr {
padding-top: 2vh;
height: 100%;
background-color: red;
}
.more-info {
height: 100%;
padding: 0px;
}
.infobtn {
height: 100%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>home</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<link rel="stylesheet" type="text/css" href="css/homepage-style.css">
</head>
<body>
<!--Jumbotron, header for the website-->
<div class="jumbotron text-center">
<div class="container">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
<!--These are the columns in which the tours are displayed-->
<div class="container options">
<div class="col-xs-12 tours">
<div class="col-sm-3 preview-img">
</div>
<div class="col-xs-9 col-sm-7 short-descr">
<h4 class="text-left">Column 1</h4>
<p class="text-left">Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="col-xs-3 col-sm-2 more-info">
<button type="button" class="btn btn-info infobtn" href="#">More</button>
</div>
</div>
<div class="col-xs-12 tours">
</div>
<div class="col-xs-12 tours">
</div>
</div>
</body>
</html>
Add hidden-xs class to your preview-img div
http://getbootstrap.com/css/#responsive-utilities
Here is a simplified version of my problem:
.select-trigger,
.select-trigger:focus {
min-height: 34px;
line-height: 2.45;
border-color: #ccc;
}
.select-trigger {
border: 1px solid #aaaaaa;
border-radius: 4px;
background-color: #ffffff;
}
/* added rule */
.form-inline .select {
display: inline-block;
min-width: 180px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label>Label 1</label>
<div class="select">
<div class="select-trigger">
</div>
</div>
</div>
<div class="form-group">
<label>Label 2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Label 3</label>
<div class="select">
<div class="select-trigger">
Foo
</div>
</div>
</div>
</form>
</body>
</html>
(maybe Label 2 won't be appear in one line, if the view port is not big enough, so here is a JsBin to see it in full screen:
http://jsbin.com/sobupicire/3/edit?output)
Label 1 is the problem: Label sits at the bottom of the div. It should be in vertical middle of div.select
Label 2 is the desired look
Label 3 is the same as Label 1, but with some text it looks like it should (the label is in vertical middle of div.select
use the "label-control" for all label and "form-control"
http://jsbin.com/calaconidu/1/edit?output
The problem is one input is a select-trigger and the other is a select trigger with content, while the other is an inputbox. Try and keep them consistent and that will solve your problem