I have a search bar and I am trying to embed a font awesome icon, however it does not seem to be getting wrapped within the container div
Here is an image which shows where the icon currently is and I want the search icon to go
Any help will be greatly appreciated, thank you
CSS:
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.searchbar{
position:relative;
}
.searchbar input { text-indent: 32px;}
.searchbar .fa-search {
position: absolute;
top: 10px;
left: 10px;
color: #4f5b66;
}
.search_field {
min-width: 270px;
width: 65%;
height:40px;
font-size: 2em;
behavior: url(js/PIE.htc);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: -4px;
margin-top: 10px;
float:right;
}
HTML:
<div class="searchbar">
<form method="GET" action="search.php" style= "padding: 1px; font-family: Tahoma, Geneva, sans-serif;">
<span class="fa fa-search fa-lg"></span>
<input type="text" name="search" class="search_field" value="<?php echo $_GET['search']; ?>" id="search" maxlength="20" />
<input type="hidden" name="start" value="0" />
<input type="hidden" name="limit" value="10" />
</form>
</div>
You should wrap your input on a div, position that DIV exactly where you want the text input to be, and then set the DIV to position relative. Also place your icon inside this DIV.
On another note, if you ICON is supposed to be clickable for submit purposes, dont use a span, either use a 'button' tag or an actual input-type:submit
Related
I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned on the left of the device Id text field. I've tried setting the display attributes for the text field, as well as the two buttons but it didn't work. I tried setting the float properties, which also didn't work. I was looking at grids I could possibly use from Purecss.io, but I'm not sure if that would fix the problem. I've tried using vertical-align attribute, still no dough.
I'm using a plain bootstrap theme. My HTML skills are pretty basic coming from Java. Anyone know what I can do here?
Here is my main container:
<div class="container">
<!-- Main content here -->
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> <br/>
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
Here are my styles
#main {
vertical-align: middle;
}
#status{
text-align: center;
background-color: #FFFFFF;
padding: 10px;
margin-top: 25px;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#deviceID {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainbutton {
display: block;
margin-left: auto;
margin-right: auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
Here is a preview image: (Having trouble uploading it directly)
http://tinypic.com/view.php?pic=1z499gw&s=8
EDIT:
I somewhat fixed this by applying "float:right" on the first whole form, the text area and the button. There is still a huge horizontal between the two.
#main {
float:right;
}
#main {
text-align: center;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#mainbutton {
display: block;
margin: 35px auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
input[type="submit"], #deviceID {
display: inline;
vertical-align: middle;
margin-top: 35px;
}
.left{
float: left;
text-align: left;
}
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea>
<input type="submit" value="Upload Image" name="submit">
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form class="left" action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</form>
</div>
i think this is what you are asking for.
i rearranged your html a little and added a couple of css rules.
by setting the display on the device id field and the upload button to inline instead of block i got them to be on the same line.
i used vertical-align to... well... align them. and gave them a margin-top.
then floated your second form to the left.
I am trying to remove a border from a input text field for my contact form.
Basically, everytime when I enter any data into the input text field (Name field) and then move on to the next field which is email, the input text field sort of has a border around it that might be invisible of some sort.
I tried my best to mess around with the CSS to make it work, but somehow its not working.
HTML
<section id="contact">
<div class="container">
<h3 class="contact-section-title">Need advice?</h3>
<p class="contact-section-sub-title-form">Drop me an email below.</p
<div class="grid-row col-2">
<div class="grid-unit3">
<form name="form1" method="post" action="contact.php" >
<input name="cf_name" placeholder="What is your name? (Eg: John Doe)" type="text" required />
<input name="cf_email" placeholder="What is your email? (Eg: johndoe#johndoe.com)" type="email" required />
<textarea rows="4" cols="50" name="cf_message" placeholder="Please enter your message" class="message" required></textarea>
<button class="submit" type="submit">Send email</button>
<br><Br><br><Br>
</form>
</div><!--class="email" type="email"-->
</div>
</div>
</section>
JSFiddle
Would appreciate some solid help on this. Don't know where to go from here.
Thank you.
Changes I made ->
border:0px solid #58B9FA;
line 105.
The reason is because you add border:1px solid #58B9FA; to all input element. Fix it by replacing it with:
input {
border: 0
}
Updated Fiddle
Changed the border property in css from following
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:1px solid #58B9FA; }
to
input {
color: #3498db;
display: block;
font-family: Lato-Regular, sans-serif;
font-size: 17px;
margin-bottom: 0.8em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
width: 100%;
border:0px solid #58B9FA; }
set border: none; or border:0 in your input css
FIDDLE
How do I use the search icon included in Font Awesome for input? I have a search feature on my site (based on PHPmotion), that I want to use for the search.
Here's the code:
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; float:left; border: 1px solid black; background-color:
#ffffff" />
<input type="image" src="http://viddir.com/themes/default/images/search.jpg" height="30" width="30" border="0" style="float:right;"/>
<div id="searchBoxSuggestions"></div>
</form>
</div>
You can use another tag instead of input and apply FontAwesome the normal way.
instead of your input with type image you can use this:
<i class="icon-search icon-2x"></i>
quick CSS:
.icon-search {
color:white;
background-color:black;
}
Here is a quick fiddle:
DEMO
You can style it a little better and add event functionality, to the i object, which you can do by using a <button type="submit"> object instead of i, or with javascript.
The button sollution would be something like this:
<button type="submit" class="icon-search icon-large"></button>
And the CSS:
.icon-search {
height:32px;
width:32px;
border: none;
cursor: pointer;
color:white;
background-color:black;
position:relative;
}
here is my fiddle updated with the button instead of i:
DEMO
Update: Using FontAwesome on any tag
The problem with FontAwsome is that its stylesheet uses :before pseudo-elements to add the icons to an element - and pseudo elements don't work/are not allowed on input elements. This is why using FontAwesome the normal way will not work with input.
But there is a solution - you can use FontAwesome as a regular font like so:
CSS:
input[type="submit"] {
font-family: FontAwesome;
}
HTML:
<input type="submit" class="search" value="" />
The glyphs can be passed as values of the value attribute. The ascii codes for the individual letters/icons can be found in the FontAwesome css file, you just need to change them into a HTML ascii number like \f002 to and it should work.
Link to the FontAwesome ascii code (cheatsheet): fortawesome.github.io/Font-Awesome/cheatsheet
The size of the icons can be easily adjusted via font-size.
See the above example using an input element in a jsfidde:
DEMO
Update: FontAwesome 5
With FontAwesome version 5 the CSS required for this solution has changed - the font family name has changed and the font weight must be specified:
input[type="submit"] {
font-family: "Font Awesome 5 Free"; // for the open access version
font-size: 1.3333333333333333em;
font-weight: 900;
}
See #WillFastie 's comment with link to updated fiddle bellow. Thanks!
Here is a solution that works with simple CSS and standard font awesome syntax, no need for unicode values, etc.
Create an <input> tag followed by a standard <i> tag with the icon you need.
Use relative positioning together with a higher layer order (z-index) and move the icon over and on top of the input field.
(Optional) You can make the icon active, to perhaps submit the data, via standard JS.
See the three code snippets below for the HTML / CSS / JS.
Or the same in JSFiddle here:
Example: http://jsfiddle.net/ethanpil/ws1g27y3/
$('#filtersubmit').click(function() {
alert('Searching for ' + $('#filter').val());
});
#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>
For those, who are wondering how to get FontAwesome icons to drupal input, you have to decode_entities first like so:
$form['submit'] = array(
'#type' => 'submit',
'#value' => decode_entities(''), // code for FontAwesome trash icon
// etc.
);
Change your input to a button element and you can use the Font Awesome classes on it. The alignment of the glyph isn't great in the demo, but you get the idea:
http://tinker.io/802b6/1
<div id="search-bar">
<form method="get" action="search.php" autocomplete="off" name="form_search">
<input type="hidden" name="type" value="videos" />
<input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this,
'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold;
font-size: 10pt; height: 28px; width:186px; color: #000000; padding-left: 2px; border: 1px solid black; background-color:
#ffffff" /><!--
--><button class="icon-search">Search</button>
<div id="searchBoxSuggestions"></div>
</form>
</div>
#search-bar .icon-search {
width: 30px;
height: 30px;
background: black;
color: white;
border: none;
overflow: hidden;
vertical-align: middle;
padding: 0;
}
#search-bar .icon-search:before {
display: inline-block;
width: 30px;
height: 30px;
}
The advantage here is that the form is still fully functional without having to add event handlers for elements that aren't buttons but look like one.
Similar to the top answer, I used the unicode character in the value= section of the HTML and called FontAwesome as the font family on that input element. The only thing I'll add that the top answer doesn't cover is that because my value element also had text inside it after the icon, changing the font family to FontAwesome made the regular text look bad. The solution was simply to change the CSS to include fallback fonts:
<input type="text" id="datepicker" placeholder="Change Date" value=" Sat Oct 19" readonly="readonly" class="hasDatepicker">
font-family: FontAwesome, Roboto, sans-serif;
This way, FontAwesome will grab the icon, but all non-icon text will have the desired font applied.
.fa-file-o {
position: absolute;
left: 50px;
top: 15px;
color: #ffffff
}
<div>
<span class="fa fa-file-o"></span>
<input type="button" name="" value="IMPORT FILE"/>
</div>
simple way for new font awesome
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="txtSearch" >
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fas fa-search"></i></button>
</div>
</div>
to work this with unicode or fontawesome, you should add a span with class like below, because input tag not support pseudo classes like :after. this is not a direct solution
in html:
<span class="button1 search"></span>
<input name="username">
in css:
.button1 {
background-color: #B9D5AD;
border-radius: 0.2em 0 0 0.2em;
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5);
pointer-events: none;
margin:1px 12px;
border-radius: 0.2em;
color: #333333;
cursor: pointer;
position: absolute;
padding: 3px;
text-decoration: none;
}
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.
I'm trying to insert a search field in my header (black zone) but doesn't work. I want the search field inline with "SimpleCMS"...
See this screenshot to understand:
I want it on the same line as the header text...
There's my HTML code:
<div id="header"><h1><?php echo($header_text); ?></h1>
<div style="float: right;">
<form action="search.php" method="get">
<input type="text" name="q" id="q" value="Search..." />
<input type="submit" value="Search" />
</form>
</div>
</div>
And my CSS:
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
}
The problem is that you use a <h1> element. This will span over the whole width (see here) of the top so that every other element will be placed below it. Use a <span> instead and style it according to your needs. Using position-absolute as alpaca lips nao suggests might work as well.
Update: Use position: absolute;
#header
{
padding: 5px 10px;
background: #000;
color: #FFF;
text-align: left;
position: relative;
}
#header div form {
position: absolute;
top: 75px;
right: 25px;
}