Responsive Form on top of Responsive Image? - Bootstrap - html

I am trying to place a form on top of a Responsive Image, and I want to get the form to also be responsive and resize in relation to the image
Currently the image is responsive but I cannot get the form to be stick in one place on the image and resize in its same position
Is that possible?
Current Code: http://www.codeply.com/go/FFgsRfictx

The following is only correspond to your form section of the page you have provided.
I have removed the image element and used the resource link as the background-image of the form element. The form fields are wrapped with bootstrap classes.
a min-height has been set on the form element to prevent too much distortion of your background image.
Html:
<!--- bootstrap style sheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- form section -->
<section id="contact class" class="container content-section text-center">
<h1 class="brand-heading">Contact</h1>
<div class="container-fluid">
<div class="row">
<!---
under the grid system, one row has can have 12 columns
we'll use 3 columns on each side for spacing,
6 columns for the form.
the form is done the bootstrap way, less the validation.
you need to add in hte missing fields yourself.
--->
<div class="col-md-3"></div>
<div class="col-md-6">
<form id="responsiveForm" action="">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" name="email"/>
</div>
<div class="form-group">
<label for="occasion">Occasion:</label>
<input type="text" class="form-control" id="occasion" name="occasion"/>
</div>
<div class="form-group">
<input type="submit" name="submit" class="form-control btn btn-primary" value="go"/>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
Css:
#responsiveForm{
background-image: url("http://s02.justpaste.it/files/justpaste/d233/a9446587/playingcardtemplate_small.png");
background-size: cover;
background-size: 100% 100%;
min-height: 650px;
padding: 80px;
padding-top: 120px;
}
see it in Codepen
Edit: Just a bit of thought on image. if you want to use a background for your form. you should do up the form first, and find out the size of that form and shape up your image to that proportion.

Try like this:
.formOuterContainer {
position: relative;
}
.formInnerContainer {
position: absolute;
left: 72px;
right: 72px;
top: 80px;
bottom: 84px;
display: flex;
align-items: center;
justify-content: center;
}

Related

How to make two divs completly overlap each other

Let's say I have a form, when user clicks I want another div (with a loading spinner) to appear on top of the form, so the form would still be visible but the loading spinner would be on top of the form:
<div id="form">
<p class="login-box-msg">Sign in to start your session</p>
<form action="javascript:void(0)" method="post" ng-controller="loginCtrl">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email" required ng-model="email">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" required ng-model="password">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div>
<!-- /.col -->
<div class="col-xs-4">
<input type="button" class="btn btn-primary btn-block btn-flat" ng-click="signIn()" value="Sign In" />
</div>
<!-- /.col -->
</div>
</form>
I forgot my password<br>
</div>
<div id="loader" style="background: green;opacity: 0.5;filter: alpha(opacity=50); /* For IE8 and earlier */"></div>
How can I achieve this?
in your <div id="form">
put the following as first element
<div style="position:absolute; width:inherit; height:inherit;">loading...</div>
You can achieve this with position: absolute or position: fixed.
Absolute positioning will position the element according to your top, left, bottom and right values and take it out of the text flow. This will probably be your method of choice here.
Fixed positioning will do the same, except that the div is then positioned relative to the browser window and will stay in this position no matter what, so even when scrolling on the page, the div will stay fixed on this position and not scroll with the rest of the page.
You can do this by using the pseudo element :after,
make it position absolute and give it height and width of 100%
and top and right of 0.
like this:
#form {
position: relative;
}
#form:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #abc123; // put ur spinner here
z-index: 2; // make sure it is on top
}

Change position of containers in bootstrap

I'm still learning bootstrap and I would like to know what should I use move things inside a bootstrap container.
My question is a little bit strange but maybe with images and code it will be easier to understand.
I want to create a form in that precise position like in this image but I donĀ“t know how can to do it. I don't understand if I have to apply margins or padding neither if it is suppose to change/apply css in the row or in the container.
At this moment my website looks like this and my code is this one:
<div id="form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-offset-7">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
</div>
</div>
</div>
Can you guys explain me how can I change my form position and how it is suppose to move things inside bootstrap?
Thanks
you can use offset like what you did. But here I prefer to create to Columns of divs inside row. please review this one: (see in full screen to check the layout)
form {
border-radius: 2px;
border: 1px solid green;
padding: 15px;
}
#form {
margin-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="form">
<div class="container">
<div class="row">
<div class="hidden-xs col-lg-3">test1</div>
<div class="col-xs-6 col-lg-3">test2</div>
<div class="col-xs-6 col-lg-4">
<form class="form-group">
<label for="testEmail">Email address</label>
<input type="email" class="form-control" id="testEmail" placeholder="Email">
</form>
</div>
<div class="hidden-xs col-lg-2">test3</div>
</div>
</div>
</div>
You can use bootstrap's offset class for positioning elements as you need. Here is the documentation for offset:
https://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

