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>
Related
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 am trying to put a checkbox, label and input box next to each other.
I separated it into divs and and put divs side-by-side.
I was able to get the buttons center but they are to close together which I am trying to fix too.
My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.
html
<div class="col-centered border">
<form>
<div class="first">
<div class="form-group">
<input type="checkbox" class="form-check-input">
<label for="ssn">SSN:</label>
<input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control-file" id="lastname" placeholder="Password">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="role">Role:</label>
<input type="text" class="form-control-file" id="role" placeholder="Password">
</div>
</div>
<div class="second">
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="userId">User ID:</label>
<input type="text" class="form-control-file" id="userId" placeholder="User Id">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="office">Office</label>
<input type="text" class="form-control-file" id="office" placeholder="Office">
</div>
<input type="checkbox">Include Subordinates
</div>
<div class="center-block lower-button">
<div class="center-block">
<button type="submit" class="btn btn-default btn-md left-button">Search</button>
<button type="submit" class="btn btn-default btn-md right-button">Reset</button>
</div>
</div>
</form>
</div>
css
.first {
width: 100px;
float: left;
padding-left: 450px;
}
.second {
width: 200px;
float: right;
padding-right: 950px;
}
.col-centered{
padding-top: 30px;
float: none;
margin: 0 auto;
}
.btn-beside {
position: center;
left: 100%;
top: 0;
margin-left: -10px;
}
.lower-button{
padding-top:250px;
padding-left:575px;
}
.left-button{
padding-right: -14px;
}
.form-group{
text-align: center;
}
I am using bootstrap
Here's a Fiddle for you to take inspiration from.
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="input-group-addon">
<label for="tbox">My Label</label>
</span>
<input type="text" id="tbox" class="form-control">
</div>
</div>
</div>
</div>
As per the official documentation for Bootstrap.
I am trying to get the log in button to work pressing enter in either field posts the form and the button appears but does nothing. Here is the code, any ideas?
Thanks a bunch in advance!
<div><form id="login" action="" method="POST">
<div id="login-form-parent" class="wsite-form-container" style="margin-top: 0px;margin-right: 0px; margin">
<h2 class="wsite-content-title" style="text-align: center;">
<span style="font-size: large;">Please enter your credentials</span></h2>
<div>
<div style= "text-align: center";>
<label class="wsite-form-label" for="name">Username</label>
<div>
<input id="input-616817079299148233" class="wsite-form-input wsite-input wsite-input-width-370px" name="username" type="text" />
</div>
</div>
</div>
<div style="margin-top: 15px;margin-bottom: 15px;"></div>
<div>
<div style="text-align: center";>
<label class="wsite-form-label" for="password">Password</label>
<div>
<input id="input-984837360768012607" class="wsite-form-input wsite-input wsite-input-width-370px" name="pwd" type="password" />
</div>
</div>
</div>
</div>
<div style="display: none; visibility: hidden;"><input name="wsite_subject" type="text" />
</div>
<div style="text-align: center; margin-top: 10px; margin-bottom: 0px;">
<input name="form_version" type="hidden" value="2" />
<input id="wsite-approved" name="wsite_approved" type="hidden" value="approved" />
<input name="ucfid" type="hidden" value="login" />
<input style="position: absolute; top: 0; left: -9999px; width: 1px; height: 1px;" type="submit" />
<a class="wsite-button">
<span class="wsite-button-inner">Submit</span></a></div>
</form></div>
there's no action linked to the form.. fill in action=" " linking to your log in php page.
You would need some handler using jQuery from .wsite-button-inner to trigger your <input type="sumbmit">. Since you hid your input button off screen. When using java script to handle it to have a fancy button best practice would be to add JavaScript validation (not shown in code).
Ie: document.getElementById("login").submit();
or
function submitform()
{
document.login.submit();
}
<div><form id="login" action="" method="POST">
<div id="login-form-parent" class="wsite-form-container" style="margin-top: 0px;margin-right: 0px; margin">
<h2 class="wsite-content-title" style="text-align: center;">
<span style="font-size: large;">Please enter your credentials</span></h2>
<div>
<div style= "text-align: center";>
<label class="wsite-form-label" for="name">Username</label>
<div>
<input id="input-616817079299148233" class="wsite-form-input wsite-input wsite-input-width-370px" name="username" type="text" />
</div>
</div>
</div>
<div style="margin-top: 15px;margin-bottom: 15px;"></div>
<div>
<div style="text-align: center";>
<label class="wsite-form-label" for="password">Password</label>
<div>
<input id="input-984837360768012607" class="wsite-form-input wsite-input wsite-input-width-370px" name="pwd" type="password" />
</div>
</div>
</div>
</div>
<div style="display: none; visibility: hidden;"><input name="wsite_subject" type="text" />
</div>
<div style="text-align: center; margin-top: 10px; margin-bottom: 0px;">
<input name="form_version" type="hidden" value="2" />
<input id="wsite-approved" name="wsite_approved" type="hidden" value="approved" />
<input name="ucfid" type="hidden" value="login" />
<input style="position: absolute; top: 0; left: -9999px; width: 1px; height: 1px;" type="submit" />
<a href="javascript: submitform()" class="wsite-button">
<span class="wsite-button-inner">Submit</span></a></div>
</form></div>
Inline html:
<div><form id="login" action="" method="POST">
<div id="login-form-parent" class="wsite-form-container" style="margin-top: 0px;margin-right: 0px; margin">
<h2 class="wsite-content-title" style="text-align: center;">
<span style="font-size: large;">Please enter your credentials</span></h2>
<div>
<div style= "text-align: center";>
<label class="wsite-form-label" for="name">Username</label>
<div>
<input id="input-616817079299148233" class="wsite-form-input wsite-input wsite-input-width-370px" name="username" type="text" />
</div>
</div>
</div>
<div style="margin-top: 15px;margin-bottom: 15px;"></div>
<div>
<div style="text-align: center";>
<label class="wsite-form-label" for="password">Password</label>
<div>
<input id="input-984837360768012607" class="wsite-form-input wsite-input wsite-input-width-370px" name="pwd" type="password" />
</div>
</div>
</div>
</div>
<div style="display: none; visibility: hidden;"><input name="wsite_subject" type="text" />
</div>
<div style="text-align: center; margin-top: 10px; margin-bottom: 0px;">
<input name="form_version" type="hidden" value="2" />
<input id="wsite-approved" name="wsite_approved" type="hidden" value="approved" />
<input name="ucfid" type="hidden" value="login" />
<input style="position: absolute; top: 0; left: -9999px; width: 1px; height: 1px;" type="submit" />
<a href="javascript: submitform()" class="wsite-button">
<span class="wsite-button-inner">Submit</span></a></div>
</form></div>
<script type="text/javascript">
function submitform()
{
document.login.submit();
}
</script>
With the below code, the summary and it's text box are aligned inline.But the text box for description is appearing below the label 'description'. How can I make it align inline? Please help me in resolving this.
.left {
width: 30%;
float: left;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
float: left;
}
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
Try like this: Demo
If you need multi line text box, use textarea instead of input type text
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Summary</label>
<div class="col-md-6 col-sm-12">
<input type="text" class="form-control" name="Summary" size="50">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-md-6 col-sm-12 form-control-label text-right">Description</label>
<div class="col-md-6 col-sm-12">
<textarea class="form-control" name="Description"></textarea>
</div>
</div>
Edit:
As you mentioned, its not form-control class, its form-control-label.. You can get more info here
Updated Demo: To change the height, try chnaging the value of rows="8" for <textarea>
If you're using Bootstrap (as the classes on your code suggest). I would recommend using their form layout options. Sounds like you want a Horizontal Form:
Docs
For Example:
<form class="form-horizontal">
<div class="form-group">
<label for="summary" class="col-sm-2 control-label">Summary</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="summary" />
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="description" style="height:100px;width:400px" />
</div>
</div>
</form>
<input class="right" type="text" name="Description" style="height:100px;width:400px;">
Remove width from input of description, also please change to textarea, instead of input.
You have already used bootstrap framework.so that there is no need to write extra css for inline forms. follow the following code
<div class="form-group">
<label class="col-lg-3 control-label ">City</label>
<div class="col-lg-9">
<div class="form-inline">
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="city">City</label>
<input type="text" id="city" name="city" class="form-control " placeholder="E.g. Thrissur" >
</div>
</div>
<div class="form-group ">
<div class="col-lg-12">
<label class="sr-only" for="county">County</label>
<input type="text" id="county" name="county" class="form-control " placeholder="E.g. India" >
</div>
</div>
</div>
</div>
</div>
Like this?
https://jsfiddle.net/d6tscd18/
.left {
width: 30%;
display: inline-block;
text-align: right;
}
.right {
width: 65%;
margin-left: 10px;
display: inline-block;
}
try this:
<html>
<head>
<title>sample</title>
<style type="text/css">
.left {
width: 30%;
display: inline-block;
text-align: right
}
.right {
margin-left: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font- size:50px;color:ForestGreen ; text-align: center">Post Your Ad</h1>
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description" style="height:100px;width:400px">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
If you have trouble getting it in place you can also force a table layout without using tables:
.login-form {
display: table;
}
.login-form>div {
display: table-row;
}
.cell {
display:table-cell;
vertical-align: top;
}
...
Adding a div around the inputs and a "cell" class (and shouldn't it be a textarea?):
...
<form action="post" class="login-form">
<div>
<label class="left cell">Summary:</label>
<div class="cell">
<input class="right" type="text" name="Summary" size="50">
</div>
</div>
<div>
<label class="left cell">Description:</label>
<div class="cell">
<textarea class="right" name="Description" style="height:100px;width:400px"></textarea>
</div>
</div>
</form>
...
Check it here
Remove the style attribute from the description input type, it will then appear as the summary input box.
<form action="post" class="login-form">
<div>
<label class="left">Summary:</label>
<input class="right" type="text" name="Summary" size="50" style="width:400px">
</div>
<div>
<label class="left">Description:</label>
<input class="right" type="text" name="Description">
With style sheets I float name, email left and nickname and school right but I would like their text boxes to start at the same point. How can I achieve this with CSS?
<div id="container" align="center">
<div id="name">Name:
<input id="name_text" type="text">
</div>
<div id="nickname">Nickname:
<input id="nickname_text" type="text">
</div>
<div id="email">Email Address:
<input id="email_text" type="text">
</div>
<div id="school">School:
<input id="school_text" type="text">
</div>
</div>
You have to use this way:
There should be <label> to make sure when the user clicks on the label text, it focuses on the respective input.
The <strong> tag has a display: inline-block making it easy to set the width.
You don't need so many ids.
You need to give name attribute to all the <input /> fields.
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
li {
list-style-type: none;
}
li p {
display: inline-block;
width: 120px;
text-align: left;
font-family: "Times New Roman";
font-style: oblique;
font-size: 14px;
}
<div id="container" align="center">
<ul>
<li>
<p>Name:</p>
<input type="text">
</li>
<li>
<p>Nickname:</p>
<input type="text">
</li>
<li>
<p>Email Address:</p>
<input type="text">
</li>
<li>
<p>School:</p>
<input type="text">
</li>
</ul>
</div>
Codepen
A little modification,copy this code and check it.
<html>
<head>
<style>
label strong {display: inline-block; width: 150px; text-align: left; margin: 0 0 10px;}
</style>
</head>
<body>
<center>
<div id="Holder" style="width:50%;">
<div id="L_div" style="float:left;">
<div id="container" align="center">
<div id="name">
<label>
<strong>Name:</strong>
<input id="name_text" type="text" />
</label>
</div>
<div id="email">
<label>
<strong>Email Address:</strong>
<input id="email_text" type="text" />
</label>
</div>
</div>
</div>
<div id="R_div" style="float:right;">
<div id="nickname">
<label>
<strong>Nickname:</strong>
<input id="nickname_text" type="text" />
</label>
</div>
<div id="school">
<label>
<strong>School:</strong>
<input id="school_text" type="text" />
</label>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
If you are a fresher in css use this site W3school for guidence
Regds