As you can see in the picture above, the placeholder text of the search bar is a bit to the middle, how do move it to the left side?
The HTML code for this part is
<form class="navbar-form" action="/action_page.php">
<input type="text" class="form-control" placeholder="Search" name="search">
<input class="search-icon" type="image" src="Assets/search.svg" alt="Submit" width="20px" height="20px">
</form>
.form-control {
padding: 20px 60px;
}
^CSS
It is happening because of padding within the input field. Try this:
input[type="text"]{
padding-left:5px;
}
UPDATE: After you have updated your question. Below code will also work fine. But above CSS is a generic one.
.form-control {
padding: 20px 5px;
}
Related
I am trying to make a search box that for the submit button has a magnifying image on the left of the search box. I am using font awesome to get the image, but when I try to add that in as an input I also get a different box that says submit. I am wondering how I can remove the submit box and just have the magnifying glass. Also, any advice on how to get the magnifying glass to be inside of the search bar besides using absolute positioning would be helpful.
Here is the JSFiddle: https://jsfiddle.net/ouuxzs05/
HTML:
<div id="searchbar">
<div id="SearchForm">
<aside id="search">
<form action="http://example.com/search.php" method="get" onsubmit="return check_small_search_form()">
<input type="text" name="search_query" id="search_query" class="search-textbox" value="" placeholder="Search Products and Categories">
<input type="image" class="fa fa-search submit-button" src="">
</form>
</aside>
CSS:
#searchbar .search-textbox {
height:30px;
position:relative;
border-radius:8px;
width:200px;
margin-left:200px;
}
I would make that a button, then remove the border and background, use translateX() to put it over the search box, and add a right padding to the search box so the text doesn't go under the button.
Also removed the outline from your search input field, the button, and added a left padding to the search input
#searchbar .search-textbox {
height: 30px;
position: relative;
border-radius: 8px;
width: 200px;
margin-left: 200px;
padding: 0 25px 0 .5em;
outline: 0;
}
button.iconfont {
border: 0;
background: transparent;
transform: translateX(-150%);
outline: 0;
}
<script src="https://use.fontawesome.com/040e2f1f79.js"></script>
<div id="searchbar">
<div id="SearchForm">
<aside id="search">
<form action="http://example.com/search.php" method="get" onsubmit="return check_small_search_form()">
<input type="text" name="search_query" id="search_query" class="search-textbox" value="" placeholder="Search Products and Categories">
<button type="submit" class="btn btn-success iconfont">
<i class="fa fa-search"></i>
</button>
</form>
</aside>
Replace the input type image with a button you can use following code.
<button><i class="fa fa-search"></button>
button{
background:transparent;
border:none;
text-align:center;
margin-left:-20px;
}
I am working on a site and have a Google CSE input that works fine, except the input field text does not display properly in Firefox. It looks fine in Chrome and Safari. But is absolutely microscopic in FF. The input field is in the upper right corner of the page.
Here is the code:
<form action="http://dev.rouviere.com/search-results/" id="cse-search-box">
<div>
<label for="q">search</label>
<input type="hidden" name="cx" value="017425724926122041548:nrhzbynfo9u" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" autocomplete="on" size="31" style="font-size: 13px; color:#797979;" />
</div>
</form>
Here is the CSS:
form input#q {
height: 20px !important;
font-size: 13px !important;
color: #797979;
float: right;
margin-top: 5px;
}
Note on the inline styling. Because Google applies some styling and my css styling was not having effect, I added the inline styling as well.
It's not rendering microscopic, it's being hidden by your padding/input height.
If you change the following rules it should work:
input#q {
height: 25px !important;
...
}
form input {
padding: 5px 2% !important;
...
}
Although I would suggest restructuring your css to avoid having to use !important everywhere and being more specific about what you're trying to select in your rules.
HTML:
<form action="search.php" method="GET">
<input type="text" name="q" value="Search for an item..." width="150" style="border: solid 1px black; padding: 3px;" />
<input type="image" src="images/search_icon.png" style="width: 24px; height="30px;" />
</form>
What I get:
by the way, if I try use padding on just the button, it moves the whole form down.
Try setting the vertical-align property on the input to middle.
input {
vertical-align: middle;
}
jsFiddle example.
I want to have two elements stay on the same row.
Right now I have this code:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</fieldset>
This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?
You need to override the jQM enhancements:
http://jsfiddle.net/E4EVT/10/
http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
http://jsfiddle.net/E4EVT/42/ (Using the table layout)
JS
$('#textinput2').css('width','60%').css('display','inline');
HTML
<div>
<!-- use span instead of label -->
<span>Text:</span>
<input type="text" id="textinput2"/>
<br />
<input type="button" id="searchbutton2" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
I think you might want to look into the grid layout jQM offers
http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html
For Jquery Mobile 1.2.0
<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>
you need to add attribute data-inline="true" to the input elements.
CSS:
label {
display: block;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
width: 212px; /* the width of twice your input (plus borders) */
}
And your HTML:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<div class="wrap">
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
</fieldset>
http://jsfiddle.net/ahallicks/BWsdk/
Edit:
Sorry, misread your question! If you want them all on the same line to start with use the following CSS:
label {
float: left;
margin-right: 12px;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
float: left;
width: 212px; /* the width of twice your input (plus borders) */
}
http://jsfiddle.net/ahallicks/E4EVT/
I want to have my submit button to the right of my search form. But I also want to keep my label above the form field. So it's Label, then on a new line the field with the search button on the same line.
<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/sponster/users/display" accept-charset="utf-8">
<div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
<div class="input text"><label for="UserSearchForAFriend'sPage">Search For A Friend's Page</label><input name="data[User][Search for a friend's page]" type="text" id="UserSearchForAFriend'sPage" /></div>
<div class="submit"><input type="submit" value="Search" /></div></form>
</div>
Without changing any of your markup:
#UserDisplayForm label { display: block; }
#UserDisplayForm div { display: inline-block; }
Here's a working example. I've assumed you want the styles to apply only within your form, hence I've prefixed the rules with #UserDisplayForm.
Put your <label...> and <input...> tags inside <span...> instead of <div...>
I'd do something simple like:
<... previous elements ...>
<div class="row"> <!-- this is semantically a "form row" -->
<label style="display: block" ...></label>
<input type="text"...>
<input type="submit" ...>
</div>
The simplest ting to do is to change the inner div tags to span tags and add a br break to get to the next line.. :)
<div class="searchForm">
<form id="UserDisplayForm" method="post" action="/sponster/users/display"
accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST" />
</div>
<span class="input text">
<label for="UserSearchForAFriend'sPage">Search For A Friend's Page
</label>
<br>
<input name="data[User][Search for a friend's page]" type="text"
id="UserSearchForAFriend'sPage" />
</span>
<span class="submit"><input type="submit" value="Search" /></span>
</form>
</div>
Or else you could make the label reside in a separate div tag and the textbox and button in separate span tags as shown below.
Search For A Friend's Page
Try this stylesheet:
.searchForm {
clear: both;
display: block;
width: 150px; /* whatever width you want it to be */
}
.searchForm .input {
display: block;
float: left;
margin: 0 10px 0 0;
width: 100px; /* whatever width you want it to be */
}
.searchForm .input label { display: none; /* generally people don't want their label showing when making a search field */
.searchForm .input input { display: block; ... and any other styles ... */
.searchForm .submit {
display: block;
float: right;
margin: 0 0 0 10px;
width: 30px; /* again, whatever width you want it */;
}
This is making the <div>'s float properly. You do not have to put them in <span>'s to make it work, that's just lazy coding.
Chuck in your widths in the styles to whatever you want them to be, and it should work. It really depends on the rest of your code/css.
Good luck!