Angular2 Material md-select not inline with md-input - css

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

Related

Prime Ng Autocomplete drop down position not working

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.

custom breakpoint not working in flexlayout

I am trying to set different background color for different resolution mode using flexlayout.
its not working, below is my code
app.component.html
<div class="content" fxLayout="row" fxLayout.xs="column" fxFlexFill >
<div fxFlex="50" [fxFlex.xs]="xsBGColor" [fxFlex.md]="mdBGColor">
first-section
</div>
<div fxFlex="50" [fxFlex.xs]="xsBGColor" [fxFlex.md]="mdBGColor">
second-section
</div>
</div>
app.component.css
.xsBGColor{
background-color:red;
}
.mdBGColor{
background-color:blue;
}
some thing i missed here but i cant find, please suggest what i missed in my code.

You should use ngClass instead of fxFlex
ngClass.xs="xsBGColor"
Ref: https://github.com/angular/flex-layout/wiki/ngClass-API

Boostrap form-control class not wordwraping label

I have a Bootstrap 3.0 application and inside a form I have the following code:
<div class="panel-body">
<div class="row">
<h5>Keywords</h5>
<div class="form-control" style="padding-bottom:40px;">
<div class="col-md-10">
<label>Declaratively walpurgisnacht station wellesley unsmudged cystomatous transfuse pecos nonconservative cocainise seaway unblasted gainsaid prewhipped. Adenomatous tzarevna fustily opelika counterblow balaamitical frogmouth damaskeening orthopneic carriable palaeontology postmyxedemic grandsire retouchtracing. Floor saturnalia bagwork semiacid drawl unregal cartouch predestinating curses traymobile quixotism antithesis fourpenny reshine. Gleamingly mongoloid ectrodactylous endostosis chromophil presagefully titillate cruise proairplane curaao montanan untappable flavius unintercepting. Gotha sarape halfpaced winnipegosis aphasia parotidean hydrate hatchetlike nonignitable shockingly changeable animi feces coerce</label>
</div>
<div class="col-md-2">
<button class="btn btn-primary waves-effect waves-light" style="display: inline-block; width:80px" data-step="1">
Edit
</button>
</div>
</div>
</div>
</div>
The result is the following image.
Here is the form-control style:
If you see my <label> has a lot of words and the problem I have is that the round background rectangle is not growing with the Word Wrap.
I marked with red the round background rectangle that Im talking about.
How can I make that background to grow in the same ratio?
Thanks

You are not using the bootstrap classes in their intended way
.form-control has a fixed height. You could either change .form-control to not have a fixed height or add a custom class to change the height of the element. I recommend looking into the intended use of this and other bootstrap classes here:
https://v4-alpha.getbootstrap.com/components/forms/

You have to edit the .form-control class so that it doesn't have a fixed height. Here's a demo, where I added height:auto to the .form-control class.

Border radius being displayed in select2 input group with checkbox

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)

Perfect 100% width of parent container for a Bootstrap input?

How do I make a Bootstrap input field be exactly 100% as wide as its parent?
As steve-obrien wrote in Bootstrap Issue #1058:
Setting to 100% does not work when applied directly to an input field as it does not take in to account the padding. So you end up with 100% of the container plus the padding on the input box, so the input box usually breaks outside its container.
That ticket offers various solutions, but I'm looking for the best way to do it -- preferably a CSS class already provided by Bootstrap.

Applying the input-block-level class works great for me, across various screen widths. It is defined by Bootstrap in mixins.less as follows:
// Block level inputs
.input-block-level {
display: block;
width: 100%;
min-height: 28px; // Make inputs at least the height of their button counterpart
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
This is very similar to the style suggested by 'assembler' in his comment on issue #1058.

Just add box-sizing:
input[type="text"] {
box-sizing: border-box;
}

If you're using C# ASP.NET MVC's default template you may find that site.css overrides some of Bootstraps styles. If you want to use Bootstrap, as I did, having M$ override this (without your knowledge) can be a source of great frustration! Feel free to remove any of the unwanted styles...
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}

For anyone Googling this, one suggestion is to remove all the input-group class instances. Worked for me in a similar situation. Original code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<div class="input-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="input-group">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</div>
</form>
New code:
<form>
<div class="bs-callout">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="time" placeholder="Time">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<select name="dtarea" class="form-control">
<option value="1">Option value 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<input type="text" name="reason" class="form-control" placeholder="Reason">
</div>
</div>
</form>

I found a solution that worked in my case:
<input class="form-control" style="min-width: 100%!important;" type="text" />
You only need to override the min-width set 100% and important and the result is this one:
If you don't apply it, you will always get this:

In order to get the desired result, you must set "box-sizing: border-box" vs. the default which is "box-sizing: content-box". This is precisely the issue you are referring to (From MDN):
content-box
This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
border-box
The width and height properties include the content, the padding and border, but not the margin."
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Compatibility for this CSS is good.

Use .container-fluid, if you want to full-width as parent, spanning the entire width of your viewport.

What about?
input[type="text"] {
max-width:none;
}
Checking that some css file is causing problems. By default bootstrap displays over the entire width. For instance in MVC directory Content is site.css and there is a definition constraining width.
input,select,textarea {
max-width: 280px;}

just add:
width: 100% !important;

Resources