how to reduce toolbar size in angular material 2??
I am using Teradata covalent for angular 2 UI.Teradata covalent itself using angular2.
Angular Material 2 toolbar size is too big for me.
So I want to decrease the size of the toolbar. I have tried to look in CSS in my dev console but I didn't find any padding option. I found height property and I try to reduce that height but didn't work for me.
if you want to look at the demo here https://teradata.github.io/covalent/#/components/material-components
scroll down to Toolbar.
mat-toolbar class of md-toolbar component has a min-height:64px;
You should overwrite it by giving style to md-toolbar like min-height:30px !important
Related
I'm trying to make mobile menu with full width
I tried but it looks like I miss understand something my css rules doesn't applied
this is a live code example :
https://stackblitz.com/edit/react-ucvbgt-sur6ne?file=demo.js
thanks...
You should change your Menu to Drawer (with anchor = 'top')
Visit this to learn more : https://mui.com/material-ui/react-drawer/
I created date component in my angular project. flatpickr is working correctly. Even if I set position as below in the config, when test responsivity of the screen, flatpickr is aligned automatically top of the screen. How can I fix it? How can I align it's position to below of input?
check the dom if the inside flatpikr tag the 2 div are showing or not if not then set alignmemnt to the html element
I have site with fixed header in angular material with z-index of 1100.
While i have some mat-menu in my site which overlap the header with z-index:1200 and had class cdk-overlay-container (angular materiel class) which is default behavior.
To override this i just decrease the cdk-overlay-container z-index to 1000 so that it go behind the fixed header and all things ok to me.
Problem
But when i open my material dialog which uses same cdk-overlay-container and same z-index it shows my fixed header above that overlay because of its high z-index, So any idea how to achieve the above scenario by adding different class to cdk-overlay-container so that my mat-menu goes behind the fixed header but my mat-dialog above all content.
Screen shoots
Normal scenario
https://www.screencast.com/t/XhB2szH3gZe
Problem scenario
https://www.screencast.com/t/fYrMYFEOd
I have one solution by type-script(that when dialog show lower the z-index of header) but i need some pure CSS solution.
Thanks!
I had similar issue with the full-screen CDK overlay container and the material dialog that should come above anything. The issue is, that if you use provided material elements like Dialog, Tooltip, Menu, they all work with overlay CDK. Then, on top, you may have your custom Overlay service that utilizes CDK. In my case, two cdk-container-overlay divs were created. z-index is 1000 by default and the latest instance overlap's when both overlays are required at the same time.
Some will yell that it is not Angular way, but in my case, I ended up adding a backdropClass to the config of the material dialog. Then, I simply select dialog backdrop's parentNode and manually add z-index on demand.
public openFeedbackDialog(): void {
this.dialog.open(FeedbackFormComponent, {
width: '450px',
maxHeight: '450px',
minHeight: '200px',
backdropClass: 'feedbackBackdrop',
hasBackdrop: true
})
window.document.querySelector<any>('.feedbackBackdrop').parentNode.style.zIndex = "1001"
}
I figured it out my self
Just override the z-index of cdk-overlay-container
In your style.scss
.cdk-overlay-container{
z-index:999; //lower then fixed header z-index so it goes behind it
}
and in your component dialog.scss
.cdk-overlay-container{
z-index:2000 !important; //higher then fixed header z-index so it comes above
}
Cheers!
You can solve the issue by using custom OverlayContainer class. You can find example with implementation here.
I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.
If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.
As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".
If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.
How would I go about resetting the styling so that it works within Bootstrap 4?
It looks like the row class in Bootstrap is conflicting with the row class in WebChat.
Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:
#webchat .row {
margin: 0;
}
Hope this helps!
i have implemented navbar using bootstrap.min.css. i am getting the bootstarp menus in two lines during tab resolution.
To resolve the above issue, i want the requirement like following image.
https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/375_responsive_menu/img/ipad.jpg
You have to set the min height and width of menu.. according to tab..
like bootstrap provides us some css (sm -3,6, 9) class according to resolution , you have to do change in them or just create your new class as resolution you want.