.form-group to have the height of the element inside - html

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.

Related

html can't place elements properly

So, I,m new to html and trying to make a plot with html and js. But I can't seem to place the element properly. Here's the piece of code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#figurecontainer {
margin: 0px;
width: 960px;
height: 800px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.scatterlayer .trace:last-child path {
pointer-events: all;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<input style="float:left; width:20%; " type="file" id="input">
<div style="float:left; width:20%;" id="status" ><p>Load Data to plot</p></div>
<input style="display: none ; width: 100px" id="saveMe" type="button" value="SaveData">
<div >
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div>
<select style="width:100px" id="xcolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select style="width:100px" id="ycolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div id="figurecontainer"></div>
<script>
// some js
</script>
</body>
</html>
I want the first three element on 1st row, then "X column" and "Y column" in next and finally the two dropdown box on 3rd row alined with the Column names. How can I do that?
EDIT: The fiure blocks others elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
body {
float: left;
width: 100%;
}
.row {
float: left;
width: 100%;
}
input[type=file] {
display: inline-block;
margin-right: 15px;
}
#status {
display: inline-block;
margin-right: 15px;
}
.saveMe {
display: inline-block;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="row">
<input type="file" id="input">
<div id="status" >Load Data to plot</div>
<input id="saveMe" type="submit" value="SaveData">
</div>
<div class="row">
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div class="row">
<select style="width:100px" id="xcolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select style="width:100px" id="ycolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div id="figurecontainer"></div>
<script>
var layout = {
autosize: true,
showlegend: false,
margin: {
t: 20,
r: 10,
b: 30,
l: 30,
pad: 0
},
xaxis: {
range: [0, 8],
fixedrange: false,
layer: 'below traces'
},
yaxis: {
range: [0, 51],
fixedrange: false,
layer: 'below traces'
},
font: {size: 16}
};
var breakpoints = {
x: [1, 8],
y: [5, 30],
type: 'scatter',
cliponaxis: false,
mode: 'markers',
marker: {
size: 5,
symbol: "circle-open-dot",
color: '#b00',
line: {
width: 2
}
},
hoverinfo: 'x+y'
};
var figurecontainer = document.getElementById("figurecontainer");
Plotly.plot(figurecontainer, [breakpoints], layout);
</script>
Your code has a mixed types of positioning elements that is why your web-page was not structured correctly, but for beginners it is ok. I changed your code a little bit and here is the final html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
body {
float: left;
width: 100%;
}
.row {
float: left;
width: 100%;
}
input[type=file] {
display: inline-block;
margin-right: 15px;
}
#status {
display: inline-block;
margin-right: 15px;
}
.saveMe {
display: inline-block;
}
</style>
<title>My Plotter</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="row">
<input type="file" id="input">
<div id="status" >Load Data to plot</div>
<input id="saveMe" type="submit" value="SaveData">
</div>
<div class="row">
<p style="float: left; width: 100px">X column</p>
<p >Y column</p>
</div>
<div class="row">
<select style="width:100px" id="xcolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select style="width:100px" id="ycolumn">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<div id="figurecontainer"></div>
<script>
// some js
</script>
</body>
</html>

How to remove margin between centered input search tag and select tag

Im having trouble removing the space between a centered input type="search" and a drop down select tag.
Here the html and css im using
<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
div {
margin: 0;
}
input {
margin: 0;
}
select {
margin: 0;
padding-left:0;
}
Heres a JSFiddle I made
https://jsfiddle.net/ayt9q75e/1/
If I understand you properly :https://jsfiddle.net/ayt9q75e/3/
* {
padding: 0;
margin: 0;
}
div {
font-size: 0;
line-height: 0;
}
input {
display: inline-block;
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="div" align="center">
<input id="search" type="search" >
<span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
font-size: 14px;
line-height: 22px;
}
select {
display: inline-block;
font-size: 14px;
line-height: 22px;
}
In your current code, obviously there are line-breaks between each line.
With HTML a line-break belongs to "white-spaces", so it's rendered as a space.
You have to suppress those line-breaks to get what you want:
<div id="div" align="center">
<input id="search" type="search" ><span id="span"><select>
<option value="all">All Catigories</option><option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select></span>
</div>
Note that you don't need anything like margin: 0 any more.
Fiddle: https://jsfiddle.net/ayt9q75e/2
HTML:
<div id="div" align="center">
<input id="search" type="search"><span id="span">
<select>
<option value="all">All Catigories</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
</span>
</div>
CSS:
div {
margin: 0;
}
input {
margin: 0;
display: inline-block;
}
#span {
display: inline-block;
}
select {
margin: 0;
padding-left:0;
}
Important: remove the line break before <span id="span">
And I recommend to use CSS to center the div content instead of align="center"
There is a simple way add a class to the parent div and set font-size:0; this will fix your problem
div {
font-size:0;
}

