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;
}
Related
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'm trying to create a collapsable div that holds thumbnails for images. So far, everything works except that the div content (the thumbnails) flashes and disappears upon collapse and expand. The content is there, it just doesn't stay. If you're quick enough you can click the thumbnail as it flashes and it takes you to the image path. My div looks like this:
<div class="col-lg-8 col-lg-offset-2">
<div id="images" class="accordion-body collapse">
<a href="../images/1953.01.09.00.jpg" class="thumbnail">
<img src="../images/1953.01.09.00.jpg">
</a>
</div>
</div>
And my button:
<a class="btn accordion-toggle" data-toggle="collapse" href="#images">Images »</a>
You can look at my full code here: https://jsfiddle.net/krbylit/jttyq8jv/
Add this to your CSS
.collapse.show {
visibility: visible;
}
For some reason your bootstrap doesn't toggle this property correctly
sometime the case might be some css changes the color of the text inside to white so simply applying the inline css might help :
style="color : black; "
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 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 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 :)