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.
Related
I'm trying to create a form with Angular2 Material and bootstrap grid,
my HTML looks like this:
<div class="row">
<div class="col-md-6 marign-top-10 margin-bottom-10">
<md-input-container class="full-width">
<input
mdInput
type="text"
formControlName="postal"
placeholder="Postal">
</md-input-container>
</div>
<div class="col-md-6 marign-top-10 margin-bottom-10">
<div class="full-width">
<md-select class="full-width" placeholder="Country" formControlName="country_id">
<md-option *ngFor="let country of countries" value="{{country.id}}">{{ country.name }}</md-option>
</md-select>
</div>
</div>
</div>
my full-width css class just set width:100%.
the problem is that the inputs are not in the same line as it should be
here is a few screenshots:(my application is right to left language so ignore the text direction )
it is a css problem you can add this to your component stylesheet:
.mat-select{
margin-top:10px;
}
Play with the value maybe is greater than 10 or lower
It a problem with md-select styles, I had trouble in project too, so my solution is:
CSS
md-select {
min-height: 30px; // or any value that equal md-input-container>input height
}
JSFiddle example
I've spent hours trying to get rid of the border radius on my select2 append checkbox. As of now the dropdown is displayed with a checkbox on the left. The problem is that there seems to be a border radius between the two input group elements, something similar to the image. The solution proposed was adding the input-group select2-bootstrap-prepend class to the wrapper element which doesn't work for me.
The html is as follows
<div class="col-lg-3">
<div class="panel-body">
<b>Region</b><br>
<div class="input-group select2-bootstrap-prepend">
<span class="input-group-addon">
<input type="checkbox" checked>
</span>
<select id="select2-single-append" class=" region">
</select>
</div>
</div>
</div>
View the running example from jsfiddle
you need
.select2-container--default .select2-selection--single {
border-radius:0 0.25rem 0.25rem 0;
}
see this fiddle
https://jsfiddle.net/grassog/kLchxehz/25/ (relevant css at the bottom of the css portion)
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;
}
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 :)
I have a search page that contains a textbox for the search and a link that says "advanced search" similar to google.
I am having trouble centering the textbox AND having 'Advanced Search' to the right of the textbox.
Basically I want the layout to look like googles http://www.google.com/'>See here
This was my shot:
<div style="width:650px; margin-right:auto; margin-left:auto;">
<%= Html.TextBox("SearchBar")%>
</div>
<div style="width:90px; float:right;">
Advanced Search
</div>
Google uses a table to display their search box. The left and right columns have widths of 25% and the center column has a width of 50%. The search box is in the center column and the "Advanced Search" is in the right column. The left column is empty.
Then just center the table. Your search box will be centered and "Advanced Search" will appear on the right.
You can try using a wrapper div with 90px on each side and auto margin that instead.
IE
<div class="wrapper">
<div class="side"></div>
<div class="textbox"><input type="text" id="myinput"></div>
<div class="side"></div>
</div>
Not being a CSS purist, I too would go the table route since I could do that in much less time than trying to get floated DIVs to line up correctly.
You could however use 3 DIVs floated left and sized appropriately to accomplish the same thing.
<div style="width: 25%; float: left;">Your content here.</div>
<div style="width: 50%; float: left;">Your content here.</div>
<div style="width: 25%; float: left;">Your content here.</div>
you can set style to the textbox if apply something like this:
style="position absolute;top:80px;left:90px;"
your are being explicit on where you want the textbox to be displayed so you specify the pixels and it should be inside a layer... it should work for you
input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search" style="position absolute;top:80px;left:90px">