We Keep Coding

Mat Chip List opon selection expands input

Giving the default behavior, when value is selected from a dropdown, MatChip appears within the input, but also expands it. I am a bit surprised this is the default behavior. Anyone can suggest how they fix it? Providing a forked StackBlitz demo (source take from Angular Material documentation):
DEMO
You can see in the images bellow - when chip selected, input becomes taller.

Problem
The problem is mat-form-field-infix class. When there are chips in the input, they increase the height.
Solution
You can set the minimal height for that class to be the same as when there are chips in the input. You can do it in the CSS file like this:
::ng-deep .mat-form-field-infix {
min-height: 32px;
}
Working example

React-select: weird look inside of react-table filter cell, is it problem with CSS?

I'm using React-table to represent my data and I wanted to filter every column using react-select with multiselect option. The problem is that select that I use look very weird when it is in filter table cell:
What I want to do/have:
search field is needed (sometimes there is a lot of options to select)
input with selected options should be fit to column width but heigh can change so if user select many items if they don't fit they should be moved to the next line
I've prepared fiddle - in the first column is the same situation as in my project. Maybe someone can help me with this issue? Thanks
https://codesandbox.io/s/react-table-custom-filtering-multiple-values-filter-tjtl3

I debugged the actual website of react-select
Link: https://react-select.com/home
This behavior is normal for the input box sizing, only issue is you are getting border for the input.
To Quickly solve that i will recommend you use css selector and target the search input for border
.ReactTable .Select-input input {
border: none;
}
Tried in your code and working as expected

Angular Material - md-autocomplete dropdown's width

I'm using md-autocomplete from Angular Material: here
It seems the dropdown's width goes with the input field's width. If an item's text is too long, there is ellipsis.
However, I want to show full text of an item, while keeping the input field's width relatively short. That is, the dropdown's width should expand with its content.
I tried inspecting the styles of md-autocomplete's elements, but couldn't find any style that does the trick. Any idea?
EDIT:
Here are the style I ended up having:
.md-autocomplete-suggestions-container{
overflow-y:scroll
}
.md-autocomplete-suggestions-container .md-virtual-repeat-scroller{
position:static
}
.md-autocomplete-suggestions-container .md-virtual-repeat-sizer{
height:0 !important
}
.md-autocomplete-suggestions-container .md-virtual-repeat-offsetter{
position:static
}
However there is one more issue. The overflow-y:scroll always shows the vertial scroll bar even when not needed. If I change it to overflow-y:auto, the vertical scroll bar when present will create ellipsis. How do I solve this?

For anyone still facing the problem of autocomplete values being cropped because the panel width is only as wide as the field, the good news is that it has now been fixed, woohoo!
Angular Material Release 6.4.0 (2018-07-16) introduced the following feature,
autocomplete: allow panel to have a width value of auto (#11879) (8a5713e)
So now it's possible to just add the property panelWidth with the value auto and the panel will grow to fit the values.
<mat-autocomplete panelWidth="auto">
<mat-option value="myValue">Now an option with a long label will still be readable<option>
</mat-autocomplete>

You can use css to style md-virtual-repeat-container.
However, that would style every instance of md-virtual-repeat-container that you may have on your site (ie, md-autocomplete and md-virtual-repeat).
Unfortunately, there isn't an option to adjust individual md-autocomplete dropdowns at the moment. I created a ticket and pull request to hopefully solve this issue. Fingers crossed that this will be included in one of the future releases of Angular Material.
Best of luck!

You need to set class on your md-autocomplete element so you can target it in css. See this example
<md-autocomplete class="autocompletable"
md-min-length="0"
...
placeholder="US State?"
md-menu-class="autocompletable-contents">
<md-item-template>
<table>
<tr>
<td><span md-highlight-text="ctrl.searchText"
md-highlight-flags="^i">{{item.ok}}</span>
</td><td>Foo</td>
</tr>
</table>
</md-item-template>
<md-not-found>
No states matching "{{ctrl.searchText}}" were found.
<a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
</md-not-found>
</md-autocomplete>
And then in css you need to do this
md-autocomplete.autocompletable{ width: 200px; }
.autocompletable-contents{ }
EDITS: Tested with materials 1.0.9

I know it very late but in materials 1.1.9 you can add an attribute md-menu-class on the md-autocomplete directive.
The class you add will reported on the .md-autocomplete-suggestions element in the virtual repeat. So you be able to customize the css for this autocomplete only.
exemple :
<md-autocomplete ... md-menu-class="search-field-autocomplete">
will generate
<ul class="md-autocomplete-suggestions search-field-autocomplete" ... >
<li md-virtual-repeat="item in $mdAutocompleteCtrl.matches" ...
so you can customize with css like :
.md-autocomplete-suggestions.search-field-autocomplete {
li {
color: red;
}
}

How to create search box that extend itself when displaying filter?

I want to create a search box that extends itself downward when user input something
Here is an example
Right now I set up the html such that it displays all the possible values at the bottom of the search box
Search: <input ng-model="query">
<ul class="my_possible_values">
<li ng-repeat="possible_value in my_possible_values | filter:query">
{{possible_value}}
</li>
</ul>
However the listed element pushes down other div element below the search box instead of overlaying it.

You should put a position: absolute style on your .my_possible_values class -- that is how I've made/styled my search box dropdowns in the past. This will take the dropdown content out of the normal flow of the DOM, thus preventing it from pushing down the other divs on the page.
You can read more about CSS positions on this page :)
http://www.w3schools.com/cssref/pr_class_position.asp
Additionally, you'll probably want to add overflow-y: scroll and a max-height style to your .my_possible_values menu as well so that it does not overflow the bottom of the page if you have a lot of dropdown options.
I'd say those are the most important CSS rules for creating a good dropdown list. Good luck!

Using jqTransform on hidden contact form, select box value not showing

Sorry if this is a pain the ass, but I could really use some help here:
http://dev.rjlacount.com/treinaAronson-form/
The contact form can be seen by clicking the "Contact" button on the top left. I'm using the jqTransform jQuery plugin to style it. It's hidden initially with display:none; applied to the div with the ID "panel", and slid in with the following:
$("#flip").click(function(e){
e.preventDefault();
$("#panel").slideToggle("3000");
});
With this setup, the contact form isn't displaying the current value of the select box inside its field. If I instead remove the display:none; rule for the panel div from my CSS, and hide the form after the page has loaded with:
$("#panel").hide();
The form display correctly. Does anybody know how I can make this work and avoid the flash of an open panel I get if I hide it with jQuery after the page loads?
Thanks so much for any advice. Please let me know if I can provide any more information.

The problem is, jqtransform is setting width for a label (currently visible value in a transformed select) to match the width of original select.
If the original select (or its parent) has display:none set, and it doesn't have any css width specified, the result of .width() on that element is zero.
You can in fact check (using firebug or google chrome dev tools), that it's not that contact form isn't displaying the current value of the select element, but rather displaying it with a width equal to zero.
The easiest solution in your case, is to set (in your css file) fixed width for the selects that are part of a contact form. That way, even though they will be hidden at first, the jqtransform will set correct width for label. For example:
/* css declaration */
#change-form select {
width: 390px;
}
Side note: there are of course other ways to make it work, including tweaking the jqtransform script to fit your specific use case. Part of the script related to setting mentioned width of a label starts on line 289.