Use angular and bootstrap to switch image behind a form - html

I am attempting to put a background image on a form and change the image by clicking other images in a list. I was able to put a background image in using CSS, but then I can't figure out how to implement my angular. So I put it in an image tag like I had it previously before implementing my form.
My code snippets are below and any pointers would be appreciated!
app.controller('letterCreateCtrl', function($scope, $state){
$scope.current = 'scLetterHead';
});
#responsiveForm{
background-size: cover;
background-size: 100% 100%;
min-height: 650px;
padding: 80px;
padding-top: 120px;
}
<div id="letterForm">
<section id="contact class" class="container content-section text-center">
<div class="col-md-3">
<img class="img-responsive" src="img/scLetterHead.jpg" ng-click="current='scLetterHead'" />
<img class="img-responsive" src="img/scLetterHead2.jpg" ng-click="current='scLetterHead2'" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/scLetterHead3.jpg" ng-click="current='scLetterHead3'"/>
<img class="img-responsive" src="img/scLetterHead4.jpg" ng-click="current='scLetterHead4'"/>
</div>
<div class="col-md-6">
<form id="responsiveForm" action="">
<img class="img-responsive" ng-src="img/{{current}}.jpg" />
<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>
</div>

I had to wrap a around my form and give it a class with a z index attribute of 10. After that I was able to position the form on top of the image.

Related

Button in bootstrap form overflows div on small screens

The button extends out past the div between small and medium (576-768) screens. Cannot figure out why.
<div class="container">
<div class="row freebie">
<div class="col-sm-6 pic42">
<img src="./Resources/images/42_questions.png" class="imgfree" alt="Responsive image">
</div>
<div class="col-sm-6">
<form>
<div class="mb-3">
<label for="name" class="form-label">Your name</label>
<input type="name" class="form-control" id="ame" aria-describedby="name">
<div id="name" class="form-text">We'll never share your email with anyone else.
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Your email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary mb-2 m-2 ">Send my cheatsheet</button>
</div>
</form>
</div>
</div>
</div>
</div>
There's no CSS specific to the form.
Attribute style="overflow: hidden" on that button div should work, hope it helps.

Align text and input so that they are neatly inline vertically

A bit of a beginner's question, I am trying to make my form to look like the following image where the text on the left are vertically aligned and the input field has the same widths.
twitter form
<div class="container">
<div class="row">
<div class="col-md-6">
<label class="d-inline">Full Name: </label>
<input type="text" placeholder="First Name" formControlName="firstName">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label class="d-inline">Email: </label>
<input type="email" placeholder="Email" formControlName="email">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>
Which gives me the following result. I also want the input to stretch to the remaining parent container so that it stops before the "some text".
my attempt
I have tried to set the width css property of the input field to 100% hoping that it will do it. However, that just stretch it all the way which forces it to go to the next line.
I am using bootstrap 4 with Angular2.
Just give your p tag a min-width. I gave the input a max-width so it's better when your screen size is smaller. Hope this answers your question
p.d-inline {
min-width: 75px;
display: inline-block;
text-align: right;
margin-left: 30px;
}
h6 {
margin-left: 30px;
}
input {
max-width: 100px;
}
You said you are using Bootstrap.
Why not Use Bootstrap Form then?
You can find how-to HERE
Open the following snippet in Full Page to see how it works
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-lg-1 control-label">Email</label>
<div class="col-lg-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-lg-1 control-label">Password</label>
<div class="col-lg-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-2">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-3">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
As form-horizontal is not working as expected in bootstrap 4 so, you can try like this.
<div class="container">
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Full Name: </label>
<div class="col-md-9">
<input class="form-control" type="text" placeholder="First Name" formControlName="firstName">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Email: </label>
<div class="col-md-9">
<input class="form-control" type="email" placeholder="Email" formControlName="email">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>

CSS vertically align components within BootsFaces row

