This is my html code
I cannot understand why the contents are not showing inside the div.
<div class="contact-form">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label">Full Name :</label>
<div class="">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label">Subject :</label>
<div class="">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
Heres my style
.contact .contact-form{
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
}
Can someone help me? Thanks in advance.
Try this:
CSS
.contact-form{
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
DEMO HERE
Because you have not used row div, you are using bootstrap structure ,so you should use cols (col-lg-12 col-md-12 col-sm-12 col-xs-12) in row.
try this:
<div class="row contact-form">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label">Full Name :</label>
<div class="">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label">Subject :</label>
<div class="">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
Related
So I have bootstrap downloaded and have the following piece of code.
<header id="top">
<div class="container">
<div class="row">
<div class="col-sm-3 ">
<image alt="here will be the logo" src=""></image>
</div>
<div class="col-sm-6 ">
</div>
<div class="col-sm-3">
<form class="form-horizontal" >
<div class="form-group row">
<label class="control-label col-sm-4" for="document">Document:</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="document" placeholder="document">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="revision">Revision:</label>
<div class="col-sm-8">
<input class="form-control" id="revision" placeholder="revision">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="pagenr">Page nr:</label>
<div class="col-sm-8">
<input class="form-control" readonly = "true" id="pagenr" placeholder="here will be page number">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-4" for="iso">ISO:</label>
<div class="col-sm-8">
<input class="form-control" id="iso" placeholder="iso">
</div>
</div>
</form>
Here is the result i get : web page
Now what interests me is 1. the alignment of text inside the forms (for some reason label is positioned higher than the input) and 2. the huge right margin which does not go away whatever i try to do and eats away input space. On a sidenote it's also interesting that making input field 'readonly' makes it perpetually gray.
Here is my css code:
input.form-control{
width: 80%;
padding: 15px 22px;
margin: 5px 5px;
box-sizing: border-box;
font-size: 14px;
height: 10px;
border:0;
background-color: #FFEBCD;
}
header {
padding-top: 20px;
height: 100px;
font-size: 14px;
}
div.container
{
margin-right: 1px;
margin-left: 100px;
padding-right: 1px;
border-right: 1px;
}
div.form-group
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
form.form-horizontal
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
vertical-align: bottom;
}
div.row
{
margin-right: 1px;
padding-right: 1px;
border-right: 1px;
}
label.control-label
{
width: 100%;
vertical-align: baseline ;
background-color: CadetBlue;
text-align: left;
}
So none of the vertical or text alignment attributes seem to work nor setting 'right margin' = 1px to any element I can think of.
The Html code I provided only covers the first form, since the whole code would just be twice as big and the problem is obviously the same with second form.
I've edited their code. I hope it's the way you wanted it to be. It's really complicated wrote.
<header id="top">
<div class="container">
<div class="row">
<div class="col-sm-4 ">
<image alt="here will be the logo" src=""></image>
</div>
<!-- <div class="col-sm-6 ">
</div> -->
<div class="col-sm-8">
<form>
<div class="form-group row">
<label class="col-form-label col-sm-2" for="document">Document:</label>
<div class="col-sm-10">
<input type="email" class="form-control " id="document" placeholder="document">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="revision">Revision:</label>
<div class="col-sm-10">
<input class="form-control" id="revision" placeholder="revision">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="pagenr">age nr:</label>
<div class="col-sm-10">
<input class="form-control" id="pagenr" placeholder="here will be page number">
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="iso">ISO:</label>
<div class="col-sm-10">
<input class="form-control" id="iso" placeholder="iso">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
Ok,so i did fix the text misallignment by juggling line-height of both form elements until they looked good enought. When you colour the boxes you still see the misalignment though. And right margin was so big because the left was too small if that makes sense
I created a html card following this tutorial. Then i added to my page (which uses bootstrap 3.0). However, the text is not wrappering like it does in the tutorial. Does anyone know why this is or how to fix this?
Picture
https://i.stack.imgur.com/cD9dy.png
Html snippet
<div class="row">
<div class="col-lg-2">
<div class="form-group ">
<card [visable]="obj.one" [width]="100" [image]="obj.two" [header]="project.manager?.name" [content]="obj.four"></card>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="control-label ">
Project Name
</label>
<div class="input-group">
<input class="form-control" type="text" [value]="project.name" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Project Number
</label>
<div class="input-group">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Project Creator
</label>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="control-label ">
Team
</label>
<div class="input-group">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Team ID
</label>
<div class="input-group">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Team Manager
</label>
</div>
</div>
<div class="col-lg-3">
<div>
<div class="card" style="width: 100%;">
<div class="container">
<h4><b>Project Details</b></h4>
<p >One team of students collected data from a consumer Internet website with automobile specificatins.The summary slide shows the results of their linear regression analysis on car engine horsepower and average miles per gallon (MPG) ratings</p>
</div>
</div>
</div>
</div>
</div>
css
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
Bootstrap container is conflicting with with "tutorial" container.
Use a special container class for the card...
<div class="col-lg-3">
<div>
<div class="card" style="width: 100%;">
<div class="card-container">
..
</div>
</div>
</div>
</div>
.card-container {
padding: 2px 16px;
}
I am having an issue of overlaying a hidden div, when I click a button. What I am trying to have happen is when the hidden div appears that it goes on top of everything else below it based on its height. All I can get it to do is push everything else downwards as you can see in my snippet.
Other solutions that I have looked at haven't taken in consideration of using bootstrap, and when I am testing out the solutions I have found, it puts everything out of whack, and that would be when I use absolute as position, like the solutions I have seen.
Any help would be appreciated.
$(document).ready(function () {
$("#myHiddenDiv").hide();
});
$("#myBtn").click(function () {
$("#myHiddenDiv").toggle();
});
$("#btn2").click(function () {
$("#myHiddenDiv").toggle();
});
#myHiddenDiv {
/*width: 325px;*/
height: 300px;
border: 1px solid green;
background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10" style="z-index:2; position:relative">
<div id="MaterialGridList">
</div>
</div>
</div>
<div style="z-index:1; position:relative;">
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" style="width:100%" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div style="border:1px solid black; height:400px; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
Refactoring some stuf, this could work for you. You need to use the atribute "position" with "absolute" value for box and the form need to have "relative" value. Use the z-index attribute to set the position versus other tags.
$(function () {
$("#myBtn").click(function () {
$("#myHiddenDiv").toggle();
});
});
.form-container {
position: relative;
z-index: 8;
}
#myHiddenDiv {
display: none;
height: 100%;
width:100%;
border: 1px solid green;
background-color: cornflowerblue;
position: absolute;
z-index: 9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
</div>
<div class="form-container">
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
<div id="MaterialGridList"></div>
</div>
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" style="width:100%" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div style="border:1px solid black; height:400px; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
You'll have to use position: absolute. To fix the whackiness, just add the line width: 100% to #myHiddenDiv.
I would also suggest taking a look at jQuery animation methods, like .fadeToggle() and .slideToggle().
Below's the working sample.
EDIT: Rewrote some code to address issues pointed on comments
$("#myBtn, #btn2").click(function () {
$("#myHiddenDiv").toggle();
});
#myHiddenDiv {
display: none;
position: absolute;
width: 100%;
z-index: 2;
height: 300px;
border: 1px solid green;
background-color: cornflowerblue;
}
#ddColor {
width: 100%;
}
.relative {
position: relative;
z-index: 1;
}
.black-border {
border: 1px solid black;
height: 400px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="form-horizontal">
<div class="row row-splitter">
<label for="ddLocation" class="col-md-1 control-label">Location</label>
<div class="col-md-2">
<div class="btn btn-primary" id="myBtn">Click Me</div>
</div>
<div id="myHiddenDiv" class="col-md-offset-1 col-md-10">
<div id="MaterialGridList">
</div>
</div>
</div>
<div class="relative">
<div class="row row-splitter">
<label for="ddLocationMaterial" class="col-md-1 control-label">Material</label>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Location Material.." />
</div>
<label for="ddColor" class="col-md-1 control-label">Color</label>
<div class="col-md-2">
<input type="text" id="ddColor" class="form-control" />
</div>
<label for="qty" class="col-md-1 control-label">Length</label>
<div class="col-md-2">
<input type="text" id="qty" class="form-control" placeholder="Length..." />
</div>
<label for="ddColor" class="col-md-1 control-label">Width</label>
<div class="col-md-1">
<input type="text" id="qty2" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<label for="ddColor" class="col-md-1 control-label">Width in Inches</label>
<div class="col-md-1">
<input type="text" class="form-control" placeholder="Width..." />
</div>
</div>
<div class="row row-splitter">
<div class="col-md-10 col-lg-offset-1">
<div class="black-border"></div>
</div>
</div>
</div>
</div>
</div>
</body>
I am entertaining the idea of using bootstrap for all future pages on our internal website. The following image looks and works great on all sized devices.
The issue is that I used one row containing two horizontal labels and inputs for each line. When the bootstrap resizes, the rows are merged. The issue is that the two columns are separate subjects and when the device view port is smaller, the right column should position itself underneath the left column. Instead they merge. Left column item 1 is first and then right column item 1 is second. I need it too be all of left column and then all of right column.
Any direction on this issue would be very helpful.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
text-align: center;
border: 2px solid blue;
}
h1{
margin: auto;
}
.body{
border: 2px solid blue;
margin-top: 10px;
}
.inline{
display: inline-block;
}
.no-margin{
margin: 0px;
}
label{
width: 140px;
margin-right: 5px;
text-align: left;
white-space: nowrap;
}
input{
margin-left: 0px;
margin-top: 10px;
}
.left_margin{
margin-top: 10px;
margin-left: 230px;
}
#media screen and (min-width: 768px){
label{
text-align: right;
}
input{
margin-left: 10px;
margin-top: 10px;
}
}
<div class="col-lg-12 header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-inline" role="form">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The id must be unique.
col-lg-6 col-md-6 col-sm-12 col-xs-12 is equivalent to col-md-6.
Wrap up left and right columns of fields by two <div class="col-md-6"></div> blocks.
I guess you need to use the Horizontal form instead of the Inline form.
Place labels into <div class="form-group"></div> blocks.
Make labels left-floating and use the hidden: overflow; trick to fill all the remaining space by the non-floating block.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
h1.lead {
margin: 0;
padding: 12px;
}
.body{
border: 2px solid blue;
margin-top: 10px;
padding-top: 12px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-horizontal .control-label {
display: block;
float: left;
margin-bottom: 0;
margin-right: 20px;
padding-top: 7px;
white-space: nowrap;
}
.form-horizontal .form-control {
width: 100%;
}
.fill-free-space {
overflow: hidden;
}
<div class="header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input_left_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_1" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_2" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_3" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_4" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_5" placeholder="Left">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input_right_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_1" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_2" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_3" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_4" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_5" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_6" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_6" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_7" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_7" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_8" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_8" placeholder="Right">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I would like to add a button to the right of the zip code without effecting the size of the field.
Any suggestions would be appreciated.
My original markup was (which is what picture matches):
<div class="col-md-6 col-md-offset-3 text-center" style="border:solid">
// All my fields...
</div>
I then tried:
<div class="col-md-3"></div>
<div class="col-md-6">
// All my fields using form-group
</div>
<div class="col-md-3">
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group"></div>
<div class="form-group">
#(Html.Kendo().Button()
.Name("btnLookup")
.Content("Lookup")
)
</div>
</div>
However it placed the button to the top of the form.
Before I added the button the page looks like:
Have you tried adding them via display: absolute?
.form-group {
position: relative;
}
.lookup {
position: absolute;
top: 0;
right: -50px;
width: 40px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Postal">
<button class="btn btn-primary lookup"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="City">
</div>
</div>
</div>
</div>