For a sidenav with an embedded iframe, i was getting double scrollbars,
I fixed that using
::ng-deep.mat-drawer-inner-container {
overflow: hidden !important;
}
This is now causing other mat-drawer-inner-container overflows to be hidden too. How can i fix this?
To hide the scrollbar from the side panel you just need to add the below css to your style.scss
.mat-drawer-inner-container::-webkit-scrollbar {
display: none;
}
Please Note: If you use this CSS in the sidebar component then it will not work!
add this to your style.scss without ::ng-depp, so maybe you put this inside some module where you need it.
// Remove scrollbar from mat-sidenav inner container
.mat-drawer-inner-container {
overflow: hidden !important;
}
Related
I'm using Material-UI and I'm trying to apply ellipsis to the underlying Typography component in CardHeader, but passing noWrap into titleTypographyProps doesn't seem to work.
Do I need to override CardHeader somehow? I tried setting max-width: 100% on both CardHeader and the underlying Typography component with no luck.
Demo
The issue is with MuiCardHeader-content flex. You need to give it a width so that it may show itself inside its parent.
.MuiCardHeader-content {
flex: 1 1 auto;
width: 100%;
}
In order to expand the answer by #Awais, if you override the content CSS class for the header with this:
content {
display: contents
}
It will make your header handle the ellipsis properly even if you use a icon.
I want to make the ngx bootstrap datepicker inline instead of it appearing only when you click an input.
ngx datepicker link
Can someone help me achieve this? I've tried to add it in but there is absolute positioning and if I override it with relative positioning it doesn't work properly.
I just want to see this on the page inline without the need of having it inside an input field box:
Thanks
There is a container input in the documentation which says:
container: A selector specifying the element the datepicker should be appended
to. Currently only supports "body".
Any way to get around this?
try this, set the height to 0 with overflow: hidden an leaving it on the page. It'll be there so the picker with position itself correctly but with no height the input will be invisible and still have the picker show up where its supposed to.
And you can set the isOpen property to true so its opened by default
<input bsDatepicker [isOpen]="true" style="height: 0; overflow: hidden; border: none; padding: 0;" />
in you global css style.css file give
bs-datepicker-container {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
!important is required to coz it is having element level style so you need to override it.
Obvious: make toggle disable and show permanently.
I have an ASP.Net Web Forms application that has the following CSS defined in a master stylesheet:
::-webkit-scrollbar {
display: none;
}
I'm working on a new page that pops up a modal dialog that will sometimes have vertical overflow. In this case, I need the scrollbar to be displayed for my overflow div. However, I can't find a default display property for ::webkit-scrollbar that resets the scrollbar to its original display state. I tried unset and initial unsuccessfully.
I also tried adding a .scroll class to the div I need the scrollbar to display for, and then changing the master CSS to:
:not(.scroll) ::-webkit-scrollbar {
display: none;
}
But that didn't work either. Can anyone help?
try this
.hideThumb::-webkit-scrollbar-thumb { /* we apply the style to actually hide it*/
display: none;
}
I am trying to show bootstrap tooltip in ag-grid cell on hover. Issue is it's showing up partially while part of the tooltip is behind the next column cell. I tried setting z-index for tooltip. But still not able to succeed. Kindly help.
In ngx-bootstrap documentation:
When you have some styles on a parent element that interfere with a tooltip, you’ll want to specify a container="body" so that the tooltip’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like our input groups, button groups, etc) or inside elements with overflow: hidden
You can use the attribute container="body" to solve the problem
You can use CSS tooltips, which will work inside agGrid cells. Please take a look at this plnkr: tooltip in agGrid cell
[data-tooltip]:before {
content: attr(data-tooltip);
display: none;
position: fixed;
margin: 10px 10px 10px 10px;
}
I was able to solve this one by adding the following CSS
[col-id=health].ag-column-hover: {
overflow: visible
}
for angular5+ with ng-bootstrap use container="body"
Try using tooltip-append-to-body="true" option for bootstrap tooltip.
For me this worked, Add below css to your file.
All credit goes to https://stackoverflow.com/a/46007051/16456741
.ag-sparkline-tooltip {
position: fixed;
}
I am trying to change the margin-top property of a div in a WordPress theme, however it does not seem to work. I have added the following line to the custom css stylesheet:
div#primary {
display: block;
margin-top:50px;
}
However the div whose property I want to change does not move down. The example can be found at the following URL: http://who.designbond.co.uk/contact-2/
The div I need to move down is the one containing the text of Phylosophy. Can anyone explain to me what I am doing wrong?
Thanks
That div has an inline style with margin-top: 0px, which is overriding your stylesheet.
You need to remove or modify that inline style, or (in a pinch, and don't tell anyone I said this) add !important to your stylesheet rule).
div#primary {
display: block;
margin-top:50px !important;
}
I know it's not a good thing to do (adding !important), but it can help.
Something is setting some inline styling on that div. You can override it using !important.
#primary {
margin-top: 50px !important;
}
Also, since there is an id on that element you css selector can be simplified to #primary instead of div#primary
I see that the div with id primary has a in line stylesheet. Inline style sheet takes priority over class based style sheet. Your inline stylesheet has margin-top:0px, which is ignoring your class based styling. remove it and it will work.