I am looking for a way to make this search bar with its inputs and buttons responsive. However i got stuck with Bootstrap properties and when I shrink the window everything stacks very bad and I just can't figure out how to apply some better classes and props. Here's the codepen link: http://codepen.io/anon/pen/WGKOmB
Appreciate all advices
This is my html:
.row {
background-color: blue;
padding: 40px 30px;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
div.form-group.checkbox {
width: 207px;
background-color: white;
padding: 5px 10px;
}
select.form-control {
width: 173px;
}
input.form-control.choice-input {
/*.choice input input*/
width: 360px;
height: 38px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<!-- row -->
<div class="col-md-8 col-sm-6" style="background-color: lightblue; height: 74px;">
<p>Lorem ipsum</p>
<div class="form-inline">
<div class="form-group checkbox">
<span><input type="checkbox" value="" checked></span>
<label>Lorem</label>
<span><input type="checkbox" value=""></span>
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control">
<option value="one">Lorem ipsum</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control choice-input" type="text" placeholder="Placeholder text">
</div>
</div>
<!-- end form-inline -->
</div>
<div class="col-md-4 col-sm-6" style="background-color: lightgreen; height: 74px;">
<p class="pull-right">Lorem ipsum</p>
<div class="btn-group">
<button class="btn btn-default" style="margin-right: 10px">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
</body>
Word from the wise (not me), never use inline styling. Always put everything in CSS. Also, you set a specific height for both the blue box and the light green box. Therefore, even when the browser is narrower and would be in col-sm-* and col-xs-* territory, you still have a set height. You should give a class name, for example form-height and then in CSS write something like the following:
.form-height {
height: 150px; /* Or whatever height you find appropriate */
}
#media (min-width:768px) {
.form-height {
height: 74px;
}
}
What this would do is say that when the browser is narrower than 768px, i.e. when it is considered col-xs-* by bootstrap, it should have a certain height. When it is larger it will have a different height.
However, an ever better solution is to never even use the height property. The reason you are doing this is probably because you want a certain padding. Therefore, you can write the following CSS for the class:
.form-height {
padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}
Try this code
<div class="container">
<form class="form-inline" style="padding: 20px 0;">
<div class="row">
<div class="col-sm-8 col-md-9">
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
</div>
<div class="form-group">
<select class="form-control" id="sel1">
<option>Option 1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Placeholder">
</div>
</div>
<div class="col-sm-4 col-md-3">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</form>
Demo here : https://jsfiddle.net/adb0br5e/1/
Related
Setting custom border style and -width affects the height of a select element that contains Bootstrap's form-control class.
However the same class doesn't affect an input element's height with form-control (as expected).
See this fiddle to replicate the following:
<div class="row">
<div class="col-6">
<input type="text" id="textbox" class="form-control border-foo" />
Height: <span id="textbox-height"></span>
</div>
<div class="col-6">
<select id="select" class="form-control border-foo">
<option>test</option>
</select>
Height: <span id="select-height"></span>
</div>
</div>
.border-foo {
border-style: solid;
border-width: 30px;
}
Am I missing/misusing a class here?
Reset selectbox appearance and height value added by bootstrap then it will work as expected, please have a look at the below working snippet, hope it helps :)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<style>
select.form-control.border-foo:not([size]):not([multiple]) {
height: auto;
}
.border-foo {
border-style: solid;
border-width: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
</style>
<br>
<div class="row">
<div class="col-6">
<input type="text" id="textbox" class="form-control border-foo" />
</div>
<div class="col-6">
<select id="select" class="form-control border-foo">
<option>test</option>
</select>
</div>
</div>
How do I place the two input fields close to each other when they have shorter widths on larger screen. The problem is that I want the input fields to be in one line with shorter widths. I eventually achieve that but then on shorter screens it stacks up even though it has enough space to be in one line. Here is the demo.
What I would like to have: Keep the input fields in one line as long as there widths fit in the viewport or else, stack them up with full width.
NOTE: I have just started learning bootstrap and not well versed with all the classes.
HTML
<div class="site-wrapper">
<div class="jumbotron">
<h1>Header</h1>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="input-group-lg">
<input id="user" class="form-control form-inline" placeholder="Your name" type="text">
</div>
</div>
<div class="col-md-6">
<div class="input-group-lg">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #fff;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
margin: 0;
}
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.jumbotron {
background-color: #ccbb99 !important;
/*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
height: 100%;
margin-bottom: 0;
}
.jumbotron h1 {
font-family: chalkitup, "sans-serif";
color: #69350F !important;
}
#user, #boardSize {
max-width: 280px;
}
To prevent stacking you should use col-xs-*.
If you combine with pull-right and pull-left then you can choose where you want to place your input in the grid. Notice the use of form-inline class
<form class="form-inline">
<div class="col-xs-6">
<div class="form-group pull-right">
<div class="input-group-lg ">
<input id="user" type="text" class="form-control form-inline" placeholder="Your name">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group pull-left">
<div class="input-group-lg ">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</form>
DEMO
I have a few divs containing form input data. One of them is a select with some placeholder-like text inside of it. I want the select box to be as wide as the text is and I want the other divs to also take up this width.
Here is the html:
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Name:</label>
<input name="name" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="description">Description:</label>
<input name="description" class="form-control"/>
</div>
</div>
and here is the css:
.form-group{
display: inline-block;
}
.row{
width: 100%
float: left;
margin-left: 5%;
}
right now the select drop down is wider than any of the other form-group elements. Is it possible to get all of the form-group elements have the same width and only take up the necessary width for the select to be able to display all of the text?
Here is a fiddle of the example.
EDIT: I don't want to use width: 100% for form-group and I would really prefer not to set the width of form-group at all. I would want it to take up the minimum width necessary to be wide enough for the text in the select.
You can use jQuery's each() function and get the width of each element. Have a look at the snippet below:
var max = 0;
$('.form-control').each(function(i) {
if(max < $(this).width()) {
max = $(this).width();
}
});
$('.form-control').css('width', max);
.form-group{
display: inline-block;
}
.row{
width: 100%
float: left;
margin-left: 5%;
}
.content {
padding: 20px 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Name:</label>
<input name="name" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="description">Description:</label>
<input name="description" class="form-control"/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this helps!
A table with table-layout:fixed will solve the issue.
Use a table and put the row divs in table rows
https://jsfiddle.net/9r62L7Lh/5/
.form-group{
display: block;
}
.row{
width: 100%
}
table {
margin-left: 5%;
table-layout: fixed;
}
input {
width: 100%;
}
Your Select drop down width will be automatically adjusted to the text width.
Because you have set .form-control{width: 100%;}
If you want the input width be the same like the select width you will have to set a fixed value to all of them
something like .form-control{width: 250px;}
Fiddle
I am trying to make a search bar where a green div would be in the middle of the grey one(see http://codepen.io/anon/pen/LRBEvq?editors=1100), and checkboxes, select drop menu, and input field all inline with two buttons - so everything in the same row. I am using Bootstrap to make it responsive but got stuck and can't figure it out.. thank you for all the help!
Here's my html:
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
Use display: inline-block; for your wrapper divs to behave like inline elements without losing their block properties:
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
If you also want the buttons to be in the same row, use a <div class="col-md-12"> for the whole content.
To center your menu bar horizontally, use margin: 0 auto;; to center it vertically, position it, apply a top: 50%; and translate it back the half of its size in negative y-direction (up):
.formContainer {
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0,-50%);
}
To make the input text field as long as the remaining space, just set the width of the input the same as its wrapper div:
.mainContent .choice-input input {
width: inherit;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
display: inline-block;
}
.mainContent .choice-input input {
width: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-12">
<!-- main content -->
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
Horizontal centering:
For horizontal centering, we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.
Vertical centering:
The essential rules are:
Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.
Make the element itself absolutely positioned.
Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)
Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)
So your code may seem like this
.main {
background-color: grey;
width: 1202px;
height: 156px;
position: relative;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
I hope you solved all the other problems.
Try modifying these rules:
.checkbox, .radio {
position: relative;
display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
margin-top: 10px;
margin-bottom: 10px;
}
.choice-select {
width: 173px;
display: inline-block; // added inline-block
}
.choice-input {
width: 176px; // reduced width.
display: inline-block; // added inline-block
}
Check the code below, i have put the html controls in separate divs with bootstrap grid classes to make them inline and added margin: 0 auto in .formContainer class
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="main">
<div class="formContainer">
<div class="col-md-12">Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="row mainContent">
<!-- mainContent -->
<div class="col-md-7">
<!-- main content -->
<div class="col-md-4">
<div class="checkbox">
<span class="choice-details">
<label class="checkbox-inline">
<input type="checkbox" value="" checked>Lorem
</label>
<label class="checkbox-inline">
<input type="checkbox" value="">Ipsum
</label>
</span>
</div>
</div>
<div class="col-md-4">
<div class="choice-select">
<select class="form-control">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="choice-input">
<input type="text" placeholder="Placeholder text">
</div>
</div>
</div>
<div class="col-md-5">
<button>Lorem ipsum lorem</button>
<button>Lorem lorem lorem</button>
</div>
<!-- end main content -->
</div>
<!-- end mainContent -->
</div>
</div>
</div>
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
.checkbox {
width: 207px;
border: 1px solid white;
}
.choice-select {
width: 173px;
}
.choice-input {
width: 390px;
}
You should be able to do what you want with only bootstrap markup. I've forked your pen and modified it a little:
http://codepen.io/ugreen/pen/XjBpqX
<div class="container">
<div class="row">
<div class="col-md-3 text">
Lorem lorem lorem
<div class="pull-right">Ipsum lorem ipsum</div>
</div>
<div class="col-md-5">
<div class="form-inline">
<div class="form-group">
<input type="checkbox" value="" checked>
<label>Lorem</label>
<input type="checkbox" value="">
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control choice-select">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Placeholder text">
</div>
</div>
</div>
<div class="col-md-4">
<div class="button-group">
<button class="btn btn-default">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
</div>
But it might be even better to do something like in the bootstrap docs about navbars:
http://getbootstrap.com/components/#navbar
I made every option into a container, so I have 8 containers, from left to right, from top to bottom.
But for some unknown reason, item_container 3 and 4 are not following the alignment!! I've spent hours on this but no good. So frustrating right now.
Here is my html code. item_container 5~8 are basically the same as 1,2, and they aligned perfectly, so I didn't include them.
.page_item {
display: inline-block;
margin-left: 28px;
margin-right: 8px;
margin-bottom: 1px;
}
.page_field {
display: inline-block;
margin-right: 68px;
margin-bottom: 1px;
}
.page_check_field {
display: inline-block;
margin-right: 8px;
margin-bottom: 1px;
}
.page_container {
display: block;
width: 876px;
height: 74px;
}
.page_container .item_container1, .page_container .item_container2, .page_container .item_container3, .page_container .item_container4, .page_container .item_container5, .page_container .item_container6, .page_container .item_container7, .page_container .item_container8 {
display: inline-block;
}
.item_container1, .item_container2, .item_container3 .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
display: inline-block;
width: 436px;
}
<div class="page_container">
<div class="item_container1">
<h6 class="page_item">User ID</h6>
<div class="page_field form-group form-group-label">
<label class="page_entry floating-label" for="..."> Entry User ID </label>
<input class="form-control" id="..." type="text">
</div>
</div>
<div class="item_container2">
<h6 class="page_item">Country</h6>
<div class="page_field form-group form-group-label">
<select class="page_entry form-control" id="...">
<option value="..."> Select </option>
<option value="..."> Country 1 </option>
<option value="..."> Country 2 </option>
<option value="..."> Country 3 </option>
<option value="..."> Country 4 </option>
<option value="..."> Country 5 </option>
<option value="..."> Country that has very long name </option>
</select>
</div>
</div>
</div>
<div class="page_container">
<div class="item_container3">
<h6 class="page_item">Email</h6>
<div class="page_field form-group form-group-label">
<label class="floating-label" for="..."> Entry User Email </label>
<input class="form-control" id="..." type="text">
</div>
</div>
<div class="item_container4">
<h6 class="page_item">User Type</h6>
<div class="page_check_field">
<div class="checkbox checkbox-adv">
<label for="check1">
<input class="access-hide" id="check1" name="check1" type="checkbox">Cosplayer
<span class="checkbox-circle"></span>
<span class="checkbox-circle-check"></span>
<span class="checkbox-circle-icon icon">done</span>
</label>
</div>
</div>
<div class="page_check_field">
<div class="checkbox checkbox-adv">
<label for="check2">
<input class="access-hide" id="check2" name="check2" type="checkbox">Cameraman
<span class="checkbox-circle"></span>
<span class="checkbox-circle-check"></span>
<span class="checkbox-circle-icon icon">done</span>
</label>
</div>
</div>
<div class="page_check_field">
<div class="checkbox checkbox-adv">
<label for="check3">
<input class="access-hide" id="check3" name="check3" type="checkbox">Organizer
<span class="checkbox-circle"></span>
<span class="checkbox-circle-check"></span>
<span class="checkbox-circle-icon icon">done</span>
</label>
</div>
</div>
</div>
</div>
There's a missing comma in this line that's probably causing your trouble
.item_container2, .item_container3 .item_container4,
The reason for this issue is .page-container don't width enough.
.item_container4 too large over the .page-container width.
To fix this simply you only need change width of .page-container larger .
Can be set width :
.page-container {
width: 920px;
.........
}
It work correctly!
Hope it help
.item_container1, .item_container2, .item_container3, .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
display: inline-block;
width: 436px;
}
, between item_container3 and item_container4 is missing and i thought you might be adjust your width for better look