I am developing a JSF web project with primefaces 6.2.
I would produce a form having outputlabel above inputText.
Following a sample code using div.
How can I produce it using panel, panelGrid, row, column, outputLabel and inputText of primefaces? there have not been successful... Thanks!!
<div class="rows">
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;**strong text**loat:left">
<div>Name:</div>
<div>
<input id="name" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;float:left">
<div>Surname:</div>
<div>
<input id="surname" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
</div>
<div class="rows">
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;float:left">
<div>Address:</div>
<div>
<input id="address" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
<div style="padding-top:5px;padding-bottom:5px;padding-left:10px;float:left">
<div>Email:</div>
<div>
<input id="email" type="text" style="height: 20px; width: 200px;" />
</div>
</div>
</div>
Related
I am trying to add attachment file icon inside the text box.
<div class=row>
<div class="col-lg-10">
<input type="text" id="fname" name="firstname" placeholder="Type Here.." >
<div class="col-lg-2">
<div class="image-upload" id="">
<label for="file-input">
<img src="https://image.flaticon.com/icons/svg/53/53582.svg"/ width="35" height="35">
</label>
<input id="file-input" type="file" multiple="multiple"/>
</div>
</div>
</div>
in the above code right now the attach or upload file option is showing after the text box, but I want this icon to show in the text box (for eg: whtsapp textbox or skype text box).
Can anyone guide me in this?
Thanks in Advance!
Try this, I hope it'll help you out. Thanks
.attachmentWrap {
border: 1px solid #ccc;
position: relative;
padding-left: 20px;
margin-bottom: 10px;
width: 250px;
}
.attachmentWrap img {
position: absolute;
left: 1px;
top: 1px;
height: 15px;
width: 15px;
}
.attachmentWrap input {
border: 0;
}
<div class=row>
<div class="col-lg-10">
<div class="attachmentWrap">
<input type="text" id="fname" name="firstname" placeholder="Type Here.." >
<label for="file-input">
<img src="https://image.flaticon.com/icons/svg/53/53582.svg" alt="" />
</label>
</div>
</div>
<div class="col-lg-2">
<div class="image-upload" id="">
<input id="file-input" type="file" multiple="multiple"/>
</div>
</div>
</div>
Hope it works! Manage margin-left in % acc to browser screen.
<hello name="{{ name }}"></hello>
<div class=row>
<div class="col-lg-10">
<img _ngcontent-c68="" height="20" src="https://image.flaticon.com/icons/svg/53/53582.svg" width="20" style="margin-left: 30%;z-index: 999999;position: absolute;">
<input type="text" id="icon" name="firstname" placeholder="Type Here.." >
<div class="col-lg-2">
<div class="image-upload" id="">
<input id="file-input" type="file" multiple="multiple"/>
</div>
</div>
</div>
I want to make a html page with three sections and inside each section divide it to left and right. In each section I have three boxes and I want to put two boxes on the left and one box on the right following is the css and html code:
.leftbox {
width: 50%;
padding: 5px;
float: left;
}
.rightbox {
width: 50%;
padding: 5px;
float: right;
}
<div id="rotationFormPopup" class="rotationFormPopup" style="width: 900px; display: none; background: #FFF; border: 1px solid; padding: 10px; margin-top: 100px;">
<h2 class="popup-header">Rotation Forms</h2>
<div class="newRotation-sections">
<h3>Details</h3>
<div class="newRotation-section-1" style="margin-top: 10px;">
<div class="leftbox">
<span>Mob</span> <br />
<input type="text" class="newRotation-mob" style="width: 100%;"><br /><br />
<span>Paddock</span> <br />
<input type="text" class="newRotation-paddock" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Date</span> <br />
<input type="text" class="newRotation-date" style="position: relative; display: inline-block; float: left; width: 100%; margin-top: 10px;"><br /><br />
</div>
</div>
<h3>Fencing options</h3>
<div class="newRotation-section-2" style="margin-top: 10px;">
<div class="leftbox">
<span>Available Today</span> <br />
<input type="text" class="newRotation-available" style="width: 100%;"><br /><br />
<span>Paddock Allocation %</span> <br />
<input type="number" class="newRotation-alloc" value="50" style="width: 100%;"><br /><br />
</div>
<div class="rightbox">
<span>Required Result</span> <br />
<input type="text" class="newRotation-result" style="width: 100%;"><br /><br />
</div>
</div>
<h3>Assign As Task</h3>
</div>
</div>
</div>
I receive the below result, I don't know why the fencing options jump to the right side.
Here is the image of my work:
I wrote up this using the Bootstrap Framework. It matches your image exactly.
There's a Codepen if you want to fork and play around with it. It's responsive, too.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="container p-5">
<div class="row">
<div class="col-sm-12">
<h5 class="title text-uppercase bg-success text-white p-1">Rotation Forms</h5>
<h4 class="mb-3 mt-3">Details</h4>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="mob">Mob</label>
<input type="text" class="form-control" id="mob" placeholder="Enter Mob">
</div>
<div class="form-group">
<label for="paddock">Paddock</label>
<input type="text" class="form-control" id="paddock" placeholder="Enter Paddock">
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="date">Date</label>
<input type="date" class="form-control" id="date" placeholder="Enter Date">
</div>
<h4 class="mb-3 mt-3">Fencing Options</h4>
<div class="form-group">
<label for="avail">Available Today</label>
<input type="text" class="form-control" id="avail" placeholder="NaN">
</div>
<div class="form-group">
<label for="allocation">Paddock Allocation %</label>
<input type="number" class="form-control" id="allocation" placeholder="100">
</div>
<div class="form-group">
<label for="result">Required Result</label>
<input type="text" class="form-control" id="result" placeholder="NaN">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<h4 class="mb-3 mt-3">Assign As Task</h4>
<div class="form-group">
<label for="assign">Assign to</label><br>
<button type="submit" class="btn btn-success btn-md" id="assign">Add</button>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="checked">
<label class="form-check-label" for="checked">I want to see this too.</label>
</div>
<button type="button" class="btn btn-success btn-md">Save</button>
<button type="button" class="btn btn-success btn-md">Cancel</button>
</div>
</div>
</div>
I have this back and confirm button. The problem is that when I click the back button it confirms the form. Basically my back and confirm button are having the same function.
I tried putting the back button outside the and it worked well. The problem is it would look like this:
The thing is I want the back button to go first and then the confirm button next. Like this:
I can only do that when the back button is inside the form. As I've said I'm having problems when I do that.
Here's my html:
.form__confirmation,
.form__confirmation2 {
padding: 0px 0px;
display: inline-block;
}
button {
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
background-color: #011f4b;
border: 1px solid #DADDE8;
color: #fff;
padding: 18px;
border-radius: 5px;
outline: none;
-webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
left: 330px;
margin-bottom: 20px;
}
button:hover {
background-color: #1293e1;
}
button:active {
background-color: #1083c8;
}
<div class="container">
<div class="card">
<div class="form__name" style="font-family: Questrial; ">
Leave Application Form
</div>
<div class="time__container">
<div class="section">
<div class="box">
1
</div><span>Date & Time</span>
</div>
<form action="form-to-email.php" class="form__time" method="post">
<div class="date">
<label for="date">From</label> <input id="date" type="date" name="datefrom" required>
</div>
<div class="date">
<label for="date">To</label> <input id="date" type="date" name="dateto" required>
</div>
<div class="timezone">
<label for="timezone"></label>
</select>
</div>
</div>
<div class="message__container">
<div class="section">
<div class="box">
2
</div><span>Message</span>
</div>
<textarea cols="50" rows="5" name="message" required></textarea>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
3
</div><span>Contact Information</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Name</label> <input name="name" type="text" required>
</div>
<div class="cnum">
<label for="cnum">Phone Number</label> <input id="cnum" type="text" name="phoneno" required>
</div>
<div class="email">
<label for="cemail">Email</label> <input id="cemail" name="email" required>
</div>
</div>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
4
</div><span>Send to</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Manager</label> <select name="emailTo" required>
<option value=""></option>
<option value="email#gmail.com">TestingRenzo</option>
<option value="email#gmail.com">TestingPaul</option>
</select>
</div>
</div>
</div>
<a href="home.php">
<div class="form__confirmation2">
<button>Back</button>
</div>
</a>
<div class="form__confirmation" type="submit" name="submit">
<button>Confirm Information</button>
</div>
</form>
</div>
</div>
Try changing this [horribly invalid] code:
<a href="home.php">
<div class="form__confirmation2">
<button>Back</button>
</div>
</a>
<div class="form__confirmation" type="submit" name="submit">
<button>Confirm Information</button>
</div>
To this [valid] version instead:
<div class="form__confirmation2">
<a class="button" href="home.php">Back</a>
</div>
<div class="form__confirmation">
<button type="submit" name="submit">Confirm Information</button>
</div>
And add the .button class to your CSS:
button,
.button {
...
}
button:hover,
.button:hover {
...
}
button:active,
.button:active {
...
}
Your HTML is somewhat wrong. Try to minimize the DIV tags if you can then you will understand the problem. Also in the submit button DIV tag you have mentioned a wrong bootstrap class if I am not wrong.
You can use float:right in order to change the positioning of your buttons. This will leave your DOM structure intact.
<div class="form__confirmation" type="submit" name="submit" style="float:right;" >
<button>Confirm Information</button>
</div>
</form>
<a href="home.php">
<div class="form__confirmation2" style="float:right;">
<button>Back</button>
</div>
</a>
This is the entire code Snippet.
<div class="container">
<div class="card">
<div class="form__name" style="font-family: Questrial; ">
Leave Application Form
</div>
<div class="time__container">
<div class="section">
<div class="box">
1
</div><span>Date & Time</span>
</div>
<form action="form-to-email.php" class="form__time" method="post">
<div class="date">
<label for="date">From</label> <input id="date" type="date" name="datefrom" required>
</div>
<div class="date">
<label for="date">To</label> <input id="date" type="date" name="dateto" required>
</div>
<div class="timezone">
<label for="timezone"></label>
</select>
</div>
</div>
<div class="message__container">
<div class="section">
<div class="box">
2
</div><span>Message</span>
</div>
<textarea cols="50" rows="5" name="message" required></textarea>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
3
</div><span>Contact Information</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Name</label> <input name="name" type="text" required>
</div>
<div class="cnum">
<label for="cnum">Phone Number</label> <input id="cnum" type="text" name="phoneno" required>
</div>
<div class="email">
<label for="cemail">Email</label> <input id="cemail" name="email" required>
</div>
</div>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
4
</div><span>Send to</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Manager</label> <select name="emailTo" required>
<option value=""></option>
<option value="email#gmail.com">TestingRenzo</option>
<option value="email#gmail.com">TestingPaul</option>
</select>
</div>
</div>
</div>
<!-- CHANGED BUTTON TAGS -->
<div class="form__confirmation" type="submit" name="submit" style="float:right;" >
<button>Confirm Information</button>
</div>
</form>
<a href="home.php">
<div class="form__confirmation2" style="float:right;">
<button>Back</button>
</div>
</a>
</div>
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.
I'm trying to find a way to have a form that displays the fields horizontally rather than vertically....with the exception of the last column. I'd like that to span vertically. Here's the code I have for getting the 2 columns the way I'd like them:
<html>
<head>
<style type="text/css">
.display-label, .editor-label
{
margin: 1em 0 0 0;
display: block;
width: 300px;
}
.display-field, .editor-field
{
margin: 0.5em 0 0 0;
display: block;
width: 300px;
}
.sameline-wrapper
{
float: left;
display: inline;
}
.newline
{
display: block;
clear: both;
}
</style>
</head>
<body>
<form action="test.html" method="post">
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a field:
</div>
<div class="display-field">
<input type="text" id="t1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a second field:
</div>
<div class="display-field">
<input type="text" id="t2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a third field:
</div>
<div class="display-field">
<input type="text" id="t3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a fourth field:
</div>
<div class="display-field">
<input type="text" id="t4" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a fifth field:
</div>
<div class="display-field">
<input type="text" id="Text1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a sixth field:
</div>
<div class="display-field">
<input type="text" id="Text2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a seventh field:
</div>
<div class="display-field">
<input type="text" id="Text3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a eigth field:
</div>
<div class="display-field">
<input type="text" id="Text4" style="width: 100px;" />
</div>
</div>
</div>
</form>
</body>
</html>
What I'm trying to accomplish now is to have a 3rd column to the left that spans the entire height of the other rows. The idea is to have a textarea control in there and it all look uniform. I've added this image to help see what I'm trying to do:
and here's a fiddle:
3 Column Form
I just don't know how to get that 3rd column to line up to the left of the others and to be the same height (vertically) as the other rows. Any help is greatly appreicated!
Rearrange your html to specify one div for each column like this:
<html>
<head>
<style type="text/css">
.newspaperCol
{
float: left;
width: 33%;
}
.display-label
{
margin: 1em 0 0 0;
display: block;
}
.display-field
{
margin: 0.5em 0 0 0;
display: block;
}
</style>
</head>
<body>
<div class="newspaperCol">
<label class="display-label">Field 1:</label>
<input class="display-field" type="text" id="text1">
<br />
<label class="display-label">Field 3:</label>
<input class="display-field" type="text" id="text3">
<br />
<label class="display-label">Field 5:</label>
<input class="display-field" type="text" id="text5">
<br />
<label class="display-label">Field 7:</label>
<input class="display-field" type="text" id="text7">
</div>
<div class="newspaperCol">
<label class="display-label">Field 2:</label>
<input class="display-field" type="text" id="text2">
<br />
<label class="display-label">Field 4:</label>
<input class="display-field" type="text" id="text4">
<br />
<label class="display-label">Field 6:</label>
<input class="display-field" type="text" id="text6">
<br />
<label class="display-label">Field 8:</label>
<input class="display-field" type="text" id="text8">
</div>
<div class="newspaperCol">
<label class="display-label">Notes:</label>
<textarea rows="17" cols="30" id="notestext"></textarea>
</div>
</body>
</html>
EDIT:
I re-read your question and updated my answer using more of your original code. I think you're missing some HTML for the notes elements. Try adding the colLeft and colRight css classes and the associated "div" elements shown below.
<html>
<head>
<style type="text/css">
.colLeft
{
float: left;
width: 66%;
}
.colRight
{
float: left;
width: 33%;
}
.display-label, .editor-label
{
margin: 1em 0 0 0;
display: block;
width: 300px;
}
.display-field, .editor-field
{
margin: 0.5em 0 0 0;
display: block;
width: 300px;
}
.sameline-wrapper
{
float: left;
display: inline;
}
.newline
{
display: block;
clear: both;
}
</style>
</head>
<body>
<form action="test.html" method="post">
<div class="colLeft">
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a field:
</div>
<div class="display-field">
<input type="text" id="t1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a second field:
</div>
<div class="display-field">
<input type="text" id="t2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a third field:
</div>
<div class="display-field">
<input type="text" id="t3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a fourth field:
</div>
<div class="display-field">
<input type="text" id="t4" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a fifth field:
</div>
<div class="display-field">
<input type="text" id="Text1" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a sixth field:
</div>
<div class="display-field">
<input type="text" id="Text2" style="width: 100px;" />
</div>
</div>
</div>
<div class="newline">
<div class="sameline-wrapper">
<div class="display-label">
Here is a seventh field:
</div>
<div class="display-field">
<input type="text" id="Text3" style="width: 100px;" />
</div>
</div>
<div class="sameline-wrapper">
<div class="display-label">
Here is a eigth field:
</div>
<div class="display-field">
<input type="text" id="Text4" style="width: 100px;" />
</div>
</div>
</div>
</div>
<div class="colRight">
<label>Notes:</label>
<textarea rows="15" cols="30" id="notestext"></textarea>
</div>
</form>
</body>
</html>