I am using twitter bootstrap and want to have a search icon inside the search field. I managed to get it working, however when selecting the form, for some reason the icon disappears. What am I doing wrong?
Here is my HTML code:
<div class="control-group">
<div class="form-controls">
<div class="input-append">
<span class="fornav"><i class="icon-search"></i></span><input type="text" class="search-query span2" placeholder="Search…">
</div>
</div>
</div>
and the CSS:
.fornav {
position:relative;
margin-right:-22px;
top:-3px;
z-index:2;
}
Thank you very much for any advice :)
I think I found the problem. I changed z-index to 9999 and it works :)
Related
So there seems to be a stubborn search button icon in the top bar of the staging site of my site but the problem is there is no turn-off or turn-on button for the icon in the admin area. I just can't seem to have it removed.
I believe I can remove this using CSS but I don't know how to.
The site I need help with is: (removed)
Add the following CSS rule to your template.css file:
.topbar .header-right .main-search {
display: none !important;
}
The file is located at /staging/wp-content/themes/oxpitan/css/template.css
If you have access to the html code, simply remove the div with the class "main-search gva-search".
Or, in your css add:
.main-search{
display: none;
}
Note, that this causes the entire class to hide. If you want to only hide that certain element, give it an Id and hide it in CSS the same way, except with # instead of .
Open inspect from chrome and get its id or unique class then add this css code to remove it
class or id {display:none!important;}
remove that from your theme it must be in the header
note: if you use display:none; it still loads but it cannot be seen, if you dont need it at all just delete it.
open the header and search for below codes and delete them.
<div class="main-search gva-search open">
<a class="control-search search-open"><i class="fa fa-search"></i></a>
<div class="gva-search-content search-content">
<div class="search-content-inner">
<div class="content-inner"><form method="get" class="searchform gva-main-search" action="https://sundaybasilagbalegacyfoundation.com/staging/">
<div class="gva-search">
<input name="s" maxlength="40" class="form-control input-large input-search" type="text" size="20" placeholder="Search...">
<span class="input-group-addon input-large btn-search">
<input type="submit" class="fa" value="">
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I used the PrimeNG Autocomplete ,I faced some conflict , when I used this style autocomplete drop downs is take a down position ,
Image description here
Anyone know how to do that correctly ?
Thanks
<div class="col">
<div class="form-group">
<label >Please Select a Tag</label>
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
[minLength]="1" placeholder="Hint: type 'Gold' or 'G'" [dropdown]="true"[style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete" >
<ng-template let-brand pTemplate="item">
<div class="ui-helper-clearfix" style="border-bottom:0px solid #D5D5D5">
<div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
</div>
</ng-template>
</p-autoComplete>
</div>
</div>
style
.p-autocomplete{
width: 100%;
}
Hi Just remove the [inputStyle]="{'width':'100%'}" from <p-autoComplete> tag. It will work fine. Check the stackblits
You are giving 100% width to input field that why icon going down. Hope it helps.
I've tried everything I can think of and I cannot reproduce this form in this way:
I want to make it to look exactly like in the picture but I have the following problems:
The buttons and the last text input are not staying inline.No ideea how to fix this and possibly resize the other ones so they look like in the picture.
I cannot use specific fonts already imported into html(I've tried adding them in css with the !important function, still doesen't work)
Problems with the button color.
I really have no more ideeas left.I am very new to all this.
Can someone help me make the modifications necessary to reproduce the form in the picture?
Here is what I have now:
http://www.bootply.com/x59KVak
Wrap the two elements in a div and float them left and right: BOOTPLY
<div>
<input style="float:left">
<button style="float:right"></button>
</div>
Just add div parent for input and button and make float left,right...here is fixed, if i understand good.
http://www.bootply.com/TGuWOd5ZET
User this for your last line button and text, tested it and found working
<div class="form-group row">
<div class="col-lg-12">
<label for="Camera2">Camera dorita</label>
</div>
<div class="col-lg-6">
<input class="form-control" id="camera" type="text">
</div>
<div class="col-lg-6">
<button type="submit" class="btn btn-warning">Cauta</button>
</div>
</div>
I have a little grid:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 firefox">
<h2>Firefox fix</h2>
<p>If firefox is prompting for password click button below.</p>
</div>
And I want to hide the div with 3rd column.
I was trying to do this with css:
<style>
div.firefox {
display:none !important;
}
</style>
with no effect.
I need to modify something more?
You can use visibility class built in bootstrap
reference helper-classes-show-hide
The problem was in Visual Studio caching old code.
After deleting all visual studio cache problem disappeared just like that div ;)
I am trying to use Bootstrap Select Plugin inside of an Bootstrap 32 accordion at this Demo but the Select option is hiding inside the panel-body
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
Can you please let me know why this is happening and how I can fix it?
Thanks
The problem the position of the dropdown list.
fiddle : http://jsfiddle.net/52VtD/3386/
Just add a class on your dropdown list to make is position relative.
.bootstrap-select .dropdown-menu{
position:relative;
}