I am using a material components and I want to know if is possible to set the size of dropdown select to be exactly with the size of mat-form-field.
the default component is like:
And I want to modify that in order to have the dropdown exactly same size as mat-form-field like this:
but I don't know how to modify the width size and position of the dropdown container, do how can I modify that width size and position.
here is a small example with the component:
https://stackblitz.com/angular/rllajkqybnmy
unfortunately, you need to add !important to the things you add since angular material adds the location as a style attribute
basically, you need to add\change 3 attributes:
max-width - don't allow the select to change if content is wider
min-width - same
transform - to change the location of the select
notice that there's still an animation placement which starts at the original position.
This is the basic change:
.mat-select-panel {
min-width: 180px !important;
max-width: 180px !important;
transform: translate(-2px, 44px) !important;
}
/* this will hide the element while it's being animated because
the animation happens for the original position */
.mat-select-panel.ng-animating {
display: none;
}
Add that to your styles.css, since this element is injected outside of the component.
demo: https://stackblitz.com/edit/angular-material-select-location?file=styles.css
My solution to fix [disableOptionCentering]="true"...
A hack I found to disable the animation:
// TS - Remove Mat-Select Dropdown animation (https://github.com/angular/components/issues/8857)
MatSelect['decorators'][0].args[0].animations[0] = trigger('transformPanel', []);
// CSS - Fix alignment
.mat-select-panel {
margin: 21px 0 35px 16px;
}
A solution which keeps the animation:
// get hold of your mat-select
#ViewChild(MatSelect)
_mySelect: MatSelect;
// assign a custom panel class to the mat-select connected overlay
ngOnInit() {
this._mySelect.overlayDir.panelClass = 'my-select-overlay';
}
// CSS (global or using ViewEncapsulation.none) - fix width with padding and/or max-width
.my-select-overlay {
padding: 0 20px;
min-width: 180px !important; //min-width needs important to override the element style
}
If you adjust the position with margin instead of transform then the animation issue will be fixed!
Example instead of:
transform: translate(-2px, 44px) !important;
do
margin-top: 44px;
margin-left: -2px;
and that will remove the animation issue.
Related
I am using an Angular package below;
NPM angular-mgl-timeline
StackBlitz angular-mgl-timeline
In my settings, I have overflow:scrol in my css so that when I add many entries I can scroll down to see until the last entry.
However, I realized that while scrolling works, the time line (the line in the middle) does not extend to the end. I tried to specify height: auto, height: 100% and min-height: 100%. None of which worked.
Is there any way to extend this line as I scroll down?
Any help will be highly appreciated!
The mgl-timeline component appends a div to represent the timeline-line line (The grey line).
From your code you are defining a maximum height to the mgl-timeline component max-height: 70vh;. The implication is that the timeline-line line will also have a maximum height of 70vh.
If you remove this property then the issue disappears, if it is compulsory that you have the maximum height set, you would have to use a different implementation style wise.
Disable the default timeline-line
Attach a pseudo element to each mgl-timeline-entry, this means that each timeline entry will have the grey line attached to it, so the entries array can grow as long as possible.
Please see below:
.mgl-timeline-line { // Hide the default timeline
display: none;
}
.mgl-timeline-entry-card-header:before { // Pseudo element is attached to the card which creates the time-line line for each entry
width: 10px;
background-color: #a0a0a0;
height: 300%;
content: "";
position: absolute;
left: calc((100% - 10px) / 2);
left: -10px;
top: -100%;
}
I have a nav bar which has a string of text for a link that opens a dropdown. The parent of this link has overflow: hidden to allow me to truncate the string incase it gets too long. However, I want the dropdown to be positioned absolutely underneath and centered regardless of the width of the parent. Since I'm using overflow: hidden, the dropdown gets cutoff. I want to keep the positioning of the dropdown as well as the overflow properties.
Is there a CSS fix for this? I know I can't ignore the parent's overflow property, but I'd rather not use position: fixed and manipulate margins with JavaScript if possible.
I've made a simple fiddle here
Thanks in advance!
Unfortunately there is no way in CSS to make a child of an overflow: hidden element show its contents outside the parent borders, you must change the hierarchy.
If that is not possible, you could add padding at the bottom to .nav-pull-left that is the size of your dropdown, although that's a rubbish solution..
.nav_pull_left {
width:auto;
height:50px;
padding-bottom: 80px;
overflow:hidden;
float: none;
border: 1px solid black;
white-space: nowrap;
}
You could also use JavaScript to dynamically update the height of your parent container when the dropdown shows but once again, reordering the hierarchy is best and cleanest.
If that is the way you want to go, let me know and I can help :)
May I suggest the following, where you change your css as follows.
.nav_pull_right {
min-height:50px; /* changed height to min-height */
...
}
.nav_pull_left {
min-height:50px; /* changed height to min-height */
...
}
.my_dropdown {
position: relative; /* changed absolute to relative */
margin: 0;
margin-left:-87px;
/* top: 2em; */ /* removed top */
left: 50%;
width: 170px;
z-index: 99999;
border:2px solid #929292;
}
With this your container overflow is kept and gets pushed down, the drop down menu is centered.
Is this something you could use?
Here is a fiddle demo
I used this template to create an accordion in Bootstrap.
I will probably have a lot more elements and can't figure out how to set the max height for the menu before the contents of the sublinks div become scrollable, since I have a limited window.
JSFiddle
I already tried applying max height to both #menu and the .list-group.panel
Here's an example of how to get your scrolling working with the code you've provided.
div.sublinks.collapse {
max-height: 200px;
overflow-y: scroll;
}
http://jsfiddle.net/bjpLL5xn/3/
The issue you'll run into is that when expanded the Javascript is going to make the animation "jump".
One item is 38px so you can set a max-height to the .sublinks div to the amount of divs you want to be shown so if you want two make it 76px or you want 3 make it 114px so on so on. Also i added overflow: overlay; so you won't see the items outside the accordion bit it still adds a scrollbar.
Jsfiddle
.panel-group .panel+.panel {
margin-top: 3px !important;
max-height: 90% !important; //90% height of your parent div and if it crosses y-axis scroller will be shown
overflow-y: auto !important;
}
Always use % and not px... you will have resolution issues later.
How to make div scrollable, without hard-coding its height? Usually when you want to make div scrollable, you need to set max-height, otherwise it will be expanding.
#element {
overflow:auto;
max-height: 100px;
}
In my case, I want height to be restricted by parents height (and parent is resizable), not by setting it in CSS.
Here is JSFiddle:
http://jsfiddle.net/mbrnwsk/58qSc/1/
In order for the #content to stretch to fill the remaining space in the parent minus the height of the #title element, you can do it with either CSS or JS. The CSS solution is simple, but you will have to adjust the offset of the top to ensure that it fits properly. By setting the other three offsets (left, bottom and right) to zero, we thereby force the #content element to stretch out completely.
#parent {
border: 3px solid;
height: 150px;
position: relative;
}
#content {
overflow-y: auto;
overflow-x: hidden;
background: cyan;
top: 16px; /* This is based on the assumption that #title has a height of 16px */
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
http://jsfiddle.net/teddyrised/58qSc/3/
For a more responsive solution, you will need to rely on JS to fetch the height of #title, and then set the top property of #content accordingly — the advantage of this is that it will respond well when the viewport size changes, also when the height of #title changes.
For the CSS, it's the same as above but we remove the top declaration. Instead, we delegate this to JS instead:
$(function() {
$("#parent").resizable();
// Function to set height
var setContentHeight = function() {
$('#content').css('top', $('#title').outerHeight());
}
// Recalculate when viewport changes
// You can also bind this function to events that manipulate the dimension of #title
$(window).resize(setContentHeight);
// Run once when DOM is ready
setContentHeight();
});
http://jsfiddle.net/teddyrised/58qSc/4/
The advantage of the JS-based solution is that:
It is responsive — you can always recalculate top by binding the setContentHeight() function to any events that you can foresee will change the dimensions of #title.
You don't have to manually update the top value when you alter the paddings, margins, heights (min-, max- or height), line-height of #title, or any of its children (if they exist)
height:100%;
will set it equal to the parents height.
See it here
EDIT: The comment is right: Need to add padding to the parent
#parent {padding-bottom: 1em;}
Long story short - check the question title :)
I'm working on a nav for my project, and recently I've encountered a strange error. Here's a little background:
I want some custom animated hide/reveal behavior implemented, so simply using jQuery 1.10 show() and hide() methods won't suffice: I'm toggling a class on the element in question.
The class I toggle is called .hidden. It's used along with the class .toReveal to avoid having to set overflow:hidden; to each of the items I want revealed. I've also mentioned I'm going for animated hide/reveal behavior, so I'll provide the relevant CSS:
*{-webkit-transition:0.3s all;-moz-transition:0.3s all;}
.hidden, .hidden * {
padding-top:0 !important;
padding-bottom:0 !important;
margin-top:0 !important;
margin-bottom:0 !important;
height:0 !important;
border-top-width:0 !important;
border-bottom-width:0 !important;
}
.toReveal, .toReveal * { overflow:hidden; height:auto; }
So the experience I get is rather strange: when I expand the hidden element - the transition is going as planned. But when I try to hide the element - the transition doesn't happen.
I've found little traces of what's actually causing the trouble: if I remove height:0 !important; line from the code - the transition does happen, but the element doesn't collapse, while collapsing is the whole point of this :)
Here's a jsFiddle to the simplified prototype: http://jsfiddle.net/KCAHe/
Steps to see the desired behavior:
Click on dev/local
Advanced button will appear: click on sandbox
Steps to reproduce the issue:
Click on dev/local Keep clicking on Advanced
Option 1:
Generally animating/transitioning from 0 to auto does not work. Changing the height from auto to some fixed value for the .toReveal CSS class will fix the issue.
.toReveal{
overflow: hidden;
height: 30px; /* set height such that it is big enough to accomodate its contents.*/
}
.toReveal * {
overflow: hidden;
height: auto;
}
Note: The transition part from height: 0 to height: auto is already working for you by using Option 2. But you might want to have a look at this article also.
Option 2: (used by OP based on feedback to comments)
Remove the overflow: hidden and it seems to fix the issue.
Also, as you have mentioned in the OP comment, adding display: block will make it slide from top because <input> is inline by default.
Modified CSS
.toReveal, .toReveal * {
display: block;
height: auto;
}
Working Fiddle
Alternatively, adding overflow: visible !important; to the .hidden, .hidden * CSS also seems to work.