Automatically resize parts of a div depending on the width of an image?

I'm developing a form in Bootstrap 3 that is to have a series of text controls and an image. The form takes up 100% of its container, and the text inputs also are set to 100% width. This works well when I don't have to worry about an image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code at the bottom):
Current Look
I need to put the image to the right of these form controls and decrease their width appropriately:
Mockup
I would simply put in another column in Bootstrap's grid system to handle this, but I'd also like the columns to go back up to full width when the image is done, as shown in the mockup image above. Something similar to the "tight" image layout in Microsoft Word. I've tried setting float:right; and display:inline-block' to the image class but it doesn't turn out correctly:
Not Working Yet
Anyone know how to make the design work like how I described it in the mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>
The specific effect I'm going for is to have the inputs below the image expand out to 100% again. Like this:
I know that the image can be floated but I don't want all the inputs below it at the same width as the ones on the lines with the image. I want them to expand.
You just need to add some floats to the image and also to the form, as in the following:
(FIDDLE)
HTML
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }
Have you tried putting the first 3 or 4 inputs and the image in their own row? This will cause the row to expand out to the width of the container and keep your image on the right. You can also add the class class="img-responsive" to the image so that it will shrink down as the screen shrinks.
<div class="row">
<div class="col-sm-8">
//inputs go here
</div>
<div class="col-sm-4">
//image goes here
</div>
</div>
<div class="row">
<div class="col-sm-12>
//the rest of your inputs here
</div>
</div>
I see many kinds of format column in your code. This makes it behave uncontrollable.
Try to use one format only, say, class="col-lg-6.
As long as I know, bootstrap use 100% for form-control, we can modify it by choosing the suitable class of columns.
To handle your need, you can create new CSS file. place it below the bootstrap.min.css. Then Float the image to the right and set the min-width and max width in % to make it resized automatically based on browser's windows.
Besides, use class='img-responsive' inside the image attr to make it resized auto.
Use float property float: right;
.img-right {
float: right;
max-width: 200px;
padding-left: 20px;
}
.form-horizontal {
float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>

How to make some things not wrap in responsive form?

I'm trying to create a responsive form, where some things wrap, and others do not.
I would like the form to look like this on desktop
and like this on mobile
Notice that the icon stays to the right. Unfortunately I cannot use a background image for the icon, as I need to show a tooltip on hover of the icon.
When I attempt this, however, the icon wraps:
So, how can I make the icon be its own element (span or div), yet not wrap below the text field?
Here is one attempt: http://jsfiddle.net/XVu6V/
And here is a Bootstrap 3 attempt: http://jsfiddle.net/syhLJ/1/ I'd really like to use Bootstrap.
Here's some HTML:
<div text-element class="form-group row">
<label for="firstName" class="col-md-2 control-label">First Name</label>
<div class="col-md-5">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="col-md-1 validation-icon required"></div>
<div class="col-md-3 validation-message">
Needed for communication.
</div>
</div>
Why not wrap the icon and <input> inside a div, set that div to position:relative and add a padding-right the same width of the icon. Then set the <input> 100% wide and the icon position:absolute;top:0;right:0? That'll force the icon to always sit to the right of the <input>.
Something like http://jsfiddle.net/syhLJ/7/.
You can view just the HTML preview of it at http://fiddle.jshell.net/syhLJ/7/show/, I use this solution quite a bit and it's never failed so far.
You can stack col-xx-xx together without overriding bootstrap's default styles.
http://jsfiddle.net/99SFW/2/
<div class="container">
<form class="form-horizontal" role="form">
<div text-element class="form-group row">
<label for="firstName" class="col-md-2 col-sm-2 col-xs-12 control-label">First Name</label>
<div class="col-md-5 col-sm-5 col-xs-9">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="col-md-1 col-sm-1 col-xs-1 validation-icon required"></div>
<div class="col-md-3 col-sm-12 col-xs-12 validation-message">Needed for communication.</div>
</div>
</form>
</div>
Not really optimal but you could try absolutely positioning the input and floating it to the left when on a smaller screen, while floating the icon to the right. Then I guess make the input a percentage that will give you some spacing between it and the icon.
.form-group .form-control {
position: absolute;
float: left;
}
I've updated your fiddle here
The HTML goes something like this...
<form>
<div>
<label for="firstName" class="label">First Name</label>
<div class="input">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="icon">R</div>
<div class="validation">Needed for communication.</div>
</div>
</form>
And the css
.input {
float: left;
width:calc(100% - 35px);
max-width: 500px;
}
.icon {
float: left;
background-color: orange;
width: 32px;
height: 32px;
display: block;
margin: 0 4px;
text-align: center;
vertical-align: middle;
line-height: 30px;
color: white;
font-weight: bold;
}
.validation {
float: left;
}
Or you could float the button right and drag it up with a negative margin.
.form-group .validation-icon {
float: right;
margin-top: -33px;
}
#media (min-width: 992px) {
.form-group .validation-icon {
float: left;
margin-top: 0;
}
}
.form-control {
width: 90%;
}
http://jsfiddle.net/Anp7s/2/