How to increase width of select box arrow?

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.

Boostrap center inline inputs with no space between them

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.

How do I make this search form appear correctly on IE6 - IE8?

I'm working on an app and part of the project requirements is that the entire site be compatible with IE6 - IE8. So far, the rest of the website looks good on older browsers except for this search form I created.
This is what it looks like on modern browsers, and is what it's supposed to look like in general: ,
...but this is what it looks like on IE6: .
Does anyone have some experience with trying to make table-less layouts work on older browsers, or has run into a similar issue in the past? Basically I have containers holding each label / input, and need them to display next to each other in three's per row, with the label and input next to each other ass seen on the first image.
Below is the code regarding these elements.
EDIT: I added a few more things to both the html and css for easier deployment on your own computers.
Thanks for any help you can provide!
HTML
<div class="mid">
<h2>Search and filter by:</h2>
<!-- 1st Row Starts -->
<form action="" method="post" id="main-search-form"> <!-- containing form for search -->
<div id="search-container" align="center">
<div class="search" align="center">
<form>
<label>Keywords</label>
<input type="text" name="keywords" value="" id="keywords" placeholder="enter search terms here...">
</form>
</div>
<div class="search" align="center">
<label>Category</label>
<select>
<option value="" disabled selected>Select Category</option>
<option value="">Category 1</option>
<option value="">Category 2</option>
<option value="">Category 3</option>
<option value="">Category 4</option>
<option value="">Category 5</option>
</select>
</div>
<div class="search" align="center">
<label>Service</label>
<select>
<option value="" disabled selected>Select Service</option>
<option value="food">Food and Nutrition Support</option>
<option value="shelter">Shelter and Care</option>
<option value="protection">Protection</option>
<option value="healthcare">Healthcare</option>
<option value="pyschosocial">Psychosocial Support Services</option>
<option value="education">Formal and informal education</option>
<option value="legal">Legal Services</option>
<option value="other">Other Services</option>
</select>
</div>
</div> <!-- //.search-container -->
<!-- // 1st Row -->
<!-- 2nd Row Starts -->
<div id="search-container" align="center">
<div class="search" align="center">
<label>Age</label>
<select>
<option value="" disabled selected>Select Age</option>
<option value="">Age 1-3</option>
<option value="">Age 4-10</option>
<option value="">Age 11-14</option>
<option value="">Age 15-18</option>
</select>
</div>
<div class="search" align="center">
<label>Gender</label>
<select>
<option value="" disabled selected>Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="search" align="center">
<label>Region</label>
<select>
<option value="" disabled selected>Select Region</option>
<option value="">Category 1</option>
<option value="">Category 2</option>
<option value="">Category 3</option>
<option value="">Category 4</option>
<option value="">Category 5</option>
</select>
</div>
</div><!-- //.search-container -->
<!-- // 2nd Row -->
<!-- 3rd Row Starts Here -->
<div class="search-container" align="center">
<div class="search" align="center">
<form class="checkbox">
<label>Day</label>
<input type="checkbox" name="monday" value="Monday">M
<input type="checkbox" name="tuesday" value="Tuesday">T
<input type="checkbox" name="wednesday" value="Wednesday">W
<input type="checkbox" name="thursday" value="Thursday">R
<input type="checkbox" name="friday" value="Friday">F
<input type="checkbox" name="saturday" value="Saturday" >Sa
<input type="checkbox" name="sunday" value="Tuesday">Su
</form>
</div>
</div>
</form>
</div>
CSS
.mid {background: #258db1; color: #fff; padding: 20px 0 30px 0;}
.mid h2 {color: #fff; text-align: center;}
.mid h2, .mid h3, .mid p, .footnote p {color:#fff;}
/* SEARCH */
#main-search-form {width: 100%;}
.search {min-width: 250px; display: inline; margin:0; position:relative;}
.search select {background: #fff; height: 40px; width: 150px; margin-bottom: 30px; margin-right: 30px; position:relative; display: inline;}
.search option, {padding: 10px; position:relative; display: inline;}
.search, .search label {display: inline;}
.search input#keywords {display: inline; position: relative; min-width: 250px; background: #fff; margin-right: 20px;}
.search .checkbox input {display: inline; position: relative; width: 15px!important; height: 15px!important; margin-left: 10px!important; margin-right: 2px!important;}
.search .checkbox label {display: inline; position: relative; margin-right: 10px;}
#media (max-width: 959px) {
.search {disply: block; clear:both;}
.search input, .search select, .search input#keywords {display:block; margin-bottom: 20px; margin-top: 8px; width: 60%!important; margin-left:30px;}
.search, .search label, .search input#keywords {display: block; clear:both;}
}
Remove align='center' attribute in #search