I have a BootFaces JSF-generated login form but I can't seem to get the span's to line up vertically in the middle with the input fields.
This is how the login form currently looks:
Here is the HTML that is generated for this particular form:
<html>
<head>
<link rel="stylesheet" href="bsf.css"/>
<link rel="stylesheet" href="core.css"/>
</head>
<body>
<form id="loginForm" name="loginForm" method="post" action="" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="loginForm" value="loginForm" />
<div id="loginForm:j_idt18" class="row">
<div id="loginForm:j_idt19" class="col-md-4"><span class="pull-right">Username:</span></div>
<div id="loginForm:j_idt21" class="col-md-4">
<div id="loginForm:username" class="form-group"><input id="input_loginForm:username" name="input_loginForm:username" type="text" class="form-control bf-no-message" placeholder="Username" /></div>
</div>
<div id="loginForm:j_idt22" class="message col-md-4 ">
<div id="loginForm:j_idt23"></div>
</div>
</div>
<div data-toggle="tooltip" data-placement="auto" data-container="body" title="This password has fancy error messages." id="loginForm:j_idt24" class="row">
<div id="loginForm:j_idt25" class="col-md-4"><span class="pull-right">Password:</span></div>
<div id="loginForm:j_idt27" class="col-md-4">
<div id="loginForm:password" class="form-group"><input id="input_loginForm:password" name="input_loginForm:password" type="password" class="form-control bf-no-message" placeholder="Password" /></div>
</div>
<div id="loginForm:j_idt28" class="message col-md-4 ">
<div id="loginForm:j_idt29"></div>
</div>
</div>
<div id="loginForm:j_idt30" class="row">
<div id="loginForm:j_idt31" class="col-md-2 col-md-offset-4"><button type="submit" id="loginForm:j_idt32" name="loginForm:j_idt32" style="width:100%" class="btn btn-default" style="width:100%">Login</button></div>
<div id="loginForm:j_idt33" class="col-md-2"><button type="submit" id="loginForm:j_idt34" name="loginForm:j_idt34" style="width:100%" class="btn btn-default" style="width:100%">Forgotten password?</button></div>
</div>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:1" value="-5586558823054575095:3125033607536646469" autocomplete="off" />
</form>
</body>
</html>
And here are the two CSS files belonging to BootFaces:
bsf.css
core.css
Assuming that the height will remain consistent, you can vertically center text by specifying both a height and line-height:
.vertical-center {
height: 100px;
line-height: 100px;
}
Just apply that class to the username and password text fields. The values should reflect the height of the input fields.

Aling a div on right

I have this a contact form and I need to float it at the extreme right of its container. How can i do it? I'm trying with everything but nothing happen. Maybe i have to set different class for columns? This is the code:
HTML
<section id="services" class="section text-center">
<div class="container">
<div class="col-md-6 map">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2694.5937634214993!2d8.0133807!3d47.5173021!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x9b610c417aa1ee02!2sZAG+Engineering!5e0!3m2!1sde!2sch!4v1443705863599"></iframe>
</div></div>
<div class="col-md-6 form">
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Firma" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="E-Mail" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="Telefon" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<textarea class="form-control" rows="4" name="message" placeholder="Nachricht"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
</div>
</div>
</form></div>
</div>
<!--/.container -->
</section>
CSS
.col-md-6.map { margin-left: -15px; }
.form-horizontal { width: 100%; float: right; }
.form-group { margin-bottom: -25px; }
.col-md-6.form { border: 1px solid red !important; }
Add col-md-offset-2
<div class="form-group">
// place col-md-offset-2 here for each input
<div class="col-sm-10 col-md-offset-2">
<input type="text" class="form-control" id="name" name="name" placeholder="Vorname, Name" value="">
</div>
</div>
inside form-group either change col-sm-10 to col-sm-12 that will make your input fields take entire width of your form or if yo want them right aligned give float:right to your col-sm-10 div it will work
Not sure what you really want, but if you want the whole form being at the extrem right of the screen, you have to remove the fixed width of your div class="container" which is the reason you have white space on right side.
If you want input being on the right side of your red-bordered area, you should put "float:right" on the col-sm-10" class. Hope it helped you

How to add spacing between the words in a <p> tag and align them with text boxes in the next div

The following is the code for the form which I wrote:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
<form>
<div class="form-group col-lg-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<input type="checkbox" id="in-kit">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</form>
</div>
I am using bootstrap here. And I have the top paragraph heading with a class="bg-primary" which gives a nice background for the heading. I have two text input fields, a checkbox and a button. I want to align the text in the above paragraph with these fields.
https://imgur.com/XinA1kT
I want the Items text to be aligned in center with the first text field, Quantity with the second text field and the In kit with the check box.
As you can see in my code, I added span tags around the text. I experimented with it by adding margin properties to these span tags, but it didn't work properly. I tried a bunch of it works okay but I atleast need 15 to 20 of them which even didn't solve my problem.
Is there any alternative for this? I could even try other alternatives for the p tag too.
Thank you.
This can at least get you started, it's just rows and columns and some minor CSS. The problem you'll have is on a mobile device, if you want this to remain completely horizontal it'll start to break down.
.well-md.well-head {
background: #3973a6;
border: none;
color: #fff;
font-size: 18px;
height: 60px;
text-align: center;
}
.checkbox {
text-align: center;
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<div class="row well well-md well-head">
<div class="col-xs-4">
<p>Items</p>
</div>
<div class="col-xs-3">
<p>Quantity</p>
</div>
<div class="col-xs-3">
<p>In Kit</p>
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-xs-3">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="in-kit" name="in-kit">
</div>
</div>
</div>
<div class="form-group col-xs-2">
<button class="btn btn-primary" id="add-btn">Add</button>
</div>
</div>
</div>
</form>
</div>
You need to put your text descriptors into columns that match with the columns for you inputs. Like this:
<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
<div class="row">
<div class="form-group col-md-5"> Items</div>
<div class="form-group col-md-2">Quantity</div>
<div class="form-group col-md-2">In Kit</div>
</div>
</p>
<form>
<div class="form-group col-md-5">
<input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
</div>
<div class="form-group">
<div class="form-group col-md-2">
<input type="checkbox" id="in-kit">
</div>
<div class="form-group col-md-2">
<button class="btn-primary" id="add-btn">Add</button>
</div>
</div>
</form>
</div>