CSS image height with strange behavior

I have a picture and a form side-by-side but I'm not being able to achieve the desired effect. This is what it initially looks like:
Which is cool, but the picture is way to big. The picture contained can vary, so a fixed width and height is not an option, because it would deform the image. I would like to give it a height property and let it adjust the width accordingly. This is what I get if I do that:
I don't understand why the image is aligning to the bottom... The chrome metrics show nothing in that space. No padding, no margin, nothing. I cannot use negative margins because resizing the browser window causes the layout to respond and the image is thrown out of the window. This is what it looks like with a margin-top of -270px (this is exactly what I want).
But if I resize this is what happens.
Here's an HTML snippet. Please tell me if you need more code:
<div class="well second-step">
<div>
<div><img class="img-polaroid"></div>
<div style="">
<form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
<div class="control-group">
<input type="text" name="title" placeholder="Look's title">
</div>
<div class="control-group">
<textarea name="description" placeholder="Description"></textarea>
</div>
<div style="margin-left: 50px;">
<input type="reset" class="btn btn-danger" value="Cancel">
<input type="submit" class="btn btn-success" value="Publish">
</div>
<input type="hidden" name="image">
</form>
</div>
</div>
</div>
Edit:
I created a bootply, and I just added code until the issue replicated. I hope it's enough. Here it is: http://bootply.com/76022
You might consider this:
First step: using a div with a width and height:
<div class="image"></div>
Than apply CSS
.div {
width: 500px;
height: 300px;
}
Step two: Wrap the image in it as:
<div class="image"><img src="~/folder/file.png" alt="photo: /></div>
Try to apply the css
.image img {
width: 100%;
heighti: 100%;
}
This CSS will make it get the height and width according to the div. The div has 500px width so the width will never be more than that.
Third step:
Now to make sure it stays at the top left use this:
.image img {
position: absolute;
top: 0px;
left: 0px;
}
The third step means that the image should have 0 margin from left and top.
Try using absolute positioning to put it at the top of the containing div, like so:
<div class="well second-step">
<div id="img-form-container">
<div><img class="img-polaroid"></div>
<div style="">
<form id="{{ form.auto_id|pyformat:'form' }}" class="form-horizontal" action="{% url 'look-creation-view' %}" method="POST">
<div class="control-group">
<input type="text" name="title" placeholder="Look's title">
</div>
<div class="control-group">
<textarea name="description" placeholder="Description"></textarea>
</div>
<div style="margin-left: 50px;">
<input type="reset" class="btn btn-danger" value="Cancel">
<input type="submit" class="btn btn-success" value="Publish">
</div>
<input type="hidden" name="image">
</form>
</div>
</div>
</div>
and
img-form-container {
position: relative;
};
img-polaroid {
position: absolute;
top:0px; //this can be changed to give it margin
};