I'm new to Angular/Angular Material so I'm not sure if this is code I need to write myself or its already built in a specific way. I'm having a problem with the drop down of the mat-select, the panel that pops up when you click select is not matching the width of the select drop down bar with the arrow. I learned from this question: Styling mat-select in Angular Material that the width of the panel is always equal to the width of the select element, but thats not the case for me. Is there a way to fix the width of the drop down if its not the same size?
That depends on the width of the text options you have on your mat-options.
The panel always takes the width of the max text length. so if the max text length is > select input element width, then the panel should be > select element width.
To better understand:
-Example with: max text width < select element width: https://stackblitz.com/angular/olkexjgqxpk?file=src%2Fapp%2Fselect-custom-trigger-example.ts
-Example with max text width > select element width: https://stackblitz.com/edit/angular-4bk5ns?file=src%2Fapp%2Fselect-custom-trigger-example.html
I add the following two rules to my top level style sheet so I never have to deal with the overflow in my select list
.cdk-overlay-pane {
width: fit-content !important;
}
.mat-select-panel {
max-width: unset !important;
}
https://stackblitz.com/edit/angular-pqtiem?file=src%2Fstyles.scss
Related
:-)
I use 2 features of the PrimeNG table (<p-table>, Version 8) in combination:
Scroll
Row expansion
This works quite well as long as the table is indeed scrollable:
But when to many rows are collapsed the table is smaller than the threashold scrollHeight I configured at the p-table. That makes the scrollbar go away so that the table body fills up that space - without the header getting wider too:
What I tried so far
Force the scrollbar: According to this article giving an html element the css style overflow-y: scroll enforces the scrollbar to allways be visible. However the scrollable element I deal with here is generated by PrimeNG and so far I couldn't overwrite it's style
Use position: sticky to make the header follow: I already blowed hours in applying that attribute to the header. It never took effect. Thats why I tried this with the scrollable function of p-tablein the first place.
May the force be with you!
This workaround works for me with vertical scrollbar always be shown:
body .ui-table-scrollable-body {
overflow-y: scroll;
}
I'm using Angular's flex-layout library, but running into an issue when I create a row with 2 columns whose widths are 50%. When one of the dropdowns is any way used, then the other column will shrink by a little bit. Inspecting the elements in Chrome, I'm not seeing anything obvious that would cause the issue.
You can reproduce the issue by selecting an option from the Select #1 dropdown.
http://plnkr.co/edit/aL1qrrP3sX2XZQcfaglQ?p=preview
What am I missing?
The problem is that when you select an item, the placeholder which goes to the top of your select input has its width increased by some javascript. As it is in position: relative, its place in the DOM doesn't change, so its still like it is in the select field but with an increased width, which push the arrow to the right.
To fix the issue, you can add
.mat-select-arrow {
position: absolute;
right: 0;
}
So the arrow will be in absolute positioning and won't be pushed by the placeholder.
It's strange though that the width of the placeholder is changed...
I am using the below code to list the cart items in a grid.
http://www.bootply.com/113898#
But the three vertical columns are of different heights in the same row when Product Name is a long text. Want the row to have the height of the largest li item. I tried display:table for li but it's not fixing it.
What css changes i need to make it work.
Thanks.
You could use javascript to equalise those h4's dynamically, but I reckon just set a min height on them as I have in your example: http://www.bootply.com/113898#
h4 {min-height: 100px;}
On responsive, say whenever your columns all go to 100%, set your h4 to min-height: none to allow them all to be whatever height the text makes them.
I am working with the 12 column grid style sheet from http://cssgrid.net/
It's great, the only problem is that I cannot have empty columns on the left side of the page. If I create an empty div with class "threecol" for example, the contentless div is not being displayed.
.row .threecol {
width: 22.05%;
}
Here is the whole CSS file.
My question: Is there a way to add a class to empty columns that prevents them from being ignored, so I actually have an empty div with the given %-width?
You'll either have to make the div "not empty" with something like a  , or to explicitly set a height (or min-height) value on it. As your div is empty, setting its height should probably not affect your layout anyway.
How do I get the input to expand to the full width of the parent div? For label it worked fine. The code can be found here: http://jsfiddle.net/7h8Zg/
What makes the label expand but not the input?
change the left padding to percent, and use the rest for width, like so:
padding:0 0 0 2%;width:98%;
If you want the inputs to be the same size as the submit button, you should add width:97% to the input rule.
http://jsfiddle.net/7h8Zg/15/
Adding
width: 100%;
to the input class allows the input to expand to the full size of the parent div.
JSFiddle: http://jsfiddle.net/7h8Zg/5/