I have this dropdown list but problem is when i run it in IE it goes up and down if i select something from bottom or middle.How can fix so that it expand it always bellow:
https://jsfiddle.net/tq1bhfno/ (you need to run it in IE)
<div class="col-lg-2 col-md-2">
<div class="select-wrapper">
<select name="gametype" id="gametype" ng-model="selectGameType">
<option>TEST1</option>
<option>TEST2</option>
<option>TEST3</option>
<option>TEST4</option>
<option>TEST5</option>
<option>TEST6</option>
<option>TEST7</option>
</select>
</div>
</div>
Drop-downs are rendered by the Browser/OS. You cannot control this type of behaviour using CSS or JavaScript.
What about the dropdown itself?
As in, the thing that shows the choices when activated. As far as I know, there is no way to style these in any browser. Not even bold or italic. The closest thing to style you can get is grouping them by using . This is probably mostly a UI thing, but it might be a security thing too. You wouldn't want people doing tricky things with fonts that make it unclear what option is selected.
Read More About Dropdown Default Styling
See the behavior without any CSS:
https://jsfiddle.net/tq1bhfno/2/
Only the HTML:
<div class="col-lg-2 col-md-2">
<div class="select-wrapper">
<select name="gametype" id="gametype" ng-model="selectGameType">
<option>TEST1</option>
<option>TEST2</option>
<option>TEST3</option>
<option>TEST4</option>
<option>TEST5</option>
<option>TEST6</option>
<option>TEST7</option>
</select>
</div>
It is the same.
bottom: 100%;
add this attribute to your css for dropdown. This forces to show everything below.
Related
I have a weird styling problem that does not seem be resolved no matter what I do. When I inspect the page and look at the elements I can see the 'width' of the div is correct but the actual select does not go to the correct width even tho I have data-width set and you can see it in the inspect tool also.
Here is the code:
<div class="search-box search-box-dark">
<form asp-action="post">
<div class="select-default">
<select
name="scale"
id="scaleID"
class="selectpicker"
data-width="100%"
asp-for="scaleId"
asp-items="Model.scl"
data-live-search="true">
<option value="">Choose Scale</option>
</select>
</div>
Adding form-control to the class also makes the div go to the correct width with a background but the 'button' that is visible in the inspect tool is not wide engough.
Try removing
'''class="select-default"'''
from div and see if select width property works!
I am attempting a dynamic form generator based on Angular's Dynamic Forms template using Angular 7 and I'm running into a css issue. I am using Bootstrap 4.0 and I hope it's not an issue where I need to go back to 3.0 (I had a prior issue that involved that, but correct re-coding got it to work in 4.0). If so, please let me know.
Now, here is the way that my app works correctly for my end product. My code to generate the drop downs is:
<div class="row">
<div *ngFor="let question of questions" class="col-md-6 form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass">
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When this gets rendered to the screen, the drop downs are aligned correctly, with the correct widths, as you can see:
Now, if I follow Angular's method, my main code block will now become:
<div class="row">
<app-question *ngFor="let question of questions" [question]="question" [form]="form"></app-question>
</div>
And my app-question component has the following code:
<div [formGroup]="form">
<div class="col-{{question.colType}}-{{question.colWidth}} form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass"
>
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When the form renders to the screen it looks like this:
As you can see, the column widths are gone. I'm certain it has something to do with the div tag holding the FormGroup attribute, but that is required for the component to compile and work. I've tried adding it with a span tag, adding the col-md-6 class to the same tag as FormGroup, but I get the same, incorrect CSS rendering.
Is this another Bootstrap 4 issue where I may need to go down to Bootstrap 3 for this to work? If not, what is going on and how can I get the page to correctly render like the first image and yet still be able to use the app-question component in my code?
I believe that the problem is that Angular renders app-question component as a tag <app-question></app-question> and your div tags inside of it have styles relative to that app-question tag, but not the parent <div class="row">. So if you add a class col-md-6(for example) it will cover 50% of the app-question tag, but not the row one.
So if you want the styles to work, you should add the classes here
<div class="row">
<app-question *ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
As an alternative, you can change your app-question component decorator to make it an attribute.
#Component({
selector: '[app-question]'
})
And then use it to any tag you like
<div class="row">
<div app-question
*ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
I've a little problem using bootstrap and adding dynamically element on my page.
I've a form where I lwant to dynamically add new inputs. All that work fine but the rendering is not that good because it seems that there is some missing margin padding between the label and the select.
I use bootstrap as main css.
Here is an exemple : http://jsfiddle.net/4Uf2U/1/
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select></div>
Does anyone have an idea why this happen and how to correct this ?
It is because of the select. The one that is not dynamic is formatted like so:
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select>
</div>
And the dynamic ones are one liners like so:
<div class="form-inline"><label>Label</label><select><option>Option</option></select></div>
So use one way and the style (appearance) will be the same.
Here is an updated jsFiddle: click
I am using Twitter Bootstrap for Rails, in a 3.2 app, and am not seeing the checkboxes appear.
If I look at the same page in just straight HTML (with checkboxes hardcoded in, and using the regular Bootstrap assets) it works fine.
The HTML code is produced correctly, I believe...e.g.:
<div class="field">
<div class="control-group check_boxes optional"><label class="check_boxes optional control-label">Listing Type</label><div class="controls"><label class="checkbox"><input class="check_boxes optional" id="search_listing_type_id_1" name="search[listing_type_id][]" type="checkbox" value="1" />For Sale</label><input name="search[listing_type_id][]" type="hidden" value="" /></div></div>
</div>
Here is the Rails Code:
<%= f.input :listing_type_id, collection: ListingType.order(:name), as: :check_boxes, label: "Listing Type" %>
Here is a live example. Right beside the text "List square footage", should be a checkbox. Scroll down to amenities, and there you will see a list that obviously should have checkboxes.
This doesn't work in development either.
Not quite sure why it's not showing up.
Thoughts?
Looks like uniform.js is setting the opacity of the checkbox to 0.
Try disabling uniform.js if you're not using it.
Update: It also looks like you're getting a 404 on a sprite image? Probably a uniform theme sprite image?
GET http://realty-cloud.herokuapp.com/img/sprite.png 404 (Not Found)
Another Update: This is definitely the problem. Uniform works by making the opacity of the input 0, so that it's invisible, but still clickable, and changing up the markup a little bit, so it looks like this.
<div class="checker" id="uniform-listing_amenity_ids_4">
<span>
<input class="check_boxes optional" id="listing_amenity_ids_4" name="listing[amenity_ids][]" type="checkbox" value="4" style="opacity: 0;">
</span>
</div>
And it sets a css rule on div.checker span:
div.checker span {
background-image: url(../img/sprite.png);
}
That image is missing, so the input appears to be invisible.
actually the problem in you have the check boxes but its hidden, due to the margin property
input[type="checkbox"] {
float: left;
#margin-left: -20px;
}
so remove or change the margin size
see below, FF with firebug
$('input[type="checkbox"]').css("visibility","visible");
I have a search textbox and two image buttons on a page I created with ASP.NET.
When I look at the page with either IE8, Google Chrome or Opera, the textbox does not align with the two image buttons. The buttons appear higher than the textbox and I can't tell why.
Here is the key markup:
<div id=searchbar>
<div id=Panel1
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
<input id=txtSearch type=text name=ctl00$txtSearch>
<input id=btnSearch title=Search src="Test_files/search.png"
type=image name=ctl00$btnSearch>
<input id=btnAdvanced title="Advanced Search" src="Test_files/adv.png"
type=image name=ctl00$btnAdvanced>
</div>
</div>
NOTE: I realize there are a few strange things here such as no quotes around the ids. But there ARE quotes around them in my source. The above snippet is from saving the content from IE and it made a number of changes to the markup.
I also posted the same code at http://www.blackbeltcoder.com/Test/Test.htm if anyone would be willing to take a look. The issue is with the search controls to the right of the black bar near the top.
Thanks.
Try
vertical-align:text-bottom;
on the elements that are too high. It's a common problem. You can try out other options for that CSS property too if that isn't quite right. Have a look here
just add
vertical-align: middle;
to the the input tags css and that should solve the issue