I am trying to align the search button right next to the search box however button seems to be below. This is what I got:
<form action="{linkto page="search.php"}" method="get" id="searchFormTest">
<input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}" placeholder="Suchbegriff oder Bildnummer">
<div style="display: inline;">
<button type="submit" value="Submit">
<i style="font-size: 40px;" class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</form>
Float your search input to the left, float your submit button to the left. Ready.
input[type="search"],
button {
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div style="display: inline;">
<input type="text"/>
<span> <button type="submit" value="Submit">
<i style="font-size: 20px;" class="fa fa-search" aria-hidden="true"></i></span>
</button>
</div>
this should work to have the icon right next to the search box.
You code works just fine in jsfiddle. I think you should look into css styles which are being inherited by the button.
<form method="get" id="searchFormTest">
<input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" placeholder="Suchbegriff oder Bildnummer">
<div style="display: inline;">
<button type="submit" value="Submit">
<i style="font-size: 15px;" class="fa fa-search" aria-hidden="true">Search</i>
</button>
</div>
</form>
Related
I would like to remove the space between <input> and <button>.
In the CSS, I tried with padding: input, button {padding : 0px}, but it didn't work.
<form action="search">
<div class="input-search">
<span class="input-icon">
<i class="fas fa-map-marker-alt"></i>
</span>
<input type="text" placeholder="Los Angeles" />
<button type="submit">
<strong>Search</strong>
</button>
</div>
</form>
margin-left: -1em; maybe?
Margin can have negative value...
button{
margin-left: -1em;
}
<form action="search">
<div class="input-search">
<span class="input-icon">
<i class="fas fa-map-marker-alt"></i>
</span>
<input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
</div>
</form>
You can add the input-search div style display:flex.
<form action="search">
<div class="input-search" style="display:flex;">
<span class="input-icon">
<i class="fas fa-map-marker-alt"></i>
</span>
<input type="text" placeholder="Los Angeles" /> <button type="submit"><strong>Search</strong></button>
</div>
</form>
I want to change my normal checkbox looks to as shown below. Please help me with the same.
Image (5) shows not active checkbox and (6) shows checked checkbox.
Current code being used is as below:
<div class="x-form-cb-li x-form-cb-li-h" style="padding-bottom: 5px">
<input type="checkbox" class="custom-checkbox x-form-field" id="optIn-Y" name="optIn" value="Y" style="float:left"><label class="x-form-cb-label" for="optIn-Y">Yes, please send me interesting offers</label>
</div>
To add to the above query. How can I make 2 such checkboxes to behave as radio buttons i.e. if the second one is clicked the first one is no longer checked and vice versa.
It shows how you can put a checkbox as a radio button:
$('.select-option').click(function(){
$(this).find('i').toggle();
var checked=$(this).find('input').prop('checked');
$(this).find('input').prop('checked',!checked);
if(!checked){
$(this).siblings().each(function(){
$(this).find('input').prop('checked',false);
$(this).find('i').first().show();
$(this).find('i').last().hide();
});
}
});
.select-option{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='select-group'>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
</div>
Try this and thinks.
$('.select-option').click(function(){
$(this).find('i').toggle();
$(this).find('input').prop('checked',!$(this).find('input').prop('checked'));
});
.select-option{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="select-option">
<input type="checkbox" style="display: none">
<i class="fa fa-square-o"></i>
<i class="fa fa-check-square-o" style="display: none;color:#428bca;"></i>
</span>
Hi I trying to do the following for getting the search button inside the input field with class input-ol, but its not working. I am writing the following code.
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol" name="query" placeholder="Ex: cars, watches, exercise... "/>
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary" type="button" aria-label="Search">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
The output looks like this
I think you need to add the class form-control to your input element to get it to work.
.input-group input.input-ol {
border-radius: 50px;
}
button.rounded {
border-radius: 10px 50px 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-6">
<form id="search_form" onsubmit="return false;">
<div class="input-group">
<input type="text" class="input-ol form-control" name="query" placeholder="Ex: cars, watches, exercise... " />
<span class="input-group-btn" onclick="return searchcontent()">
<button class="btn btn-outline-primary btn-primary rounded" type="button" aria-label="Search">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</div>
</div>
I also removed the class fa-2x from the icon element just to make the snippet work, but if you have additional styles that make the larger button work with your input field you probably won't have to remove that class.
I want to know how to replace submit button with font awesome icon, I already tried it myself and the icon won't show up on the button.
Here is what I have done so far :
<form action="{{route('destroycourse', $course->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
<button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
<i class="fa fa-delete"></i>
</button>
</a>
</li>
</form>
The button works just fine only the icon <i class="fa fa-delete"></i> won't show up and it's just showing a blank button. Thanks for the help!
I couldn't find fa-delete. I have used fa-trash to display trash icon.
You just need to include the font-awesome css in your code and correct class name.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form action="{{route('destroycourse', $course->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
<li><a class="tooltips" data-toggle="tooltip" data-placement="top" title="Delete">
<button type="submit" onclick="return confirm('Are you sure to delete this course ?');" style="border: 0; background: none;">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</a>
</li>
</form>
You are using wrong class of fontawesome
change class of fa fa-delete to fa fa-trash.
Working fiddle
fiddle link
button {
background:tomato;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="submit"><i class="fa fa-trash"></i>Submit</button>
there is no such a class for icon that you are using is fa-delete.use the classes which are present.
for your reference, use these links.
https://www.w3schools.com/icons/fontawesome_icons_text.asp
https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
else use class "fa-trash-o" for delete icon
I am having difficulty in fixing an issue with rendering a search box the way it is working on chrome on all other browser. Fire fox is totally showing the search box differently. Provided below some screenshots:
Chrome:
https://gyazo.com/8014660292a4e23390bb5dec1100bda0
Firefox :
https://gyazo.com/7fb0c75410f428404be7e64d495e23e3
HTML:
<div id="headerSearchBox">
{* Header Search Box Area *}
{if $config.settings.search}
<div class="container">
<form action="{linkto page="search.php"}" method="get" id="searchFormTest">
<input type="hidden" name="clearSearch" value="true">
<div class="row">
<div class="col-md-6">
<div id="custom-search-input">
<div style="background-color: black" class="search_bttn input-group col-md-12">
<input type="text" id="searchPhrase" name="searchPhrase" class="searchInputBox" value="{$lang.enterKeywords}" placeholder="Suchbegriff oder Bildnummer">
<span class="input-group-btn">
<button id="clickableAwesomeFont" class="btn btn-info btn-lg" type="submit">
<i style="font-size: 20px; color: white;" class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
{/if}
</div>
Please can you advice me on how to go about fixing it ??
Thank You