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
Related
I have a question to which I can't find the answer for some time.
It's about DHTMLX scheduler timeline view in tree mode. The problem is that labels with longer text than the available space for the folder elements of the tree(these which have children) disappear, they are not shown in the first column of the timeline view. I can't understand why is this happening. Is there some kind of a setting on the scheduler, which I'm missing. It is important to note that styling of the scheduler has to be with the dhtmlxscheduler_material.css file or in other words material design.
Here is an image of the scheduler with the problem shown
I also provide a code sample which simulates the problem.
https://docs.dhtmlx.com/scheduler/snippet/9445edbf
This behavior can be fixed by the following style:
.dhx_scell_expand{
position:absolute!important;
}
Also in material skin, it requires some additional styling to make it look better, which may look like this fragment:
.dhx_scell_expand{
position:absolute!important;
}
.dhx_scell_name{
margin-left: 26px;
text-align: left !important;
}
Of cause, you can experiment with it to make appropriate for your project.
Also, in a case with long section names, you can change the default width of the section names column through the "dx" parameter:
scheduler.createTimelineView({
...
dx: 300, //200 by default
...
});
Here is an example with additional styling, and the resized names section :
http://snippet.dhtmlx.com/5/a3da39a40
Also, you can separate the section name using the </br> tag, change the height of the section through the "folder_dy" property, and align multiline text through CSS(line-height/ margin), like in the following example:
http://snippet.dhtmlx.com/5/87845739f
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
I am trying to create a tree structure list for one of my tasks. I am planning to use JS-TREE plugin for this purpose. Still the plugin comes with lot of features, I have to do few styling changes to match the given design.
This is the code pen link which I tried so for,
1. Change the plus-square with angle-down icon
2. Change the minus-square with angle-up icon
3. change the square-filled-grey icon(will come if any few of child nodes selected) with minus-square icon
4. Hover blue highlighting not needed
Any way to customize this? OR Any super hit plugins from your experience?
So, it looks like they're using a sprite map and changing the background position to select which icon appears
I was able to move this
.jstree-proton .jstree-anchor > .jstree-undetermined {
background-position: -38px -5px;
}
This satisfied #3. If you inspect any of the icons (jstree-icon class), you'll see a background assigned to 32.png. You'll have to change the positioning for icons that exist there. For the angle up and down you'll have to hide the background image they supplied and insert your own icons
Why don't you try to create a css file and overwrite the jstree class setting "!important" at the end of the rules you want to change? For me it worked because I needed to change the jstree-rename-input class like this.
.jstree-rename-input {
border: none !important;
width: 250px !important;
}
As far as i investigated, this is also the official answer provided by jsTree creator.
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;
}
}
In my project, there is a autocomplete search textbox. Whenever the user is typing something the suggestion box will appear just below the textbox. This suggestion box is hiding behind the screen.
I tried to get in front by applying largest possible z-index, still no use.
Here is the link to the site.
I am providing my site link because the jsfiddle is working fine.
For testing purpose, type co in the textbox and see how the suggestion box is visible.
search for this code and change 12 to 9 .. solve the problems
.edgefxContentContainer {
top: -16px;
z-index: 9;
}
change this div class style :
<div class="edgefxContentContainer pRelative">
Your .edgefxContentContainer contains a z-index of 12. This reveals some of the suggestion box parts. Suggest you search for z-index and debug it